@upacyxou/react-native-draggable-flatlist NPM

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

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 or yarn

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

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 (
      <TouchableOpacity
        style={{
          height: 100,
          backgroundColor: isActive ? "blue" : item.backgroundColor,
          alignItems: "center",
          justifyContent: "center"
        }}
        onLongPress={drag}
      >
        <Text
          style={{
            fontWeight: "bold",
            color: "white",
            fontSize: 32
          }}
        >
          {item.label}
        </Text>
      </TouchableOpacity>
    );
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <DraggableFlatList
          data={this.state.data}
          renderItem={this.renderItem}
          keyExtractor={(item, index) => `draggable-item-${item.key}`}
          onDragEnd={({ data }) => this.setState({ data })}
        />
      </View>
    );
  }
}

export default Example;