[Web] Separate Reanimated from JS

[akwasniewski]

Description

Web portion of functionality from PR #3682

Currently we have 2 ways of handling events - Animated and JS/Reanimated. Handling both JS and Reanimated in the same places results in more complex codebase. It also introduces problems with composing gestures. We decided to spit those implementations.

Test plan

import * as React from 'react';
import { Animated, Button } from 'react-native';
import {
  GestureHandlerRootView,
  NativeDetector,
  useGesture,
} from 'react-native-gesture-handler';

export default function App() {
  const [visible, setVisible] = React.useState(true);

  const av = React.useRef(new Animated.Value(0)).current

  const event = Animated.event(
    [{ handlerData: { translationX: av } }],
    {
      useNativeDriver: false,
    }
  );

  const gesture = useGesture('PanGestureHandler', {
    onBegin: (e: unknown) => {
      'worklet';
      console.log('onBegin', e);
    },
    onStart: (e: unknown) => {
      'worklet';
      console.log('onStart', e);
    },
    // onUpdate: event,
    onUpdate: (e: unknown) => {
      'worklet';
      console.log('onUpdate', e);
    },
    onEnd: (e: unknown) => {
      'worklet';
      console.log('onEnd', e);
    },
    onFinalize: (e: unknown) => {
      'worklet';
      console.log('onFinalize', e);
    },
    onTouchesDown: (e: unknown) => {
      'worklet';
      console.log('onTouchesDown', e);
    },
    onTouchesMove: (e: unknown) => {
      'worklet';
      console.log('onTouchesMoved', e);
    },
    onTouchesUp: (e: unknown) => {
      'worklet';
      console.log('onTouchesUp', e);
    },
    onTouchesCancelled: (e: unknown) => {
      'worklet';
      console.log('onTouchesCancelled', e);
    },
  });

  return (
    <GestureHandlerRootView
      style={{ flex: 1, backgroundColor: 'white', paddingTop: 8 }}>
      <Button
        title="Toggle visibility"
        onPress={() => {
          setVisible(!visible);
        }}
      />

      {visible && (
        <NativeDetector gesture={gesture}>
          <Animated.View
            style={[
              {
                width: 150,
                height: 150,
                backgroundColor: 'blue',
                opacity: 0.5,
                borderWidth: 10,
                borderColor: 'green',
                marginTop: 20,
                marginLeft: 40,
              },
              { transform: [{ translateX: av }] },
            ]}
          />
        </NativeDetector>
      )}
    </GestureHandlerRootView>
  );
}

[m-bert]

I can see that in your example, if you use both Animated.Event as onUpdate and touch events, you get the following error:

Uncaught Invariant Violation: Bad event of type undefined for key handlerData

Followed by:

Uncaught TypeError: Cannot read properties of undefined (reading 'translationX')

Could you investigate that?

Edit: This seems to be the culprit 😅

[akwasniewski]

I can see that in your example, if you use both Animated.Event as onUpdate and touch events, you get the following error:

Uncaught Invariant Violation: Bad event of type undefined for key handlerData

Thank you! Great catch, It took me a while as I couldn't replicate the error -> it only occurs on chrome. I did not notice that I needed to have attached a condition on where to send the cancel event. I think the error might have been there ever since this PR. It is fixed as of c9c856f.

[j-piasecki]

LGTM (after you include @m-bert's suggestions)

[m-bert]

Looks good!