[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,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;
 };