Registry /
testing / react-native-draggable-flatlist
Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
DraggableFlatList
✓ import DraggableFlatList from 'react-native-draggable-flatlist'
✗ const DraggableFlatList = require('react-native-draggable-flatlist');
Default export; named export also available as { DraggableFlatList }.
RenderItemParams
✓ import { RenderItemParams } from 'react-native-draggable-flatlist'
✗ import { RenderItemParams } from 'react-native-draggable-flatlist'
TypeScript type for renderItem parameters.
ScaleDecorator
✓ import { ScaleDecorator } from 'react-native-draggable-flatlist'
Optional decorator for scaling animation.
ShadowDecorator
✓ import { ShadowDecorator } from 'react-native-draggable-flatlist'
Optional decorator for shadow animation.
OpacityDecorator
✓ import { OpacityDecorator } from 'react-native-draggable-flatlist'
Optional decorator for opacity animation.
NestableDraggableFlatList
✓ import { NestableDraggableFlatList } from 'react-native-draggable-flatlist'
For nested drag-and-drop lists.
Basic usage: long press to drag, reorder items, and update state on drag end.
import React, { useState } from 'react';
import { Text, TouchableOpacity } from 'react-native';
import DraggableFlatList, { RenderItemParams } from 'react-native-draggable-flatlist';
const App: React.FC = () => {
const [data, setData] = useState([
{ key: '1', label: 'Item 1' },
{ key: '2', label: 'Item 2' },
{ key: '3', label: 'Item 3' },
]);
const renderItem = ({ item, drag, isActive }: RenderItemParams<{ key: string; label: string }>) => (
<TouchableOpacity
onLongPress={drag}
style={{
padding: 20,
backgroundColor: isActive ? 'lightblue' : 'white',
marginVertical: 2,
}}
>
<Text>{item.label}</Text>
</TouchableOpacity>
);
return (
<DraggableFlatList
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.key}
onDragEnd={({ data }) => setData(data)}
/>
);
};
export default App;
Errors
Common errors & fixes
TypeError: undefined is not an object (evaluating '_this.onGestureEvent')
Missing Gesture Handler setup or incorrect version.
fixEnsure react-native-gesture-handler >=2.0.0 is installed and GestureHandlerRootView wraps the component tree.
Error: [Reanimated] Reanimated 2 failed to create a worklet, maybe you forgot to add reanimated's babel plugin?
Reanimated babel plugin not configured.
fixAdd 'react-native-reanimated/plugin' to your babel.config.js plugins array.
Invariant Violation: NativeComponent: "RNCDraggableFlatList" was not found in the UIManager.
Native module not linked or pod not installed.
fixRun npx pod-install for iOS, or rebuild the Android app.
Cannot read property 'scrollToOffset' of undefined
Ref forwarding to FlatList not set up correctly.
fixPass ref prop to DraggableFlatList, not to the underlying FlatList.
Audit
Dependencies
react-nativerequiredpeer dependency required for FlatList and core
react-native-gesture-handlerrequiredpeer dependency for gesture handling
react-native-reanimatedrequiredpeer dependency for animated interactions