[web] handle common props in virtual detector

[akwasniewski]

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

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>
  );
}

[Copilot]

Pull request overview

Fixes propagation of common web-only DOM props (enableContextMenu, touchAction, userSelect) through the v3 “virtual detector” path so they can be applied to virtual children/handlers on web.

Changes:

• Extends virtual detector props/types to carry userSelect, touchAction, and enableContextMenu.
• Passes these props from VirtualDetector → intercepting context → web host detector.
• Updates the web host detector to apply per-virtual-child DOM config to the attached virtual handler tags.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/react-native-gesture-handler/src/v3/types/DetectorTypes.ts	Adds DOM-prop fields to VirtualChild so intercepting/host layers can receive them.
packages/react-native-gesture-handler/src/v3/detectors/common.ts	Makes VirtualDetectorProps include common detector props (web-only DOM props).
packages/react-native-gesture-handler/src/v3/detectors/VirtualDetector/VirtualDetector.tsx	Plumbs DOM props into the registered VirtualChild and updates effect deps.
packages/react-native-gesture-handler/src/v3/detectors/VirtualDetector/InterceptingGestureDetector.tsx	Includes DOM props when mapping virtual children on web before passing to host detector.
packages/react-native-gesture-handler/src/v3/detectors/HostGestureDetector.web.tsx	Applies per-virtual-child DOM config via updateGestureHandlerConfig for virtual handler tags.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.