[web] handle common props in virtual detector

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,13 @@ 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

@@ -43,11 +43,20 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
   );
   const virtualChildrenForNativeComponent: VirtualChildrenForNative[] = 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,
+            viewRef: child.viewRef,
+          })),
     [virtualChildren]
   );
   const [mode, setMode] = useState<InterceptingDetectorMode>(

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

@@ -29,7 +29,8 @@ export interface InterceptingGestureDetectorProps<THandlerData, TConfig>
 }
 
 // TODO: Handle CommonGestureDetectorProps inside VirtualGestureDetector
-export interface VirtualDetectorProps<THandlerData, TConfig> {
+export interface VirtualDetectorProps<THandlerData, TConfig>
+  extends CommonGestureDetectorProps {
   children?: React.ReactNode;
   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;
 };