SortableListDraggable List is a behavior of a list which allows re-arrangement of its items. 
The drag-and-drop functionality is a preferred method of organization for most users. It’s more organic with the gesture controls of mobile and intuitive. Drag-and-drop provides a level of direct manipulation that other methods can’t match. Draggable list is less appropriate in long lists with scrolling.

Overview

Usage Examples

SpecAnimation in Google Material Design: https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1dtprsH4jZ2nOnjBCJeJXd7n4U-jmWyas%2F03-list-reorder.mp4

Dev

PlaygroundCode Example

TIP

This component extends the FlatList props.

APIThis is the list of additional props for the component

data

ItemT[] (ItemT extends {id: string})

Required

The data of the list, with an id prop as unique identifier.Do not update 'data' in 'onOrderChange' (i.e. for each order change); only update it when you change the items (i.g. adding and removing an item).

enableHaptic

boolean

Whether to enable the haptic feedback. (please note that react-native-haptic-feedback does not support the specific haptic type on Android starting on an unknown version, you can use 1.8.2 for it to work properly)

flexMigration

boolean

A temporary migration flag for enabling flex on the list's container (like it should be by default)

itemProps

{margins?: {marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number}}

Extra props for the item.

onOrderChange

(data: ItemT[], info: OrderChangeInfo) => void

Required

A callback to get the new order (or swapped items) and info about the change (from and to indices).

scale

number

Scale the item once dragged.. Default is 1