[web] handle common props in virtual detector (#3982)

## Description

Common web-only props `enableContextMenu`, `touchAction`, `userSelect`
were not properly handled inside virtual detector. This PR fixes it.

## Test plan

Tested on the following example

<details>

```tsx

import { COLORS, commonStyles, Feedback } from '../common-app/src/common';
import React, { useRef } from 'react';
import { View } from 'react-native';
import {
  InterceptingGestureDetector,
  useTapGesture,
  VirtualGestureDetector,
} from 'react-native-gesture-handler';
import Svg, { Circle, Rect } from 'react-native-svg';

export default function LogicDetectorExample() {
  const feedbackRef = useRef<{ showMessage: (msg: string) => void }>(null);

  const circleElementTap = useTapGesture({
    onActivate: () => {
      feedbackRef.current?.showMessage('Tapped circle!');
    },
    disableReanimated: true,
  });

  const rectElementTap = useTapGesture({
    onActivate: () => {
      feedbackRef.current?.showMessage('Tapped parallelogram!');
    },
    disableReanimated: true,
  });

  const containerTap = useTapGesture({
    onActivate: () => {
      feedbackRef.current?.showMessage('Tapped container!');
    },
    disableReanimated: true,
  });

  // onPress must be set to enable gesture recognition on svg
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  const noop = () => { };

  return (
    <View style={commonStyles.centerView}>
      <InterceptingGestureDetector gesture={containerTap}>
        <Svg
          height="250"
          width="250"
          style={{ backgroundColor: COLORS.PURPLE }}>
          <VirtualGestureDetector gesture={circleElementTap}>
            <Circle
              cx="125"
              cy="125"
              r="125"
              fill={COLORS.NAVY}
              onPress={noop}
            />
          </VirtualGestureDetector>
          <VirtualGestureDetector enableContextMenu={true} gesture={rectElementTap}>
            <Rect
              skewX="45"
              width="125"
              height="250"
              fill={COLORS.KINDA_BLUE}
              onPress={noop}
            />
          </VirtualGestureDetector>
        </Svg>
      </InterceptingGestureDetector>
      <Feedback ref={feedbackRef} />
    </View>
  );
}

```

</details>

---------

Co-authored-by: Michał Bert <63123542+m-bert@users.noreply.github.com>

Author: akwasniewski

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

@@ -20,6 +20,9 @@ export interface VirtualChildrenWeb {
   viewTag: number;
   handlerTags: number[];
   viewRef: RefObject<Element | null>;
+  userSelect?: UserSelect;
+  touchAction?: TouchAction;
+  enableContextMenu?: boolean;
 }
 
 const EMPTY_HANDLERS = new Set<number>();
@@ -174,6 +177,14 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
         attachedVirtualHandlers.current.get(child.viewTag)!,
         ActionType.VIRTUAL_DETECTOR
       );
+
+      currentHandlerTags.forEach((tag) => {
+        RNGestureHandlerModule.updateGestureHandlerConfig(tag, {
+          userSelect: child.userSelect,
+          touchAction: child.touchAction,
+          enableContextMenu: child.enableContextMenu,
+        });
+      });
     });
   }, [props.virtualChildren]);
 

packages/react-native-gesture-handler/src/v3/detectors/VirtualDetector/InterceptingGestureDetector.tsx

@@ -22,11 +22,18 @@ import { tagMessage } from '../../../utils';
 import { useEnsureGestureHandlerRootView } from '../useEnsureGestureHandlerRootView';
 import { ReanimatedNativeDetector } from '../ReanimatedNativeDetector';
 import { Platform } from 'react-native';
+import {
+  TouchAction,
+  UserSelect,
+} from '../../../handlers/gestureHandlerCommon';
 
-interface VirtualChildrenForNative {
+interface StrippedVirtualChildren {
   viewTag: number;
   handlerTags: number[];
-  viewRef: unknown;
+  viewRef?: unknown;
+  userSelect?: UserSelect;
+  touchAction?: TouchAction;
+  enableContextMenu?: boolean;
 }
 
 export function InterceptingGestureDetector<THandlerData, TConfig>({
@@ -41,13 +48,21 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
   const [virtualChildren, setVirtualChildren] = useState<Set<VirtualChild>>(
     () => new Set()
   );
-  const virtualChildrenForNativeComponent: VirtualChildrenForNative[] = useMemo(
+  const strippedVirtualChildren: StrippedVirtualChildren[] = useMemo(
     () =>
-      Array.from(virtualChildren).map((child) => ({
-        viewTag: child.viewTag,
-        handlerTags: child.handlerTags,
-        viewRef: child.viewRef,
-      })),
+      Platform.OS === 'web'
+        ? Array.from(virtualChildren).map((child) => ({
+            viewTag: child.viewTag,
+            handlerTags: child.handlerTags,
+            viewRef: child.viewRef,
+            userSelect: child.userSelect,
+            touchAction: child.touchAction,
+            enableContextMenu: child.enableContextMenu,
+          }))
+        : Array.from(virtualChildren).map((child) => ({
+            viewTag: child.viewTag,
+            handlerTags: child.handlerTags,
+          })),
     [virtualChildren]
   );
   const [mode, setMode] = useState<InterceptingDetectorMode>(
@@ -261,7 +276,7 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
         }
         handlerTags={handlerTags}
         style={nativeDetectorStyles.detector}
-        virtualChildren={virtualChildrenForNativeComponent}
+        virtualChildren={strippedVirtualChildren}
         moduleId={globalThis._RNGH_MODULE_ID}>
         {children}
       </NativeDetectorComponent>

packages/react-native-gesture-handler/src/v3/detectors/VirtualDetector/VirtualDetector.tsx

@@ -76,14 +76,24 @@ export function VirtualDetector<THandlerData, TConfig>(
       methods: props.gesture.detectorCallbacks as DetectorCallbacks<unknown>,
       // used by HostGestureDetector on web
       viewRef: Platform.OS === 'web' ? viewRef : undefined,
+      userSelect: props.userSelect,
+      touchAction: props.touchAction,
+      enableContextMenu: props.enableContextMenu,
     };
-
     register(virtualChild);
-
     return () => {
       unregister(virtualChild);
     };
-  }, [viewTag, props.gesture, register, unregister, setMode]);
+  }, [
+    viewTag,
+    props.gesture,
+    props.userSelect,
+    props.touchAction,
+    props.enableContextMenu,
+    register,
+    unregister,
+    setMode,
+  ]);
 
   configureRelations(props.gesture);
 

packages/react-native-gesture-handler/src/v3/detectors/common.ts

@@ -28,9 +28,8 @@ export interface InterceptingGestureDetectorProps<THandlerData, TConfig>
   gesture?: Gesture<THandlerData, TConfig>;
 }
 
-// TODO: Handle CommonGestureDetectorProps inside VirtualGestureDetector
-export interface VirtualDetectorProps<THandlerData, TConfig> {
-  children?: React.ReactNode;
+export interface VirtualDetectorProps<THandlerData, TConfig>
+  extends CommonGestureDetectorProps {
   gesture: Gesture<THandlerData, TConfig>;
 }
 

packages/react-native-gesture-handler/src/v3/types/DetectorTypes.ts

@@ -3,6 +3,7 @@ import {
   GestureUpdateEventWithHandlerData,
   GestureHandlerEventWithHandlerData,
 } from './EventTypes';
+import { TouchAction, UserSelect } from '../../handlers/gestureHandlerCommon';
 
 export type DetectorCallbacks<THandlerData> = {
   jsEventHandler:
@@ -24,4 +25,7 @@ export type VirtualChild = {
 
   // only set on web
   viewRef: unknown;
+  userSelect?: UserSelect;
+  touchAction?: TouchAction;
+  enableContextMenu?: boolean;
 };