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.

https://github.com/user-attachments/assets/2e77d8ab-c3c6-40e2-a7ae-9a20443e4de8

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 https://github.com/computerjazz/react-native-draggable-flatlist/pull/550 and https://github.com/computerjazz/react-native-draggable-flatlist/pull/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 https://github.com/computerjazz/react-native-draggable-flatlist/issues/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 https://github.com/computerjazz/react-native-draggable-flatlist/issues/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: https://github.com/computerjazz/react-native-draggable-flatlist/issues/561#issuecomment-2511831441 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 :(

[tomwaitforitmy]

Ah, nope sorry. I just wanted to notify others here, that I was able to exchange the package.

[shuvitRan]

I ran into the same issue. I originally tested it with image boxes, but even after debugging and gradually simplifying it down to the example code, the issue still remains. Iphone 16 pro ios: 18.3.1 expo: "^52.0.0", react-native-draggable-flatlist : 4.0.2 react-native-reanimated: 3.16.7

https://github.com/user-attachments/assets/f808048a-977e-4eb7-93f4-1e877021bf42

[rohit9625]

Would you mind retesting from the main branch? A PR solving this issue just got merged.

[shuvitRan]

I ran into the same issue. I originally tested it with image boxes, but even after debugging and gradually simplifying it down to the example code, the issue still remains. Iphone 16 pro ios: 18.3.1 expo: "^52.0.0", react-native-draggable-flatlist : 4.0.2 react-native-reanimated: 3.16.7

Screen.Recording.2025-05-05.at.11.40.38.PM.mov

Updated： the 4.0.3 solved my issue

[rohit9625]

But that version isn't released yet. Where did you find it?

[shuvitRan]

it is released

[rohit9625]

Oh, okay. Got it. The screenshot is from the npm website. I was looking at the GitHub release page. Thanks BTW @shuvitRan

[huynhhq]

I still meet this issue. I use ver 4.0.3 - the last version

[callaars]

Could you show me a little screen recording, I'll have a look!

[Brma1048]

still got the issue with 4.0.3

[outaTiME]

I tested with v4.0.3 and I’m still experiencing some glitches when the drag ends.

A while ago I opened a PR to improve the component’s reliability — it’s still up to date as of today, except I rolled back commit b780c49 because it reintroduced some unwanted glitches:

https://github.com/computerjazz/react-native-draggable-flatlist/pull/469

I’m using that version in an Expo 52 project (old architecture) and it works without issues.

Leaving it here in case it helps anyone — along with a real-world usage example:

https://github.com/outaTiME/ambito-dolar/blob/master/packages/client/screens/CustomizeRatesScreen.js#L94

[Sydney-o9]

Same issue in 4.0.3

[krishnan-456]

same issue in 4.0.3

[krishnan-456]

can we fix this next version ?