How to get current Y value from PanGestureHandler swipe move while the user is swiping

[leodavinci1]

I am trying to perform a Haptic feedback when the user drags the container with a specific swipe length. So with this following code I am trying to get the value of translateY while the user is dragging the container with the event listener:

constructor(props: TweetsProps) {
  super(props);
  const { tweets } = props;
  this.state = { 
     ...
  };

  ...

  this.onPanGestureEvent = Animated.event(
    [{ nativeEvent: { translationX: this.translationX, translationY: this.translationY } }],
    {
      useNativeDriver: true,
      listener: this.onPan.bind(this),
    },
  );

  this.onGestureEvent = event(
    [
      {
        nativeEvent: {
          translationX: this.translationX,
          translationY: this.translationY,
          velocityX: this.velocityX,
          state: this.gestureState,
        },
      },
    ],
    { useNativeDriver: true },
  );
}

...

onPan({ nativeEvent: { translationY } }) {
   console.log("fired")
   if(translationY > 130 || translationY < -130){
     Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
   }   
}

render() {
  const { onGestureEvent, translateY, onPanGestureEvent } = this;
  ...

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.cards}>
        <PanGestureHandler
          onHandlerStateChange={onGestureEvent}
          onGestureEvent={onPanGestureEvent}
          {...{ onGestureEvent }}

        >
          <Animated.View {...{ style }} >
            <Card tweet={lastTweet} swipeDown={this.state.swipeDown} {...{ likeOpacity, 
     nopeOpacity }} />
          </Animated.View>
        </PanGestureHandler>
      </View>
   ...
  );
}

The onPan function doesn't get triggered when I drag the component up and down, what am I doing wrong here? How can I get this listener value correctly?

[kesha-antonov]

Did you find a solution?