What do look for when fast gestures break animations? Reanimated + Gesture-Handler

How to / Third Party Tooling
1

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 [1]), 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:
FailedAnimation

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:
github: components MovableElementContainer, MovableElementContainerConfig, MovableElementContainerUtil and MovableElement

This is a repost form a github discussion [2] without any answer so far.

[1] : I can’t post the link, because I am a new user. Goto YouTube Channel “Evening Kid” video multiple drag and sort list in reanimated 2
[2]: I can’t post the link, because I am a new user. Goto github either reanimated or gesture-handler repo and then discussion.

2

Still looking for help. Any suggestions are very welcome.

3

Hey @tomwaitforitmy, I’d suggest looking at other or similar libraries/examples to learn how to tweak the configuration you currently have for your component. For example, check out https://github.com/RyanMan56/react-native-drag-to-sort-grid-mono.

1 Like
4

I gave up finding my bug and used this instead: [1]. Works nicely :+1:.

I’m still a bit sad, because it felt that I was really close to implement a nice solution on my own and I want to learn RNGH (react-native-gesture-handler) and Reanimated. Therefore, I am motivated and looking to find my mistake. I made a small snack where logic is about 200-300 lines of code: Movable Element Container - Snack

I have two theories about my issue:

  1. The gesture is “too fast” moving over elements without triggering the reaction of other elements. This theory is supported by the fact, that if I stop the whole thing when velocityX gets high. Also someone on github suggested me that I should cancel with high speed.
    However, I never found other sources suggesting that might is a common issue for gestures. @amanhimself I quickly checked the code base you shared. Lots of similarities to my code. The part where reactions happen [2], looks super easy and straightforward. No hint that this library even considers gestures “too fast”.
  2. I made a fundamental mistake with RNGH or Reanimated that only appears when moving fast.

I feel quite unexperienced with the libraries and underlying basics. Therefore, I am looking for experienced users that might be able to judge if my code is just buggy somewhere or if “too fast gestures” is a thing to consider in RNGH. They don’t have to find my bug in the 200-300 lines Snack, but it would really help if they point me to either 1. or 2.

Cheers,
Tommy

[1] GitHub - computerjazz/react-native-draggable-flatlist: A drag-and-drop-enabled FlatList for React Native
[2] react-native-drag-to-sort-grid-mono/DraggableItem.tsx at 348f0121fa7ae7e8949f8341a2212fd815296575 · RyanMan56/react-native-drag-to-sort-grid-mono · GitHub

5

I’m not an expert myself on gestures but I’d suggest you to chat with other developers in the community about your issue. You can join Expo Discord and talk about it in “#react-native” channel.