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})
#
enableHapticWhether 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
#
itemPropsExtra props for the item.
{margins?: {marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number}}
#
onOrderChangeA callback to get the new order (or swapped items).
(data: ItemT[]) => void
#
scaleScale the item once dragged.
number