android - GestureDetector not triggering when double clicking component in react native - Stack Overflow

admin2025-05-01  1

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>
转载请注明原文地址:http://www.anycun.com/QandA/1746100733a91676.html