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
