What to look for when fast gestures break animations?

[tomwaitforitmy]

I have recently tried my first project with react-native-reanimated and react-native-gesture-handler. I wanted to implement a drag and sort (similar to this one shown here), but with elements of different heights.

My code is now at a stage where everything works well when using gestures at moderate speed, however, if I move quickly, things break. It looks like some order steps are skipped:

Since everything runs smoothly when gestures are performed at moderate speed, I have no clue what to check. Any help is highly appreciated. Thanks in advance.

You can find my component here:
Snack: https://snack.expo.dev/@tomwaitforitmy/movable-element-container
(only works on IOS for unknown reasons).
github: components MovableElementContainer, MovableElementContainerConfig, MovableElementContainerUtil and MovableElement

I have doubts if this topic belongs to react-native-gesture-handler or react-native-reanimated and therefore I will post on both projects until told otherwise. Here you find the other topic.

[tomwaitforitmy]

Still looking for help. Any suggestions are very welcome.

[tomwaitforitmy]

Still looking for help. Any suggestions are very welcome.

[JasonCareter]

Consider of including the speed of pan gesture . After speed slow down and item position satisfied “exchanged” , then exchange . If the speed’s fast and order changed, just ignore it. don’t run animation until speed’s slow down

[tomwaitforitmy]

Alright, sounds like an idea, but wouldn't that possibly yield to items that never swap positions? Did you make good experience with this in similar things?

[tomwaitforitmy]

My current assumption is: If the gesture is performed so fast, that the sampling rate skips one or more of the elements, my algorithm messes up the positions. Is there a decent way to completely cancel fast gestures and reset all to start?