How can I smoothly add and/or remove items from a Flex list during a drag?

[h14h]

Is it possible to add/remove a flex item (triggering a layout transition) during an active drag?

Context: I'm working on a pretty niche Flex-based drag and drop feature involving a custom ordering strategy. It involves grouping items into variable-width rows, representing discrete "groups", and allows for dragging items out of and into other groups, re-ordering items within groups, as well as re-ordering groups as a whole.

I've attached an (admittedly janky) screen recording demonstrating what I'm talking about.

At the end of the recording, you can see an example relating to my question, where I drag an item out of a group into a new group, and create a new "handle" as part of that action.

Doing this creates a new "handle" (denoting a row/group), which I presently accomplish via updating the state variable data list that backs the children of the Sortable.Flex wrapper, triggering a re-render which kills the active gesture.

So, to re-state my question, is it possible to accomplish this in a way that doesn't kill the gesture? Or is there a different/better way I can approach building this feature?

ScreenRecording_10-07-2025.10-20-44_1.MP4

[MatiPl01]

Hey @h14h!

Thank you for asking these good questions.

So, to re-state my question, is it possible to accomplish this in a way that doesn't kill the gesture? Or is there a different/better way I can approach building this feature?

I think this is not possible as the gesture detector is attached to the view and, after you remove this view and render it in a different place, the gesture is cancelled because the gesture detector that was responsible for handling this gesture no longer exists.

This is one of the biggest problems I encountered while trying to add a feature requested quite a long time ago in the #297 issue. It turned out that I'd have to somehow keep the view rendered but make it invisible to preserve the gesture as long as the user drags it, even when the parent container of the view changes.

I haven't figured out an easy solution yet and I don't have much time to experiment with this feature now, so I think I won't be able to help you, sorry 😞

[h14h]

No worries! I figured this was probably the case.

I was able to hack together a somewhat viable solution to this issue on my own using Reanimated and RNGH directly. The approach I took was to render what is effectively a clone of the active element at the same level as the flex container upon triggering a drag, and then use that clone for the gesture.

That way I can modify the items inside the flex container with react state without killing the gesture or causing the "active" clone to remount.

This solution is pretty unique to my particular use-case at the moment, so I'm not sure how generalizable it is.

[MatiPl01]

Thanks for letting me know. Maybe I could also move the gesture detector to the component level instead of its children and it could work better but would require many changes to the current logic.