GestureDetector not detecting gestures or not firing any events

Description

I’m having trouble with getting a gesture handler to work. I’m using the new API (2.0) for gestures, so I’m using GestureDetector with a Gesture.Pan(), and I can’t make any events fire for the gesture. I’m using Wix RN Navigation library, so this might be a cause of the issue?

Steps To Reproduce

1. Register the screen component wrapping it with the provided HOC: Navigation.registerComponent(SCREENS.LOGIN.ROOT, () => gestureHandlerRootHOC(LoginScreen));

2. The screen itself includes just one functional component which is present in the examples folder of the library:

`import React from ‘react’; import { Button, StyleSheet, View } from ‘react-native’; import { Gesture, GestureDetector } from ‘react-native-gesture-handler’; import Animated, { useAnimatedStyle, useSharedValue, withSpring } from ‘react-native-reanimated’;

function Ball() { const isPressed = useSharedValue(false); const offset = useSharedValue({ x: 0, y: 0 }); const start = useSharedValue({ x: 0, y: 0 });

const animatedStyles = useAnimatedStyle(() => {
    console.log('ANIMATED STYLES --- ', offset.value.x, offset.value.y, isPressed.value);
    return {
        transform: [
            { translateX: withSpring(offset.value.x) },
            { translateY: withSpring(offset.value.y) },
            { scale: withSpring(isPressed.value ? 1.2 : 1) },
        ],
        backgroundColor: isPressed.value ? 'yellow' : 'blue',
    };
});

const gesture = Gesture.Pan()
    .onBegin(() => {
        'worklet';
        console.log('ONBEGIN');
        isPressed.value = true;
    })
    .onUpdate((e) => {
        'worklet';
        console.log('ONUPDATE');
        offset.value = {
            x: e.translationX + start.value.x,
            y: e.translationY + start.value.y,
        };
    })
    .onEnd(() => {
        'worklet';
        start.value = {
            x: offset.value.x,
            y: offset.value.y,
        };
    })
    .onFinalize(() => {
        isPressed.value = false;
    });

return (
    <>
        <GestureDetector gesture={gesture}>
            <Animated.View style={[styles.ball, animatedStyles]} />
        </GestureDetector>
        <Button
            title="Test"
            onPress={() => {
                isPressed.value = !isPressed.value;
                offset.value = {
                    x: isPressed.value ? Math.random() * 100 : 0,
                    y: isPressed.value ? Math.random() * 100 : 0,
                };
            }}
        />
    </>
);

}

export default function Example() { return ( <View style={styles.container}> <Ball /> </View> ); }

const styles = StyleSheet.create({ container: { flex: 1, }, ball: { width: 100, height: 100, borderRadius: 100, backgroundColor: ‘blue’, alignSelf: ‘center’, }, }); `

I tweaked the code a bit to test if the animated value itself is working, which it is, so I struggle to get the gestures to get detected.

Expected behavior

Gesture events should be firing on the ball View, and the view should be moved to the new x/y coordinates

Actual behavior

No gesture events get fired in any of the worklets

Package versions

• React: 17.0.2
• React Native: 0.66.0
• React Native Gesture Handler: 2.1.0
• React Native Reanimated: 2.3.1
• React Native Navigation: 7.22.3

[ozgurbayram]

Don’t forget to wrap your app inside <GestureHandlerRootView> ... </GestureHandlerRootView>

[j-piasecki]

@ernestasgobionis I checked it and it’s not working for me with debugging as well. Thank you for taking the time to dig into this.