diff --git a/packages/react-native-gesture-handler/src/v3/detectors/HostGestureDetector.web.tsx b/packages/react-native-gesture-handler/src/v3/detectors/HostGestureDetector.web.tsx index f822fee97a..22c52ded2c 100644 --- a/packages/react-native-gesture-handler/src/v3/detectors/HostGestureDetector.web.tsx +++ b/packages/react-native-gesture-handler/src/v3/detectors/HostGestureDetector.web.tsx @@ -20,6 +20,9 @@ export interface VirtualChildrenWeb { viewTag: number; handlerTags: number[]; viewRef: RefObject; + userSelect?: UserSelect; + touchAction?: TouchAction; + enableContextMenu?: boolean; } const EMPTY_HANDLERS = new Set(); @@ -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]); diff --git a/packages/react-native-gesture-handler/src/v3/detectors/VirtualDetector/InterceptingGestureDetector.tsx b/packages/react-native-gesture-handler/src/v3/detectors/VirtualDetector/InterceptingGestureDetector.tsx index 2e77501c02..54de97d439 100644 --- a/packages/react-native-gesture-handler/src/v3/detectors/VirtualDetector/InterceptingGestureDetector.tsx +++ b/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({ @@ -41,13 +48,21 @@ export function InterceptingGestureDetector({ const [virtualChildren, setVirtualChildren] = useState>( () => 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( @@ -261,7 +276,7 @@ export function InterceptingGestureDetector({ } handlerTags={handlerTags} style={nativeDetectorStyles.detector} - virtualChildren={virtualChildrenForNativeComponent} + virtualChildren={strippedVirtualChildren} moduleId={globalThis._RNGH_MODULE_ID}> {children} diff --git a/packages/react-native-gesture-handler/src/v3/detectors/VirtualDetector/VirtualDetector.tsx b/packages/react-native-gesture-handler/src/v3/detectors/VirtualDetector/VirtualDetector.tsx index 3840ad9db0..42379a6e9d 100644 --- a/packages/react-native-gesture-handler/src/v3/detectors/VirtualDetector/VirtualDetector.tsx +++ b/packages/react-native-gesture-handler/src/v3/detectors/VirtualDetector/VirtualDetector.tsx @@ -76,14 +76,24 @@ export function VirtualDetector( methods: props.gesture.detectorCallbacks as DetectorCallbacks, // 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); diff --git a/packages/react-native-gesture-handler/src/v3/detectors/common.ts b/packages/react-native-gesture-handler/src/v3/detectors/common.ts index 1315fe0fbc..cf2c6ccf7d 100644 --- a/packages/react-native-gesture-handler/src/v3/detectors/common.ts +++ b/packages/react-native-gesture-handler/src/v3/detectors/common.ts @@ -28,9 +28,8 @@ export interface InterceptingGestureDetectorProps gesture?: Gesture; } -// TODO: Handle CommonGestureDetectorProps inside VirtualGestureDetector -export interface VirtualDetectorProps { - children?: React.ReactNode; +export interface VirtualDetectorProps + extends CommonGestureDetectorProps { gesture: Gesture; } diff --git a/packages/react-native-gesture-handler/src/v3/types/DetectorTypes.ts b/packages/react-native-gesture-handler/src/v3/types/DetectorTypes.ts index dca181be8d..e0b59b62ae 100644 --- a/packages/react-native-gesture-handler/src/v3/types/DetectorTypes.ts +++ b/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 = { jsEventHandler: @@ -24,4 +25,7 @@ export type VirtualChild = { // only set on web viewRef: unknown; + userSelect?: UserSelect; + touchAction?: TouchAction; + enableContextMenu?: boolean; };