Skip to main content

SortableList

A sortable list component
(code example)

info

This component extends FlatList props.

note

We've seen a case where not all items are rendered on some Android devices, this appears to be a bug with FlatList that is using CellRendererComponent, our current workaround is for you to add initialNumToRender={data.length}.

Usage#

<SortableList  data={data}  onOrderChange={onOrderChange}  renderItem={renderItem}  keyExtractor={keyExtractor}/>

API#

data#

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).#

The data of the list, with an id prop as unique identifier.
ItemT[] (ItemT extends {id: string})

enableHaptic#

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)
boolean

itemProps#

Extra props for the item.
{margins?: {marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number}}

onOrderChange#

A callback to get the new order (or swapped items).
(data: ItemT[]) => void

scale#

Scale the item once dragged.
number