React Native Draggable FlatList
A drag-and-drop-enabled FlatList component for React Native.
Fully native interactions powered by Reanimated and React Native Gesture Handler.
To use swipeable list items in a DraggableFlatList see React Native Swipeable Item.
Install
- Follow installation instructions for reanimated and react-native-gesture-handler. RNGH requires you to make changes to
MainActivity.java
. Be sure to follow all Android instructions! - Install this package using
npm
oryarn
with npm
:
npm install --save react-native-draggable-flatlist
with yarn
:
yarn add react-native-draggable-flatlist
import DraggableFlatList from 'react-native-draggable-flatlist'
Api
Props
All props are spread onto underlying FlatList
Name | Type | Description |
---|---|---|
data |
T[] |
Items to be rendered. |
horizontal |
boolean |
Orientation of list. |
renderItem |
(params: { item: T, index: number, drag: () => void, isActive: boolean}) => JSX.Element |
Call drag when the row should become active (i.e. in an onLongPress or onPressIn ). |
keyExtractor |
(item: T, index: number) => string |
Unique key for each item |
onDragBegin |
(index: number) => void |
Called when row becomes active. |
onRelease |
(index: number) => void |
Called when active row touch ends. |
onDragEnd |
(params: { data: T[], from: number, to: number }) => void |
Called after animation has completed. Returns updated ordering of data |
autoscrollThreshold |
number |
Distance from edge of container where list begins to autoscroll when dragging. |
autoscrollSpeed |
number |
Determines how fast the list autoscrolls. |
onRef |
(ref: React.RefObject<DraggableFlatList<T>>) => void |
Returns underlying Animated FlatList ref. |
animationConfig |
Partial<Animated.SpringConfig> |
Configure list animations. See reanimated spring config |
activationDistance |
number |
Distance a finger must travel before the gesture handler activates. Useful when using a draggable list within a TabNavigator so that the list does not capture navigator gestures. |
layoutInvalidationKey |
string |
Changing this value forces a remeasure of all item layouts. Useful if item size/ordering updates after initial mount. |
onScrollOffsetChange |
(offset: number) => void |
Called with scroll offset. Stand-in for onScroll . |
refreshControl |
React Component |
For iOS you can use standart RefreshControl component. For android you should use custom implementataion. You can left this field undefined, default implementation will be used. Se example for more details. |
refreshing |
boolean |
Android only! Set this true while waiting for new data from a refresh. |
onRefresh |
() => void |
Android only! Function that will be called when user pulls down for refresh. |
refreshControlOffset |
number |
Android only! Padding from top for flatlist container for pull to refresh implementation. |
Name | Type | Description |
:------------------------- | :---------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
data |
T[] |
Items to be rendered. |
horizontal |
boolean |
Orientation of list. |
renderItem |
(params: { item: T, index: number, drag: () => void, isActive: boolean}) => JSX.Element |
Call drag when the row should become active (i.e. in an onLongPress or onPressIn ). |
renderPlaceholder |
(params: { item: T, index: number }) => React.ReactNode |
Component to be rendered underneath the hovering component |
keyExtractor |
(item: T, index: number) => string |
Unique key for each item |
onDragBegin |
(index: number) => void |
Called when row becomes active. |
onRelease |
(index: number) => void |
Called when active row touch ends. |
onDragEnd |
(params: { data: T[], from: number, to: number }) => void |
Called after animation has completed. Returns updated ordering of data |
autoscrollThreshold |
number |
Distance from edge of container where list begins to autoscroll when dragging. |
autoscrollSpeed |
number |
Determines how fast the list autoscrolls. |
onRef |
(ref: React.RefObject<DraggableFlatList<T>>) => void |
Returns underlying Animated FlatList ref. |
animationConfig |
Partial<Animated.SpringConfig> |
Configure list animations. See reanimated spring config |
activationDistance |
number |
Distance a finger must travel before the gesture handler activates. Useful when using a draggable list within a TabNavigator so that the list does not capture navigator gestures. |
layoutInvalidationKey |
string |
Changing this value forces a remeasure of all item layouts. Useful if item size/ordering updates after initial mount. |
onScrollOffsetChange |
(offset: number) => void |
Called with scroll offset. Stand-in for onScroll . |
onPlaceholderIndexChange |
(index: number) => void |
Called when the index of the placeholder changes |
dragItemOverflow |
boolean |
If true, dragged item follows finger beyond list boundary. |
Example
;;; const exampleData = ...Array20; state = data: exampleData ; { return <TouchableOpacity style= height: 100 backgroundColor: isActive ? "blue" : itembackgroundColor alignItems: "center" justifyContent: "center" onLongPress=drag > <Text style= fontWeight: "bold" color: "white" fontSize: 32 > itemlabel </Text> </TouchableOpacity> ; }; { return <View style= flex: 1 > <DraggableFlatList data=thisstatedata renderItem=thisrenderItem keyExtractor= `draggable-item-` onDragEnd= this /> </View> ; } ;
Example with custom pull to refresh for Android
;;; const exampleData = ...Array20; state = data: exampleData refreshing: false ; { return <TouchableOpacity style= height: 100 backgroundColor: isActive ? "blue" : itembackgroundColor alignItems: "center" justifyContent: "center" onLongPress=drag > <Text style= fontWeight: "bold" color: "white" fontSize: 32 > itemlabel </Text> </TouchableOpacity> ; }; { //update something }; { const iOSrefreshControl = <RefreshControl onRefresh=thisonRefresh refreshing=thisstaterefreshing /> ; const androidRefreshControl = <View style= height: 50 zIndex: -1 position: "absolute" left: 0 right: 0 top: 0 > <View style= flex: 1 justifyContent: "center" alignItems: "center" > <ActivityIndicator size="large" /> </View> </View> ; return <View style= flex: 1 > <DraggableFlatList data=thisstatedata renderItem=thisrenderItem keyExtractor= `draggable-item-` onDragEnd= this refreshControl= PlatformOS === "ios" ? iOSrefreshControl : androidRefreshControl onRefresh=thisonRefresh refreshing=thisstaterefreshing refreshControlOffset=50 /> </View> ; } ;