[Web] Separate Reanimated from JS (#3683)

## 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
```tsx
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>
  );
}
```

Author: akwasniewski

packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/utils.ts

@@ -175,5 +175,8 @@ export function useWebEventHandlers() {
     onGestureHandlerStateChange: (e: ResultEvent) => {
       onGestureHandlerEvent(e.nativeEvent as GestureHandlerNativeEvent);
     },
+    onGestureHandlerTouchEvent: () => {
+      // no-op
+    },
   });
 }

packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts

@@ -40,7 +40,8 @@ export default abstract class GestureHandler implements IGestureHandler {
   private viewRef: number | null = null;
   private propsRef: React.RefObject<PropsRef> | null = null;
   private actionType: ActionType | null = null;
-  private dispatchesAnimatedEvents: boolean = false;
+  private forAnimated: boolean = false;
+  private forReanimated: boolean = false;
   private _handlerTag!: number;
 
   private hitSlop?: HitSlop = undefined;
@@ -96,7 +97,8 @@ export default abstract class GestureHandler implements IGestureHandler {
     this.viewRef = null;
     this.actionType = null;
     this.state = State.UNDETERMINED;
-    this.dispatchesAnimatedEvents = false;
+    this.forAnimated = false;
+    this.forReanimated = false;
 
     this.delegate.detach();
   }
@@ -380,21 +382,28 @@ export default abstract class GestureHandler implements IGestureHandler {
       return;
     }
     this.ensurePropsRef();
-    const { onGestureHandlerEvent, onGestureHandlerTouchEvent }: PropsRef =
-      this.propsRef!.current;
+    const {
+      onGestureHandlerEvent,
+      onGestureHandlerTouchEvent,
+      onGestureHandlerReanimatedTouchEvent,
+    }: PropsRef = this.propsRef!.current;
 
     const touchEvent: ResultEvent<GestureTouchEvent> | undefined =
       this.transformTouchEvent(event);
 
-    if (touchEvent) {
-      if (
-        onGestureHandlerTouchEvent &&
-        this.actionType === ActionType.NATIVE_DETECTOR
-      ) {
-        invokeNullableMethod(onGestureHandlerTouchEvent, touchEvent);
-      } else {
-        invokeNullableMethod(onGestureHandlerEvent, touchEvent);
-      }
+    if (!touchEvent) {
+      return;
+    }
+
+    if (this.actionType === ActionType.NATIVE_DETECTOR) {
+      invokeNullableMethod(
+        this.forReanimated
+          ? onGestureHandlerReanimatedTouchEvent
+          : onGestureHandlerTouchEvent,
+        touchEvent
+      );
+    } else {
+      invokeNullableMethod(onGestureHandlerEvent, touchEvent);
     }
   }
 
@@ -407,6 +416,8 @@ export default abstract class GestureHandler implements IGestureHandler {
       onGestureHandlerEvent,
       onGestureHandlerStateChange,
       onGestureHandlerAnimatedEvent,
+      onGestureHandlerReanimatedEvent,
+      onGestureHandlerReanimatedStateChange,
     }: PropsRef = this.propsRef!.current;
     const resultEvent: ResultEvent =
       this.actionType !== ActionType.NATIVE_DETECTOR
@@ -422,17 +433,27 @@ export default abstract class GestureHandler implements IGestureHandler {
 
     if (this.lastSentState !== newState) {
       this.lastSentState = newState;
-      invokeNullableMethod(onGestureHandlerStateChange, resultEvent);
+      invokeNullableMethod(
+        this.forReanimated
+          ? onGestureHandlerReanimatedStateChange
+          : onGestureHandlerStateChange,
+        resultEvent
+      );
     }
     if (this.state === State.ACTIVE) {
       if (this.actionType !== ActionType.NATIVE_DETECTOR) {
         (resultEvent.nativeEvent as GestureHandlerNativeEvent).oldState =
           undefined;
       }
-      if (onGestureHandlerAnimatedEvent && this.dispatchesAnimatedEvents) {
-        invokeNullableMethod(onGestureHandlerAnimatedEvent, resultEvent);
-      }
-      invokeNullableMethod(onGestureHandlerEvent, resultEvent);
+
+      invokeNullableMethod(
+        this.forReanimated
+          ? onGestureHandlerReanimatedEvent
+          : this.forAnimated
+            ? onGestureHandlerAnimatedEvent
+            : onGestureHandlerEvent,
+        resultEvent
+      );
     }
   };
 
@@ -637,9 +658,22 @@ export default abstract class GestureHandler implements IGestureHandler {
       timeStamp: Date.now(),
     };
 
-    const { onGestureHandlerEvent }: PropsRef = this.propsRef!.current;
+    const {
+      onGestureHandlerEvent,
+      onGestureHandlerReanimatedTouchEvent,
+      onGestureHandlerTouchEvent,
+    }: PropsRef = this.propsRef!.current;
 
-    invokeNullableMethod(onGestureHandlerEvent, cancelEvent);
+    if (this.actionType === ActionType.NATIVE_DETECTOR) {
+      invokeNullableMethod(
+        this.forReanimated
+          ? onGestureHandlerReanimatedTouchEvent
+          : onGestureHandlerTouchEvent,
+        cancelEvent
+      );
+    } else {
+      invokeNullableMethod(onGestureHandlerEvent, cancelEvent);
+    }
   }
 
   private ensurePropsRef(): void {
@@ -691,7 +725,11 @@ export default abstract class GestureHandler implements IGestureHandler {
     }
 
     if (config.dispatchesAnimatedEvents !== undefined) {
-      this.dispatchesAnimatedEvents = config.dispatchesAnimatedEvents;
+      this.forAnimated = config.dispatchesAnimatedEvents;
+    }
+
+    if (config.shouldUseReanimated !== undefined) {
+      this.forReanimated = config.shouldUseReanimated;
     }
 
     if (config.manualActivation !== undefined) {
@@ -874,7 +912,8 @@ export default abstract class GestureHandler implements IGestureHandler {
     this.mouseButton = undefined;
     this.hitSlop = undefined;
     this.needsPointerData = false;
-    this.dispatchesAnimatedEvents = false;
+    this.forAnimated = false;
+    this.forReanimated = false;
     this.enableContextMenu = false;
     this._activeCursor = undefined;
     this._touchAction = undefined;
@@ -991,7 +1030,9 @@ function invokeNullableMethod(
   method:
     | ((event: ResultEvent) => void)
     | { __getHandler: () => (event: ResultEvent) => void }
-    | { __nodeConfig: { argMapping: unknown[] } },
+    | { __nodeConfig: { argMapping: unknown[] } }
+    | null
+    | undefined,
   event: ResultEvent
 ): void {
   if (!method) {

packages/react-native-gesture-handler/src/web/interfaces.ts

@@ -52,6 +52,7 @@ export interface Config extends Record<string, ConfigArgs> {
   touchAction?: TouchAction;
   manualActivation?: boolean;
   dispatchesAnimatedEvents?: false;
+  shouldUseReanimated?: boolean;
   needsPointerData?: false;
 
   activateAfterLongPress?: number;
@@ -124,9 +125,12 @@ export interface ResultEvent<T extends ResultEventType = ResultEventType>
 
 export interface PropsRef {
   onGestureHandlerEvent: (e: ResultEvent) => void;
-  onGestureHandlerAnimatedEvent?: (e: ResultEvent) => void;
   onGestureHandlerStateChange: (e: ResultEvent) => void;
-  onGestureHandlerTouchEvent?: (e: ResultEvent) => void;
+  onGestureHandlerTouchEvent: (e: ResultEvent) => void;
+  onGestureHandlerReanimatedEvent?: (e: ResultEvent) => void;
+  onGestureHandlerReanimatedStateChange?: (e: ResultEvent) => void;
+  onGestureHandlerReanimatedTouchEvent?: (e: ResultEvent) => void;
+  onGestureHandlerAnimatedEvent?: (e: ResultEvent) => void;
 }
 
 export interface AdaptedEvent {