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