web: useAnimatedGestureHandler not working

Description

That is working on android, but on the web the gesture event is not called

Screenshots

Steps To Reproduce

const gestureHandler = useAnimatedGestureHandler(
      {
        onStart: (_, ctx: any) => {
          //notCalled
        },
        onActive: (event, ctx) => {
          //notCalled
        },
        onEnd: (_) => {
          //notCalled
        },
      },
      [],
    );

Expected behavior

Actual behavior

Snack or minimal code example

Package versions

• React: 17.0.1
• React Native: 0.63.1
• React Native Reanimated: 2.0.0-alpha.8
• React Native Gesture Handler: 1.8.0
• NodeJS: 12

[karol-bisztyga]

@ElForastero thanks, I will reopen the issue and soon push the fix 🙌

[ElForastero]

@karol-bisztyga

Well, I finally made it working on both iOS and Web by manually defining handlers for PanGestureHandler.

useAnimatedGestureHandler works well in native but seems like does absolutely nothing in web environment. Spend a while trying to understand the source of the problem, but with no success.

  const y = useSharedValue(0);
  const startY = useSharedValue(0);

  const gestureHandler = ({ nativeEvent: e }) => {
    'worklet';
    if (e.state === State.ACTIVE) {
      console.log('active');
      y.value = startY.value + e.translationY;
    }
  };

  const gestureStateHandler = ({ nativeEvent: e }) => {
    'worklet';
    if (e.state === State.BEGAN) {
      console.log('began');
      startY.value = y.value;
    }

    if (e.state === State.END) {
      console.log('end');
      y.value = withSpring(0);
    }
  };

return (
<PanGestureHandler onHandlerStateChange={gestureStateHandler} onGestureEvent={gestureHandler}>
        <Animated.View style={[animatedStyle]} />
</PanGestureHandler>
)

“react”: “16.13.1”, “react-native”: “0.63.3”, “react-native-web”: “^0.14.7” “react-native-gesture-handler”: “^1.9.0”, “react-native-reanimated”: “^2.0.0-rc.0”,

UPD:

It looks like the issue is because of this. WorkletEventHandler is being passed into RNGH instead of regular listener. 🤔