react-native-gesture-handler is not updating value after movement finish

Question

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))
                          ]
                        )
                    ])
                }])}
             >

Answer 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.