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, onResponse } = this;
...
return (
<SafeAreaView style={styles.container}>
<View style={styles.cards}>
<PanGestureHandler
onHandlerStateChange={onGestureEvent}
onGestureEvent={onPanGestureEvent}
{...{ onGestureEvent }}
>
<Animated.View {...{ style }} onResponderMove={onResponse}>
<Card tweet={lastTweet} swipeDown={this.state.swipeDown} {...{
likeOpacity,
nopeOpacity
}} />
</Animated.View>
</PanGestureHandler>
</View>
...
);
}
The onPan function doesn't get triggered with my code, what am I doing wrong here? How can I get this listener value correctly?