[Web] Adapt NativeViewGestureHandler to NativeDetector (#3653)

## Description

Following #3638 this PR brings support for `NativeViewGestureHandler`
into `NativeDetector` for web. It does so, by attaching handler into
child instead of detector.

## Test plan

Tested on the following code 
```ts
import * as React from 'react';
import { StyleSheet, Text, View, ScrollView, Button } from 'react-native';
import {
  GestureHandlerRootView,
  NativeDetector,
  useGesture,
} from 'react-native-gesture-handler';

export default function App() {
  const items = Array.from({ length: 5 }, (_, index) => `Item ${index + 1}`);
  const [enabled, setEnabled] = React.useState(true);
  const gesture = useGesture('NativeViewGestureHandler', {
    onBegin: (e) => {
      console.log('onBegin', e);
    },
    onStart: (e) => {
      console.log('onStart', e);
    }
  });

  const SV1 = () => (
    <ScrollView style={styles.scrollView1}>
      {items.map((item, index) => (
        <View key={index} style={styles.item}>
          <Text style={styles.text}>{item}</Text>
        </View>
      ))}
    </ScrollView>
  );

  const SV2 = () => (
    <ScrollView style={styles.scrollView2}>
      {items.map((item, index) => (
        <View key={index} style={styles.item}>
          <Text style={styles.text}>{item}</Text>
        </View>
      ))}
    </ScrollView>
  );

  return (
    <GestureHandlerRootView
      style={{ flex: 1, backgroundColor: 'white', paddingTop: 8 }}>
      <Button
        title="Swap the child"
        onPress={() => {
          setEnabled(!enabled);
        }}
      />
      <NativeDetector gesture={gesture}>
        {enabled ? <SV1 /> : <SV2 />}
      </NativeDetector >
    </GestureHandlerRootView >
  );
}

const styles = StyleSheet.create({
  scrollView1: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
  },
  scrollView2: {
    backgroundColor: 'lightblue',
    marginHorizontal: 20,
  },

  item: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    margin: 2,
    backgroundColor: 'white',
    borderRadius: 10,
  },
  text: {
    fontSize: 20,
    color: 'black',
  },
});
```

Author: akwasniewski

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

@@ -1,8 +1,9 @@
-import { useEffect, useRef } from 'react';
-import { View } from 'react-native';
+import { Ref, useEffect, useRef } from 'react';
 import RNGestureHandlerModule from '../RNGestureHandlerModule.web';
 import { ActionType } from '../ActionType';
 import { PropsRef } from '../web/interfaces';
+import { View } from 'react-native';
+import { tagMessage } from '../utils';
 
 export interface GestureHandlerDetectorProps extends PropsRef {
   handlerTags: number[];
@@ -13,13 +14,16 @@ export interface GestureHandlerDetectorProps extends PropsRef {
 const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
   const { handlerTags, children } = props;
 
-  const viewRef = useRef(null);
+  const viewRef = useRef<Element>(null);
   const propsRef = useRef<PropsRef>(props);
   const attachedHandlerTags = useRef<Set<number>>(new Set<number>());
+  const attachedNativeHandlerTags = useRef<Set<number>>(new Set<number>());
 
   const detachHandlers = (oldHandlerTags: Set<number>) => {
     oldHandlerTags.forEach((tag) => {
       RNGestureHandlerModule.detachGestureHandler(tag);
+      attachedNativeHandlerTags.current.delete(tag);
+      attachedHandlerTags.current.delete(tag);
     });
   };
 
@@ -33,19 +37,42 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
     detachHandlers(oldHandlerTags);
 
     newHandlerTags.forEach((tag) => {
-      RNGestureHandlerModule.attachGestureHandler(
-        tag,
-        viewRef.current,
-        ActionType.NATIVE_DETECTOR,
-        propsRef
-      );
+      if (
+        RNGestureHandlerModule.getGestureHandlerNode(
+          tag
+        ).shouldAttachGestureToChildView()
+      ) {
+        if (!viewRef.current?.firstChild) {
+          throw new Error(
+            tagMessage('Detector expected to have a child element')
+          );
+        }
+        RNGestureHandlerModule.attachGestureHandler(
+          tag,
+          viewRef.current.firstChild,
+          ActionType.NATIVE_DETECTOR,
+          propsRef
+        );
+        attachedNativeHandlerTags.current.add(tag);
+      } else {
+        RNGestureHandlerModule.attachGestureHandler(
+          tag,
+          viewRef.current,
+          ActionType.NATIVE_DETECTOR,
+          propsRef
+        );
+      }
     });
     attachedHandlerTags.current = currentHandlerTags;
   };
 
+  useEffect(() => {
+    detachHandlers(attachedNativeHandlerTags.current);
+  }, [children]);
+
   useEffect(() => {
     attachHandlers(new Set(handlerTags));
-  }, [handlerTags]);
+  }, [handlerTags, children]);
 
   useEffect(() => {
     return () => {
@@ -54,7 +81,7 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
   }, []);
 
   return (
-    <View style={{ display: 'contents' }} ref={viewRef}>
+    <View style={{ display: 'contents' }} ref={viewRef as Ref<View>}>
       {children}
     </View>
   );

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

@@ -275,6 +275,10 @@ export default abstract class GestureHandler implements IGestureHandler {
     );
   }
 
+  public shouldAttachGestureToChildView(): boolean {
+    return false;
+  }
+
   //
   // Event actions
   //

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

@@ -41,6 +41,7 @@ export default interface IGestureHandler {
   shouldRequireToWaitForFailure: (handler: IGestureHandler) => boolean;
   shouldRecognizeSimultaneously: (handler: IGestureHandler) => boolean;
   shouldBeCancelledByOther: (handler: IGestureHandler) => boolean;
+  shouldAttachGestureToChildView: () => boolean;
 
   sendEvent: (newState: State, oldState: State) => void;
 

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

@@ -170,6 +170,10 @@ export default class NativeViewGestureHandler extends GestureHandler {
     return !this.disallowInterruption;
   }
 
+  public override shouldAttachGestureToChildView(): boolean {
+    return true;
+  }
+
   public disallowsInterruption(): boolean {
     return this.disallowInterruption;
   }