I am not able to get GestureDetector to work in my expo react native app. I want to create a draggable component using GestureDetector, but I can't even get it to trigger with OnTap.
If you look at onDoubleTap, the "double tap" won't even log to the console when I double tap the component. I am not sure what I'm doing wrong as the docs for onTap look exactly like what I'm doing
const MovablePost = ({
id,
journeyPost,
positions,
scrollY,
songsCount,
}) => {
const dimensions = useWindowDimensions();
const insets = useSafeAreaInsets();
const [moving, setMoving] = useState(false);
const top = useSharedValue(positions.value[id] * postListTileHeight);
useAnimatedReaction(
() => positions.value[id],
(currentPosition, previousPosition) => {
if (currentPosition !== previousPosition) {
if (!moving) {
top.value = withSpring(currentPosition * postListTileHeight);
}
}
},
[moving]
);
const gestureHandler = Gesture.Pan()
.onBegin(() => {
runOnJS(setMoving)(true);
if (Platform.OS === 'ios') {
runOnJS(Haptics.impactAsync)(
Haptics.ImpactFeedbackStyle.Medium
);
}
})
.onChange((event) => {
...
})
const onDoubleTap = Gesture.Tap().numberOfTaps(2)
.runOnJS(true)
.onStart(() => {
console.log("double tap")
})
const animatedStyle = useAnimatedStyle(() => {
return {
position: 'absolute',
left: 0,
right: 0,
top: top.value || 0,
zIndex: moving ? 1 : 0,
shadowColor: 'black',
shadowOpacity: withSpring(moving ? 0.2 : 0),
shadowRadius: 15,
};
}, [moving]);
return (
<GestureDetector gesture={gestureHandler}>
<Animated.View style={animatedStyle}>
<GestureDetector gesture={onDoubleTap}>
<Animated.View>
<PostListTile journeyPost={journeyPost}/>
</Animated.View>
</GestureDetector>
</Animated.View>
</GestureDetector>
);
}
And I have MovablePost wrapped in <GestureHandlerRootView style={{flex: 1}}>
<GestureHandlerRootView style={{flex: 1}}>
<SafeAreaProvider>
<SafeAreaView style={{flex: 1}}>
<Animated.View
ref={scrollViewRef}
onScroll={handleScroll}
scrollEventThrottle={16}
>
<View>
{journey.postDocs.map((journeyPost, index) => {
return (
<MovablePost
key={journeyPost.postId}
id={journeyPost.postId}
journeyPost={journeyPost}
positions={positions}
scrollY={scrollY}
songsCount={postIdsOrder.length}
/>
)
})}
</View>
</Animated.View>
</SafeAreaView>
</SafeAreaProvider>
</GestureHandlerRootView>