Registry /
testing / react-native-flashdrag-list
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.
FlashDragList
✓ import FlashDragList from 'react-native-flashdrag-list'
✗ import { FlashDragList } from 'react-native-flashdrag-list'
Default export only; named import will fail.
FlashDragList (CommonJS)
✓ const FlashDragList = require('react-native-flashdrag-list').default
✗ const FlashDragList = require('react-native-flashdrag-list')
CJS require must access .default because the library exports an ES module.
TypeScript type for renderItem
✓ import type { FlashDragListRenderItem } from 'react-native-flashdrag-list'
Available for type-checking the renderItem callback.
Complete example showing setup with GestureHandlerRootView, state management for drag sorting, and renderItem callback.
import React, { useState } from 'react';
import { SafeAreaView, Text, TouchableOpacity } from 'react-native';
import FlashDragList from 'react-native-flashdrag-list';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
interface Item {
title: string;
color: string;
}
const NUM_ITEMS = 200;
const ITEM_HEIGHT = 60;
const App = () => {
const [data, setData] = useState(() =>
new Array(NUM_ITEMS).fill('').map((_, i) => {
const colors = ['#493548', '#4B4E6D', '#6A8D92', '#80B192', '#A1E887'];
return { title: 'Item ' + i, color: colors[Math.round(i % colors.length)] };
})
);
const onSort = (fromIndex: number, toIndex: number) => {
const copy = [...data];
const [removed] = copy.splice(fromIndex, 1);
copy.splice(toIndex, 0, removed);
setData(copy);
};
const renderItem = (item: Item, index: number, active: boolean, beginDrag: () => any) => (
<TouchableOpacity
onLongPress={beginDrag}
style={{ width: '100%', height: ITEM_HEIGHT, alignItems: 'center', justifyContent: 'center', backgroundColor: item.color }}>
<Text style={{ color: 'white', fontWeight: 'bold' }}>{item.title}</Text>
</TouchableOpacity>
);
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<SafeAreaView style={{ flex: 1, height: '100%', backgroundColor: 'white' }}>
<FlashDragList data={data} renderItem={renderItem} itemsSize={ITEM_HEIGHT} onSort={onSort} />
</SafeAreaView>
</GestureHandlerRootView>
);
};
export default App;
Errors
Common errors & fixes
Error: Cannot find module 'react-native-flashdrag-list'
Package not installed or npm cache issue.
fixRun 'npm install react-native-flashdrag-list' and ensure node_modules contains it.
Invariant Violation: GestureHandlerRootView is not found.
GestureHandlerRootView is missing or not wrapping the component.
fixWrap the component tree with <GestureHandlerRootView style={{flex:1}}> and ensure react-native-gesture-handler is installed. TypeError: (0 , _reactNativeFlashdragList.default) is not a function (it is undefined)
Using named import { FlashDragList } instead of default import.
fixChange import to 'import FlashDragList from ...'.
FlashDragList: itemsSize prop is required and must be a number.
Missing itemsSize prop or wrong type.
fixPass a number like itemsSize={60}. Audit
Dependencies
@shopify/flash-listrequiredpeer dependency providing high-performance list rendering
react-native-gesture-handlerrequiredpeer dependency for drag gesture handling
react-native-reanimatedrequiredpeer dependency for smooth animations during drag