diff --git a/App.tsx b/App.tsx index e3f34a7..2f21bb8 100644 --- a/App.tsx +++ b/App.tsx @@ -20,6 +20,7 @@ const INITIAL_DATA = Array.from({length: 30}, (_, i) => { const App = () => { const [data, setData] = useState(INITIAL_DATA); + // Item move done and new item array received const handleMove = useCallback( (fromIndex: number, toIndex: number, items: Item[]) => { setData(items); @@ -27,8 +28,10 @@ const App = () => { [], ); + // Your custom FlatList item const MyListItem = React.memo( ({item, drag}: {item: MyItem; drag?: (id: string) => void}) => { + // Long press fires 'drag' to start item dragging const handleLongPress = useCallback(() => { drag && drag(item.id); }, [drag, item.id]); diff --git a/README.md b/README.md index f953fc7..13ffcfb 100644 --- a/README.md +++ b/README.md @@ -22,38 +22,38 @@ Not tested in production. ``` const App = () => { const [data, setData] = useState(INITIAL_DATA); - const [selected, setSelected] = useState(undefined); - // Handle item data update on move + // Item move done and new item array received const handleMove = useCallback( (fromIndex: number, toIndex: number, items: Item[]) => { - console.log('handleMove ', {fromIndex, toIndex}); - setSelected(undefined); setData(items); }, [], ); - // Make your custom item for FlatList - const MyListItem = React.memo(({item}: {item: MyItem}) => { - const handleSelected = useCallback(() => { - console.log('selected', {item}); - item.id === selected?.id ? setSelected(undefined) : setSelected(item); - }, [item]); - const backgroundColor = item.id === selected?.id ? 'lightgray' : undefined; - return ( - - {item.title} - - ); - }); - - const renderItem = useCallback(({item}: {item: MyItem}) => { - return ; - }, [selected]); + // Your custom FlatList item + const MyListItem = React.memo( + ({item, drag}: {item: MyItem; drag?: (id: string) => void}) => { + // Long press fires 'drag' to start item dragging + const handleLongPress = useCallback(() => { + drag && drag(item.id); + }, [drag, item.id]); + return ( + + {item.title} + + ); + }, + ); + const renderItem = useCallback( + ({item, drag}: {item: MyItem; drag?: (id: string) => void}) => { + return ; + }, + [], + ); return ( @@ -61,7 +61,6 @@ const App = () => {