Glitch on drag end

[fabrizio-bianchi]

This package has external dependencies of react-native-reanimated and react-native-gesture-handler which must be installed separately. Before opening an issue related to animations or gestures please verify that you have completed ALL installation steps, including the changes to MainActivity.

Describe the bug
A glitch occurs on drag end when the data is updated.

ScreenRecording_01-22-2025.19-05-00_1.MP4

To Reproduce
Just run the code example shown on the readme page.

Platform & Dependencies
Please list any applicable dependencies in addition to those below (react-navigation etc).

• react-native-draggable-flatlist version: 4.0.1
• Platform: iOS 18 (iPhone 15 Pro Max) and iPadOS 18 (iPad Pro) via Expo Go
• React Native or Expo version: 52.0.7
• Reanimated version: 3.16.1
• React Native Gesture Handler version: 2.20.2

Thank you for your help.

[Fjort]

Hi @fabrizio-bianchi !
Try this library. Works correctly and is updated regularly.

[a33nazarenko]

This package has external dependencies of react-native-reanimated and react-native-gesture-handler which must be installed separately. Before opening an issue related to animations or gestures please verify that you have completed ALL installation steps, including the changes to MainActivity.

Describe the bug A glitch occurs on drag end when the data is updated.

ScreenRecording_01-22-2025.19-05-00_1.MP4
To Reproduce Just run the code example shown on the readme page.

Platform & Dependencies Please list any applicable dependencies in addition to those below (react-navigation etc).

• react-native-draggable-flatlist version: 4.0.1
• Platform: iOS 18 (iPhone 15 Pro Max) and iPadOS 18 (iPad Pro) via Expo Go
• React Native or Expo version: 52.0.7
• Reanimated version: 3.16.1
• React Native Gesture Handler version: 2.20.2

Thank you for your help.

The same for me!

[Kilian]

I have this issue too. I forked the repository here: https://github.com/kilian/react-native-draggable-flatlist and applied the changes from #550 and #551 in the hope that updating support for reanimated 3 fixed the issue but unfortunately it doesn't. It does however fix the enter and exit animations.

This issue is a duplicate from #434 where blame is essentially (and imo incorrectly) placed on performance, but as @fabrizio-bianchi found out, it easily replicates in the example.

Also a duplicate from #561

@computerjazz I know this library is essentially in maintenance mode for you, but you are probably the person to resolve this fastest.

[Kilian]

Applying (the changes made in) this patch fixes this specific glitch: #561 (comment) but now occasionally after drag the cells either animate out of view or jump around in a different manner, so it's not quite a fix either.

[tomwaitforitmy]

@Kilian @Fjort @a33nazarenko @fabrizio-bianchi
Same issues here. Looks like we are all looking for either a fix or an alternative. Maybe we can help each other out. @Fjort already mentioned react-native-reorderable-list as alternative. I tried using it, but so far it makes the glitches even worse or I am not using it correctly. In the issue I opened there, you guys can find my code diff if you are interested. So far I do not know why it is not working. Maybe related to Expo Go.

@Kilian I would like to try your fork. Any news there? Could you publish an npm package?

[Kilian]

My fork doesn't fix this issue but it does fix all the reanimated issues. You can use it from GitHub directly by setting the version to "kilian/react-native-draggable-flatlist", like so:

"react-native-draggable-flatlist": "kilian/react-native-draggable-flatlist",

[tomwaitforitmy]

Thanks, I will give that a try.

[tomwaitforitmy]

@Kilian the author of react-native-reorderable-list fixed my issue. I was inserting an array of strings. Instead an array of objects with an extra id was required which makes sense for sorting things I suppose. Now everything works super smoothly. It did even fix two bugs me (I was not always able to drag the first item and I had to leave a margin at the right to be able to scroll smoothly with this package here). I would recommend switching packages.

[hlus]

Hi @fabrizio-bianchi ! Try this library. Works correctly and is updated regularly.

not works with horizontal lists 😢

[rohit9625]

@Kilian the author of react-native-reorderable-list fixed my issue. I was inserting an array of strings. Instead an array of objects with an extra id was required which makes sense for sorting things I suppose. Now everything works super smoothly. It did even fix two bugs me (I was not always able to drag the first item and I had to leave a margin at the right to be able to scroll smoothly with this package here). I would recommend switching packages.

Hey @tomwaitforitmy, could you please comment the code diff after your issue is fixed?

[callaars]

I've tracked the bug down and I've opened a PR for the fix. This is the patch.

[tomwaitforitmy]

@rohit9625 Not sure what exactly are you asking. I assume you are asking me which part in my code I changed, to fix my issue:
Checkout this change set. Somehow react-native-draggable-flatlist was able to work with the array index as key property while react-native-reorderable-list does not work with that. You need another/better key.

[rohit9625]

@rohit9625 Not sure what exactly are you asking. I assume you are asking me which part in my code I changed, to fix my issue: Checkout this change set. Somehow react-native-draggable-flatlist was able to work with the array index as key property while react-native-reorderable-list does not work with that. You need another/better key.

Oh! my bad. So you were talking about the issue with reorderable-list and I thought you were saying that @Kilian helped you to solve this flicker issue. Sorry to bother you :(