Draggable FlatList For React Native

A React component to render a draggable flatlist component in your next mobile app.

How to use it:

1. Install & import the component.

# Yarn
$ yarn add react-native-draggable-flatlist

# NPM
$ npm i react-native-draggable-flatlist --save

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

2. Add a draggable flatlist component to the app.

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

3. All possible component options.

autoscrollSpeed?: number;
autoscrollThreshold?: number;
data: T[];
onRef?: (ref: React.RefObject<AnimatedFlatListType<T>>) => void;
onDragBegin?: (index: number) => void;
onRelease?: (index: number) => void;
onDragEnd?: (params: DragEndParams<T>) => void;
renderItem: (params: RenderItemParams<T>) => React.ReactNode;
renderPlaceholder?: (params: { item: T; index: number }) => React.ReactNode;
animationConfig: Partial<Animated.SpringConfig>;
activationDistance?: number;
debug?: boolean;
layoutInvalidationKey?: string;
onScrollOffsetChange?: (scrollOffset: number) => void;
onPlaceholderIndexChange?: (placeholderIndex: number) => void;
dragItemOverflow?: boolean;

Preview:

Download Details:

Author: computerjazz

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/computerjazz/react-native-draggable-flatlist

License: MIT