React-native-reanimated: web: useAnimatedGestureHandler not working

[hosseinmd]

Description

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

Screenshots

Steps To Reproduce

1.

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

[terrysahaidak]

Hi! Could you please provide reproducing repository?

[hosseinmd]

In the repo, I added the gesture handler to blue box and logged into the event but nothings logged.
https://github.com/hosseinmd/test-reanimated2

[hosseinmd]

This PRs is related to the web, but not directly to this bug.
https://github.com/software-mansion/react-native-gesture-handler/pull/1220
https://github.com/software-mansion/react-native-reanimated/pull/1378
https://github.com/software-mansion/react-native-reanimated/pull/1402

[karol-bisztyga]

Hey!
Indeed it does not work in your case, I think the problem might be that you haven't enabled reanimated's babel plugin as stated in the docs. The tool you're using apparently hides babel configuration.

So my guess is that you'd probably need to do yarn eject and then add it manually(I got an error doing yarn eject in my local environment but decided to not spend more time on this as it's unrelated - web works fine for other tools designed for creating RN app - check the playground).

[hosseinmd]

I added the babel plugin in config-override.

[hosseinmd]

The playground has packages versions that are not updated.
I update packages in this PR https://github.com/software-mansion-labs/reanimated-2-playground/pull/23
Now useAnimatedGestureHandler not working

[karol-bisztyga]

The playground has packages versions that are not updated.
I update packages in this PR software-mansion-labs/reanimated-2-playground#23
Now useAnimatedGestureHandler not working

There's a known bug in RNGH and as the issue is still open I assume it's not been fixed by now. So for now please just leave react-native-web as it is(as well as react-dom - otherwise you'll end up with errors).

[karol-bisztyga]

After doing the following changes in your repo, it works:

"react-dom": "^16.13.1",
"react-native-web": "^0.12.3",
"react-native-gesture-handler": "1.8.0",

[hosseinmd]

Because of pressable and modal in react-native-web 0.14 we can't downgrade to 0.12. we need another solution.

[karol-bisztyga]

I understand but this is a problem with RNGH, not reanimated.

[ElForastero]

The issue in RNGH was fixed, but handler still doesn't work on web.

[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. 🤔

[karol-bisztyga]

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