All drag and drop libraries using Reanimated seems to be broken

[Daavidaviid]

Hello,
I noticed recently after migrating to new arch, that all drag and drop libraries allowing to change order in a list for instance are "broken", they all have a flickering issue after dropping the item.

I tried to recreate a drag and drop system from scratch and it works fine on the web (since there is no UI thread, everything happens sequently), but I too encountered the flickering issue.

See for yourself:

iOS

Screen.Recording.2025-09-01.at.09.25.26.mov

Android

Screen.Recording.2025-09-01.at.09.26.55.mov

Here is the associated gist:
https://gist.github.com/Daavidaviid/32a06e47cde1eae50bad5b5677e9dbc8

It's a basic example as it handles only list with same size items, but I think it's a good starting point, since there is less than 170 lines of code, to find a solution to this flickering.

From what I understand, basically it's kind of a race condition between JS and UI thread. When we drop the dragged item, we want to update the state to reflect the new order, except we also need to reset the shared value for the dragged item, but it kind of happens at almost the same time, causing a flickering issue.

Any idea how to solve this?

[MatiPl01]

Hey @Daavidaviid!

This is a design difference behind the New Architecture implementation of Reanimated. The problem is that you cannot synchronize SharedValue's update with the React's render because Reanimated's updates from the JS side are batched and pushed as a larger batch of updates instead of being pushed immediately to the native side (which is different from the Old Architecture behavior where all changes were implemented directly on the view without any batching mechanism and waiting for the batched commit of changes).

There is no way to solve this with an ease without using any hacks like applying some "correctness" offset that will move the view to the current position doing render or positioning all items absolutely and updating their positions only via Reanimated, not via React's renders. Both are quite tricky and hard to implement on your own.

I am using the second approach in my library that I wrote some time ago. If you are interested, you may want to check it out: https://github.com/MatiPl01/react-native-sortables

It doesn't support virtualized lists yet, but for simpler sortables, where you don't use hundreds of elements, it should be sufficient and work as expected.

[Daavidaviid]

Thanks for the super clear explanation! I thought about using reanimated for everything but I was hoping for an easier solution.

Your library handles having an header? Does it support item deletion too?

[MatiPl01]

Your library handles having an header?

Since my library is not implemented on top of the FlatList or other list, you can have anything, like header, footer, etc. You can just render all the stuff inside a single ScrollView like this:

<ScrollView>
  <HeaderComponent />
  <Sortable.Grid ... />
</ScrollView>

Does it support item deletion too?

Yes, it supports any kind of content change, addition, removal, order change.

---

But keep in mind, that it renders all items at once without any batching (which is normally performed while using virtualized lists like a FlatList), so this library might not be a good solution if you want to render a lot of items for reordering.

Here are some examples that might be useful:

• https://react-native-sortables-docs.vercel.app/grid/examples/auto-scroll <- shows how to combine with the ScrollView component and use the auto scroll feature
• https://react-native-sortables-docs.vercel.app/grid/examples/touchable <- shows how to remove items when the touchable is pressed

[Daavidaviid]

Sorry, I wasn't able to find (maybe I didn't search enough) how to trigger a callback on drop (to update order information in the api side)

EDIT: https://react-native-sortables-docs.vercel.app/grid/props#ondragend

[MatiPl01]

Yup, there are 2 callbacks:

• onDragEnd - called immediately when you release the item
• onActiveItemDropped - called after the item's drop animation finishes and the item reaches its target position

Both can be used to update state, etc.

[Daavidaviid]

Perfect, now your library works great in our case, except on the web I'm having an issue with the dragged shadow :

Screen.Recording.2025-09-02.at.11.16.12.mov

[Daavidaviid]

For the moment, I'll keep my solution on the web. But your library is the most relevant for this specific use case right now 👏

[MatiPl01]

Could you share the code snippet so that I can test it out on the web? I will have some time later on today so I can check it out. I am seeing this issue for the first time and I wonder if this is related to the web browser that you use. Can you tell me on which browser do you test it?

If this is an issue, then you can set the activeItemShadowOpacity to 0 to disable the shadow or experiment with the custom box-shadow implementation as described here: https://react-native-sortables-docs.vercel.app/grid/examples/custom-shadow

It might be the issue with the filter: drop-shadow prop that I use instead of the box-shadow prop (but box-shadow doesn't work well when I apply it on my internal view in the library as it draws a rectangular shadow without respecting rounded corners of the inner view - as far as I know, the box-shadow property works only when applied directly on the view with rounded corners, so you may try to take a look at the example I linked above and see if it works).