[Web] Native detector component (#3637)

## Description

This PR adds a web version of `NativeDetector` component following its
IOS/android implementations.

## Test plan
* copy all react source files from basic-example to expo-example
* add a console log, in the `NativeDetector` pan Gesture
* check whether the gesture is properly recognised

Author: akwasniewski

packages/react-native-gesture-handler/src/ActionType.ts

@@ -3,6 +3,7 @@ export const ActionType = {
   NATIVE_ANIMATED_EVENT: 2,
   JS_FUNCTION_OLD_API: 3,
   JS_FUNCTION_NEW_API: 4,
+  NATIVE_DETECTOR: 5,
 } as const;
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; it can be used as a type and as a value

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { ActionType } from './ActionType';
 import { Gestures } from './web/Gestures';
-import type { Config } from './web/interfaces';
+import type { Config, PropsRef } from './web/interfaces';
 import InteractionManager from './web/tools/InteractionManager';
 import NodeManager from './web/tools/NodeManager';
 import { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';
@@ -47,8 +47,8 @@ export default {
     handlerTag: number,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     newView: any,
-    _actionType: ActionType,
-    propsRef: React.RefObject<unknown>
+    actionType: ActionType,
+    propsRef: React.RefObject<PropsRef>
   ) {
     if (!(newView instanceof Element || newView instanceof React.Component)) {
       shouldPreventDrop = true;
@@ -63,7 +63,15 @@ export default {
     }
 
     // @ts-ignore Types should be HTMLElement or React.Component
-    NodeManager.getHandler(handlerTag).init(newView, propsRef);
+    NodeManager.getHandler(handlerTag).init(newView, propsRef, actionType);
+  },
+  detachGestureHandler(handlerTag: number) {
+    if (shouldPreventDrop) {
+      shouldPreventDrop = false;
+      return;
+    }
+
+    NodeManager.detachGestureHandler(handlerTag);
   },
   updateGestureHandler(handlerTag: number, newConfig: Config) {
     NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
@@ -78,6 +86,7 @@ export default {
   },
   dropGestureHandler(handlerTag: number) {
     if (shouldPreventDrop) {
+      shouldPreventDrop = false;
       return;
     }
 

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

@@ -8,20 +8,21 @@ import { ActionType } from '../../../ActionType';
 import { Platform } from 'react-native';
 import type RNGestureHandlerModuleWeb from '../../../RNGestureHandlerModule.web';
 import { ghQueueMicrotask } from '../../../ghQueueMicrotask';
-import { AttachedGestureState, WebEventHandler } from './types';
+import { AttachedGestureState } from './types';
 import {
   extractGestureRelations,
   checkGestureCallbacksForWorklets,
   ALLOWED_PROPS,
 } from './utils';
 import { MountRegistry } from '../../../mountRegistry';
+import { PropsRef } from '../../../web/interfaces';
 
 interface AttachHandlersConfig {
   preparedGesture: AttachedGestureState;
   gestureConfig: ComposedGesture | GestureType;
   gesturesToAttach: GestureType[];
   viewTag: number;
-  webEventHandlersRef: React.RefObject<WebEventHandler>;
+  webEventHandlersRef: React.RefObject<PropsRef>;
 }
 
 export function attachHandlers({

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

@@ -1,6 +1,5 @@
 import { GestureType, HandlerCallbacks } from '../gesture';
 import { SharedValue } from '../reanimatedWrapper';
-import { HandlerStateChangeEvent } from '../../gestureHandlerCommon';
 
 export interface AttachedGestureState {
   // Array of gestures that should be attached to the view under that gesture detector
@@ -23,10 +22,3 @@ export interface GestureDetectorState {
   previousViewTag: number;
   forceRebuildReanimatedEvent: boolean;
 }
-
-export interface WebEventHandler {
-  onGestureHandlerEvent: (event: HandlerStateChangeEvent<unknown>) => void;
-  onGestureHandlerStateChange?: (
-    event: HandlerStateChangeEvent<unknown>
-  ) => void;
-}

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

@@ -2,17 +2,14 @@ import React, { useCallback } from 'react';
 import { GestureType } from '../gesture';
 import { ComposedGesture } from '../gestureComposition';
 
-import {
-  AttachedGestureState,
-  GestureDetectorState,
-  WebEventHandler,
-} from './types';
+import { AttachedGestureState, GestureDetectorState } from './types';
 import { attachHandlers } from './attachHandlers';
 import { updateHandlers } from './updateHandlers';
 import { needsToReattach } from './needsToReattach';
 import { dropHandlers } from './dropHandlers';
 import { useForceRender, validateDetectorChildren } from './utils';
 import findNodeHandle from '../../../findNodeHandle';
+import { PropsRef } from '../../../web/interfaces';
 
 // Returns a function that's responsible for updating the attached gestures
 // If the view has changed, it will reattach the handlers to the new view
@@ -22,7 +19,7 @@ export function useDetectorUpdater(
   preparedGesture: AttachedGestureState,
   gesturesToAttach: GestureType[],
   gestureConfig: ComposedGesture | GestureType,
-  webEventHandlersRef: React.RefObject<WebEventHandler>
+  webEventHandlersRef: React.RefObject<PropsRef>
 ) {
   const forceRender = useForceRender();
   const updateAttachedGestures = useCallback(

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

@@ -21,7 +21,7 @@ import { RNRenderer } from '../../../RNRenderer';
 import { useCallback, useRef, useState } from 'react';
 import { Reanimated } from '../reanimatedWrapper';
 import { onGestureHandlerEvent } from '../eventReceiver';
-import { WebEventHandler } from './types';
+import { PropsRef } from '../../../web/interfaces';
 
 export const ALLOWED_PROPS = [
   ...baseGestureHandlerWithDetectorProps,
@@ -167,7 +167,7 @@ export function useForceRender() {
 }
 
 export function useWebEventHandlers() {
-  return useRef<WebEventHandler>({
+  return useRef<PropsRef>({
     onGestureHandlerEvent: (e: HandlerStateChangeEvent<unknown>) => {
       onGestureHandlerEvent(e.nativeEvent);
     },

packages/react-native-gesture-handler/src/v3/HostGestureDetector.tsx

@@ -0,0 +1,3 @@
+import RNGestureHandlerDetectorNativeComponent from '../specs/RNGestureHandlerDetectorNativeComponent';
+const HostGestureDetector = RNGestureHandlerDetectorNativeComponent;
+export default HostGestureDetector;

packages/react-native-gesture-handler/src/v3/HostGestureDetector.web.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useRef } from 'react';
+import { View } from 'react-native';
+import RNGestureHandlerModule from '../RNGestureHandlerModule.web';
+import { ActionType } from '../ActionType';
+import { PropsRef } from '../web/interfaces';
+
+export interface GestureHandlerDetectorProps extends PropsRef {
+  handlerTags: number[];
+  moduleId: number;
+  children?: React.ReactNode;
+}
+
+const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
+  const { handlerTags, children } = props;
+
+  const viewRef = useRef(null);
+  const propsRef = useRef<PropsRef>(props);
+  const attachedHandlerTags = useRef<Set<number>>(new Set<number>());
+
+  const detachHandlers = (oldHandlerTags: Set<number>) => {
+    oldHandlerTags.forEach((tag) => {
+      RNGestureHandlerModule.detachGestureHandler(tag);
+    });
+  };
+
+  const attachHandlers = (currentHandlerTags: Set<number>) => {
+    const oldHandlerTags =
+      attachedHandlerTags.current.difference(currentHandlerTags);
+    const newHandlerTags = currentHandlerTags.difference(
+      attachedHandlerTags.current
+    );
+
+    detachHandlers(oldHandlerTags);
+
+    newHandlerTags.forEach((tag) => {
+      RNGestureHandlerModule.attachGestureHandler(
+        tag,
+        viewRef.current,
+        ActionType.NATIVE_DETECTOR,
+        propsRef
+      );
+    });
+    attachedHandlerTags.current = currentHandlerTags;
+  };
+
+  useEffect(() => {
+    attachHandlers(new Set(handlerTags));
+  }, [handlerTags]);
+
+  useEffect(() => {
+    return () => {
+      detachHandlers(attachedHandlerTags.current);
+    };
+  }, []);
+
+  return (
+    <View style={{ display: 'contents' }} ref={viewRef}>
+      {children}
+    </View>
+  );
+};
+
+export default HostGestureDetector;

packages/react-native-gesture-handler/src/v3/NativeDetector.tsx

@@ -3,29 +3,27 @@ import { NativeGesture } from './hooks/useGesture';
 import { Reanimated } from '../handlers/gestures/reanimatedWrapper';
 
 import { Animated, StyleSheet } from 'react-native';
-import RNGestureHandlerDetectorNativeComponent from '../specs/RNGestureHandlerDetectorNativeComponent';
+import HostGestureDetector from './HostGestureDetector';
 import { tagMessage } from '../utils';
 
 export interface NativeDetectorProps {
   children?: React.ReactNode;
   gesture: NativeGesture;
 }
 
-const AnimatedNativeDetector = Animated.createAnimatedComponent(
-  RNGestureHandlerDetectorNativeComponent
-);
+const AnimatedNativeDetector =
+  Animated.createAnimatedComponent(HostGestureDetector);
 
-const ReanimatedNativeDetector = Reanimated?.default.createAnimatedComponent(
-  RNGestureHandlerDetectorNativeComponent
-);
+const ReanimatedNativeDetector =
+  Reanimated?.default.createAnimatedComponent(HostGestureDetector);
 
 export function NativeDetector({ gesture, children }: NativeDetectorProps) {
   const NativeDetectorComponent = gesture.config.dispatchesAnimatedEvents
     ? AnimatedNativeDetector
     : // TODO: Remove this cast when we properly type config
       (gesture.config.shouldUseReanimated as boolean)
       ? ReanimatedNativeDetector
-      : RNGestureHandlerDetectorNativeComponent;
+      : HostGestureDetector;
 
   // It might happen only with ReanimatedNativeDetector
   if (!NativeDetectorComponent) {