React Native Drag FlatList

Inspired by react-native-draggable-flatlist. No other dependencies. Support typescript.

Usage

Props

all props will be spread onto FlatList

Name	Type	Description
data	T[]	items to be rendered
renderItem	(params: { item: T; index: number; drag: () => void; }) => React.ReactElement	when need to drag the item, call drag method
keyExtractor	(item: T, index: number) => string	to get unique key
onMoveEnd	(data: T[]) => void	called when drag end, return the updated data
horizontal	boolean	orientation of list
autoscrollThreshold	number	distance from edge of container where list begins to autoscroll when dragging. default 0.05

Example

import React, { useState } from "react";
import { Text, TouchableOpacity, StyleSheet } from "react-native";
 
import FlatList from "react-native-drag-flatlist";
 
const colors = ["#d3f261", "#7cb305", "#5b8c00", "#3f6600", "#254000"];
 
const originalData = new Array(100).fill(0).map((item, index) => ({
  text: index,
  color: colors[index % colors.length]
}));
 
const App = () => {
  const [data, setData] = useState(originalData);
 
  const keyExtractor = item => item.text.toString();
 
  const renderItem = ({ item, drag }) => (
    <TouchableOpacity
      style={[styles.item, { backgroundColor: item.color }]}
      onLongPress={drag}
    >
      <Text>{item.text}</Text>
    </TouchableOpacity>
  );
 
  return (
    <FlatList
      data={data}
      keyExtractor={keyExtractor}
      renderItem={renderItem}
      onMoveEnd={setData}
    />
  );
};
 
const styles = StyleSheet.create({
  item: {
    justifyContent: "center",
    alignItems: "center",
    width: 100,
    height: 100
  }
});
 
export default App;