Draggable Items Disappear When Using Zustand (Works with useState)

[WallysonGalvao]

Description

When using react-native-draggable-flatlist with Zustand state management, the list items disappear from the screen during drag operations. The same implementation works correctly with React's native useState.

Reproduction Steps

1. Create a component using react-native-draggable-flatlist with Zustand
2. Implement drag logic as shown in official examples
3. Attempt to drag items
4. Observe items disappearing (Zustand) vs working normally (useState)

Live Reproduction:
Expo Snack Demo

Code Comparison

Working (useState):

const [items, setItems] = useState(DATA);

useState.mp4

Broken (Zustand):

const { items, setItems } = useMyStore(); // Zustand store

useStore.mp4

Expected vs Actual Behavior

✅ Expected:
Items should remain visible and draggable (as with useState implementation).

❌ Actual:

• Items disappear during drag operations
• No error messages in console
• UI becomes unresponsive after disappearance

Environment

Dependency	Version
react-native-draggable-flatlist	4.0.2
zustand	5.0.3
react	19.0.0
react-native	0.79.1
react-native-gesture-handler	2.25.0
react-native-reanimated	3.17.5

[thame]

Add index to your keyExtractor

[WallysonGalvao]

So, this patch from @callaars works for me

[sgup]

Add index to your keyExtractor

This fixed it for me

[dhumblecoder]

Add index to your keyExtractor

This fixed it for me

this actually fixed it for me, can someone explain at least in summary of why adding index solved it?

[vasiliy-pivovarov]

Add index to your keyExtractor

This fixed it for me

this actually fixed it for me, can someone explain at least in summary of why adding index solved it?

because it assigns new index each time you replace items. it leads to re-rendering the whole tree
it could be temp solution but i prefer to find more robust and user-friendly approach
this index hack also has some glitches, as example i have animated view inside my draggable component and after i replace an item to another place in the list all my animations are ressetted

[vasiliy-pivovarov]

Add index to your keyExtractor

This fixed it for me

this actually fixed it for me, can someone explain at least in summary of why adding index solved it?

because it assigns new index each time you replace items. it leads to re-rendering the whole tree it could be temp solution but i prefer to find more robust and user-friendly approach this index hack also has some glitches, as example i have animated view inside my draggable component and after i replace an item to another place in the list all my animations are ressetted

upgrade react-native-reanimated to 3.16.3 and react-native-gesture-handler to 2.27.1

fixed this