1

I am using react-native-gesture-handler with react-native-reanimated. When movement is finished, I am trying to update some values which is not working. Here is the code:

            <PanGestureHandler onGestureEvent={Animated.event([{
                nativeEvent: ({ translationX: x, translationY: y, state }) =>
                    block([
                        set(this.touchY, y),
                        cond(eq(state, State.END), [
                            set(this.height, add(this.height, y)),
                            set(this.translateY, add(this.translateY, y)),
                            set(this.touchY, new Value(0))
                          ]
                        )
                    ])
                }])}
             >
Umid Boltabaev
  • 442
  • 2
  • 6
  • 17

1 Answers1

1

This is because onGestureEvent doesn't fire when the state ends. What you're looking for is onHandlerStateChange. This is copy-pasted from a component I written a while ago.

<PanGestureHandler onGestureEvent={gestureHandler} onHandlerStateChange={gestureHandler}>

If you need to handle that event only when the state ends I would suggest simply using onHandlerStateChange. Otherwise, would be a good idea to extract that Animated.event(...) to a separate constant and pass it to both onGestureEvent and onHandlerStateChange.

Japjappedulap
  • 66
  • 2
  • 5
  • Is it possible to add some sort of checks in the onGestureFunciton? Or can we only use the event directly? See this please https://stackoverflow.com/questions/64330969/stop-dragging-after-a-limit-has-reached –  Oct 13 '20 at 08:54