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.

!Draggable FlatList demo

Install

1. 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!
2. Install this package using npm or yarn

with npm:

``
npm install --save react-native-draggable-flatlist
`

with yarn:

`
yarn add react-native-draggable-flatlist
`

3. import DraggableFlatList from 'react-native-draggable-flatlist'

Api

$3

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). |
| 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>) => void | Returns underlying Animated FlatList ref. |
| animationConfig | Partial | 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. |
| dragHitSlop | object: {top: number, left: number, bottom: number, right: number} | Enables control over what part of the connected view area can be used to begin recognizing the gesture. Numbers need to be non-positive (only possible to reduce responsive area).|
| debug | boolean | Enables debug logging and animation debugger. |

Example

`javascript
import React, { Component } from "react";
import { View, TouchableOpacity, Text } from "react-native";
import DraggableFlatList from "react-native-draggable-flatlist";

const exampleData = [...Array(20)].map((d, index) => ({
key: item-${index}, // For example only -- don't use index as your key!
label: index,
backgroundColor: rgb(${Math.floor(Math.random() 255)}, ${index
5}, ${132})
}));

class Example extends Component {
state = {
data: exampleData
};

renderItem = ({ item, index, drag, isActive }) => {
return (
style={{
height: 100,
backgroundColor: isActive ? "blue" : item.backgroundColor,
alignItems: "center",
justifyContent: "center"
}}
onLongPress={drag}
>
style={{
fontWeight: "bold",
color: "white",
fontSize: 32
}}
>
{item.label}


);
};

render() {
return (

data={this.state.data}
renderItem={this.renderItem}
keyExtractor={(item, index) => draggable-item-${item.key}}
onDragEnd={({ data }) => this.setState({ data })}
/>

);
}
}

export default Example;
``