react-native-gesture-handler 3.0.0-beta.3 → 3.0.0-beta.4

package/src/handlers/gestures/gestureComposition.ts

@@ -12,6 +12,9 @@ function extendRelation(
   }
 }
 
+/**
+ * @deprecated `ComposedGesture` is deprecated and will be removed in the future. Please use `useCompetingGestures` instead.
+ */
 export class ComposedGesture extends Gesture {
   protected gestures: Gesture[] = [];
   protected simultaneousGestures: GestureType[] = [];
@@ -70,6 +73,9 @@ export class ComposedGesture extends Gesture {
   }
 }
 
+/**
+ * @deprecated `SimultaneousGesture` is deprecated and will be removed in the future. Please use `useSimultaneousGestures` instead.
+ */
 export class SimultaneousGesture extends ComposedGesture {
   override prepare() {
     // This piece of magic works something like this:
@@ -96,6 +102,9 @@ export class SimultaneousGesture extends ComposedGesture {
   }
 }
 
+/**
+ * @deprecated `ExclusiveGesture` is deprecated and will be removed in the future. Please use `useExclusiveGestures` instead.
+ */
 export class ExclusiveGesture extends ComposedGesture {
   override prepare() {
     // Transforms the array of gestures into array of grouped raw (not composed) gestures
@@ -119,7 +128,19 @@ export class ExclusiveGesture extends ComposedGesture {
   }
 }
 
+/**
+ * @deprecated `ComposedGestureType` is deprecated and will be removed in the future. Please use `ComposedGesture` instead.
+ */
 export type ComposedGestureType = InstanceType<typeof ComposedGesture>;
+/**
+ * @deprecated `RaceGestureType` is deprecated and will be removed in the future. Please use `ComposedGesture` instead.
+ */
 export type RaceGestureType = ComposedGestureType;
+/**
+ * @deprecated `SimultaneousGestureType` is deprecated and will be removed in the future. Please use `ComposedGesture` instead.
+ */
 export type SimultaneousGestureType = InstanceType<typeof SimultaneousGesture>;
+/**
+ * @deprecated `ExclusiveGestureType` is deprecated and will be removed in the future. Please use `ComposedGesture` instead.
+ */
 export type ExclusiveGestureType = InstanceType<typeof ExclusiveGesture>;

package/src/handlers/gestures/gestureObjects.ts

@@ -16,6 +16,8 @@ import { RotationGesture } from './rotationGesture';
 import { TapGesture } from './tapGesture';
 
 /**
+ * @deprecated `Gesture` builder API is deprecated and will be removed in a future version of Gesture Handler. Please migrate to the new, hook-based API.
+ *
  * `Gesture` is the object that allows you to create and compose gestures.
  *
  * ### Remarks
@@ -25,6 +27,8 @@ import { TapGesture } from './tapGesture';
  */
 export const GestureObjects = {
   /**
+   * @deprecated `Gesture.Tap()` is deprecated and will be removed in the future. Please use `useTapGesture` instead.
+   *
    * A discrete gesture that recognizes one or many taps.
    * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture
    */
@@ -33,6 +37,8 @@ export const GestureObjects = {
   },
 
   /**
+   * @deprecated `Gesture.Pan()` is deprecated and will be removed in the future. Please use `usePanGesture` instead.
+   *
    * A continuous gesture that can recognize a panning (dragging) gesture and track its movement.
    * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture
    */
@@ -41,6 +47,8 @@ export const GestureObjects = {
   },
 
   /**
+   * @deprecated `Gesture.Pinch()` is deprecated and will be removed in the future. Please use `usePinchGesture` instead.
+   *
    * A continuous gesture that recognizes pinch gesture. It allows for tracking the distance between two fingers and use that information to scale or zoom your content.
    * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pinch-gesture
    */
@@ -49,6 +57,8 @@ export const GestureObjects = {
   },
 
   /**
+   * @deprecated `Gesture.Rotation()` is deprecated and will be removed in the future. Please use `useRotationGesture` instead.
+   *
    * A continuous gesture that can recognize rotation and track its movement.
    * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/rotation-gesture
    */
@@ -57,6 +67,8 @@ export const GestureObjects = {
   },
 
   /**
+   * @deprecated `Gesture.Fling()` is deprecated and will be removed in the future. Please use `useFlingGesture` instead.
+   *
    * A discrete gesture that activates when the movement is sufficiently fast.
    * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/fling-gesture
    */
@@ -65,6 +77,8 @@ export const GestureObjects = {
   },
 
   /**
+   * @deprecated `Gesture.LongPress()` is deprecated and will be removed in the future. Please use `useLongPressGesture` instead.
+   *
    * A discrete gesture that activates when the corresponding view is pressed for a sufficiently long time.
    * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/long-press-gesture
    */
@@ -73,7 +87,7 @@ export const GestureObjects = {
   },
 
   /**
-   * @deprecated ForceTouch gesture is deprecated and will be removed in the future.
+   * @deprecated `Gesture.ForceTouch()` is deprecated and will be removed in the future.
    *
    *  #### iOS only
    * A continuous gesture that recognizes force of a touch. It allows for tracking pressure of touch on some iOS devices.
@@ -84,6 +98,8 @@ export const GestureObjects = {
   },
 
   /**
+   * @deprecated `Gesture.Native()` is deprecated and will be removed in the future. Please use `useNativeGesture` instead.
+   *
    * A gesture that allows other touch handling components to participate in RNGH's gesture system.
    * When used, the other component should be the direct child of a `GestureDetector`.
    * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/native-gesture
@@ -93,6 +109,8 @@ export const GestureObjects = {
   },
 
   /**
+   * @deprecated `Gesture.Manual()` is deprecated and will be removed in the future. Please use `useManualGesture` instead.
+   *
    * A plain gesture that has no specific activation criteria nor event data set.
    * Its state has to be controlled manually using a state manager.
    * It will not fail when all the pointers are lifted from the screen.
@@ -103,6 +121,8 @@ export const GestureObjects = {
   },
 
   /**
+   * @deprecated `Gesture.Hover()` is deprecated and will be removed in the future. Please use `useHoverGesture` instead.
+   *
    * A continuous gesture that can recognize hovering above the view it's attached to.
    * The hover effect may be activated by moving a mouse or a stylus over the view.
    *
@@ -113,6 +133,8 @@ export const GestureObjects = {
   },
 
   /**
+   * @deprecated `Gesture.Race()` is deprecated and will be removed in the future. Please use `useCompetingGestures` instead.
+   *
    * Builds a composed gesture consisting of gestures provided as parameters.
    * The first one that becomes active cancels the rest of gestures.
    * @see https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#race
@@ -122,6 +144,8 @@ export const GestureObjects = {
   },
 
   /**
+   * @deprecated `Gesture.Simultaneous()` is deprecated and will be removed in the future. Please use `useSimultaneousGestures` instead.
+   *
    * Builds a composed gesture that allows all base gestures to run simultaneously.
    * @see https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#simultaneous
    */
@@ -130,6 +154,8 @@ export const GestureObjects = {
   },
 
   /**
+   * @deprecated `Gesture.Exclusive()` is deprecated and will be removed in the future. Please use `useExclusiveGestures` instead.
+   *
    * Builds a composed gesture where only one of the provided gestures can become active.
    * Priority is decided through the order of gestures: the first one has higher priority
    * than the second one, second one has higher priority than the third one, and so on.

package/src/handlers/gestures/gestureStateManager.ts

@@ -1,6 +1,9 @@
 import { State } from '../../State';
 import { tagMessage } from '../../utils';
 
+/**
+ * @deprecated `LegacyGestureStateManagerType` is deprecated and will be removed in the future. Please use the new, hook-based API instead.
+ */
 export interface GestureStateManagerType {
   begin: () => void;
   activate: () => void;
@@ -49,6 +52,9 @@ function create(handlerTag: number): GestureStateManagerType {
   };
 }
 
+/**
+ * @deprecated `LegacyGestureStateManager` is deprecated and will be removed in the future. Please use the new, hook-based API instead.
+ */
 export const GestureStateManager = {
   create,
 };

package/src/handlers/gestures/hoverGesture.ts

@@ -41,6 +41,9 @@ function changeEventCalculator(
   return { ...current, ...changePayload };
 }
 
+/**
+ * @deprecated `HoverGesture` is deprecated and will be removed in the future. Please use `useHoverGesture` instead.
+ */
 export class HoverGesture extends ContinousBaseGesture<
   HoverGestureHandlerEventPayload,
   HoverGestureChangeEventPayload
@@ -75,4 +78,7 @@ export class HoverGesture extends ContinousBaseGesture<
   }
 }
 
+/**
+ * @deprecated `HoverGestureType` is deprecated and will be removed in the future. Please use `HoverGesture` instead.
+ */
 export type HoverGestureType = InstanceType<typeof HoverGesture>;

package/src/handlers/gestures/longPressGesture.ts

@@ -3,6 +3,9 @@ import type { LongPressGestureConfig } from '../LongPressGestureHandler';
 import type { BaseGestureConfig } from './gesture';
 import { BaseGesture } from './gesture';
 
+/**
+ * @deprecated `LongPressGesture` is deprecated and will be removed in the future. Please use `useLongPressGesture` instead.
+ */
 export class LongPressGesture extends BaseGesture<LongPressGestureHandlerEventPayload> {
   public override config: BaseGestureConfig & LongPressGestureConfig = {};
 
@@ -43,4 +46,7 @@ export class LongPressGesture extends BaseGesture<LongPressGestureHandlerEventPa
   }
 }
 
+/**
+ * @deprecated `LongPressGestureType` is deprecated and will be removed in the future. Please use `LongPressGesture` instead.
+ */
 export type LongPressGestureType = InstanceType<typeof LongPressGesture>;

package/src/handlers/gestures/manualGesture.ts

@@ -9,6 +9,9 @@ function changeEventCalculator(
   return current;
 }
 
+/**
+ * @deprecated `ManualGesture` is deprecated and will be removed in the future. Please use `useManualGesture` instead.
+ */
 export class ManualGesture extends ContinousBaseGesture<
   Record<string, never>,
   Record<string, never>
@@ -28,4 +31,7 @@ export class ManualGesture extends ContinousBaseGesture<
   }
 }
 
+/**
+ * @deprecated `ManualGestureType` is deprecated and will be removed in the future. Please use `ManualGesture` instead.
+ */
 export type ManualGestureType = InstanceType<typeof ManualGesture>;

package/src/handlers/gestures/nativeGesture.ts

@@ -3,6 +3,9 @@ import type { NativeViewGestureConfig } from '../NativeViewGestureHandler';
 import type { BaseGestureConfig } from './gesture';
 import { BaseGesture } from './gesture';
 
+/**
+ * @deprecated `NativeGesture` is deprecated and will be removed in the future. Please use `useNativeGesture` instead.
+ */
 export class NativeGesture extends BaseGesture<NativeViewGestureHandlerPayload> {
   public override config: BaseGestureConfig & NativeViewGestureConfig = {};
 
@@ -31,4 +34,7 @@ export class NativeGesture extends BaseGesture<NativeViewGestureHandlerPayload>
   }
 }
 
+/**
+ * @deprecated `NativeGestureType` is deprecated and will be removed in the future. Please use `NativeGesture` instead.
+ */
 export type NativeGestureType = InstanceType<typeof NativeGesture>;

package/src/handlers/gestures/panGesture.ts

@@ -4,6 +4,9 @@ import type { PanGestureConfig } from '../PanGestureHandler';
 import type { BaseGestureConfig } from './gesture';
 import { ContinousBaseGesture } from './gesture';
 
+/**
+ * @deprecated `PanGestureChangeEventPayload` is deprecated and will be removed in the future. Please use `PanGestureActiveEvent` instead.
+ */
 export type PanGestureChangeEventPayload = {
   changeX: number;
   changeY: number;
@@ -30,6 +33,9 @@ function changeEventCalculator(
   return { ...current, ...changePayload };
 }
 
+/**
+ * @deprecated `PanGesture` is deprecated and will be removed in the future. Please use `usePanGesture` instead.
+ */
 export class PanGesture extends ContinousBaseGesture<
   PanGestureHandlerEventPayload,
   PanGestureChangeEventPayload
@@ -219,4 +225,7 @@ export class PanGesture extends ContinousBaseGesture<
   }
 }
 
+/**
+ * @deprecated `PanGestureType` is deprecated and will be removed in the future. Please use `PanGesture` instead.
+ */
 export type PanGestureType = InstanceType<typeof PanGesture>;

package/src/handlers/gestures/pinchGesture.ts

@@ -2,6 +2,9 @@ import type { GestureUpdateEvent } from '../gestureHandlerCommon';
 import type { PinchGestureHandlerEventPayload } from '../GestureHandlerEventPayload';
 import { ContinousBaseGesture } from './gesture';
 
+/**
+ * @deprecated `PinchGestureChangeEventPayload` is deprecated and will be removed in the future. Please use `PinchGestureActiveEvent` instead.
+ */
 export type PinchGestureChangeEventPayload = {
   scaleChange: number;
 };
@@ -25,6 +28,9 @@ function changeEventCalculator(
   return { ...current, ...changePayload };
 }
 
+/**
+ * @deprecated `PinchGesture` is deprecated and will be removed in the future. Please use `usePinchGesture` instead.
+ */
 export class PinchGesture extends ContinousBaseGesture<
   PinchGestureHandlerEventPayload,
   PinchGestureChangeEventPayload
@@ -48,4 +54,7 @@ export class PinchGesture extends ContinousBaseGesture<
   }
 }
 
+/**
+ * @deprecated `PinchGestureType` is deprecated and will be removed in the future. Please use `PinchGesture` instead.
+ */
 export type PinchGestureType = InstanceType<typeof PinchGesture>;

package/src/handlers/gestures/rotationGesture.ts

@@ -25,6 +25,9 @@ function changeEventCalculator(
   return { ...current, ...changePayload };
 }
 
+/**
+ * @deprecated `RotationGesture` is deprecated and will be removed in the future. Please use `useRotationGesture` instead.
+ */
 export class RotationGesture extends ContinousBaseGesture<
   RotationGestureHandlerEventPayload,
   RotationGestureChangeEventPayload
@@ -48,4 +51,7 @@ export class RotationGesture extends ContinousBaseGesture<
   }
 }
 
+/**
+ * @deprecated `RotationGestureType` is deprecated and will be removed in the future. Please use `RotationGesture` instead.
+ */
 export type RotationGestureType = InstanceType<typeof RotationGesture>;

package/src/handlers/gestures/tapGesture.ts

@@ -3,6 +3,9 @@ import type { TapGestureConfig } from '../TapGestureHandler';
 import type { BaseGestureConfig } from './gesture';
 import { BaseGesture } from './gesture';
 
+/**
+ * @deprecated `TapGesture` is deprecated and will be removed in the future. Please use `useTapGesture` instead.
+ */
 export class TapGesture extends BaseGesture<TapGestureHandlerEventPayload> {
   public override config: BaseGestureConfig & TapGestureConfig = {};
 
@@ -84,4 +87,7 @@ export class TapGesture extends BaseGesture<TapGestureHandlerEventPayload> {
   }
 }
 
+/**
+ * @deprecated `TapGestureType` is deprecated and will be removed in the future. Please use `TapGesture` instead.
+ */
 export type TapGestureType = InstanceType<typeof TapGesture>;

package/src/v3/components/GestureButtons.tsx

@@ -23,7 +23,7 @@ export const RawButton = createNativeWrapper<
   RawButtonProps
 >(GestureHandlerButton, {
   shouldCancelWhenOutside: false,
-  shouldActivateOnStart: true,
+  shouldActivateOnStart: false,
 });
 
 /**
@@ -69,16 +69,16 @@ export const BaseButton = (props: BaseButtonProps) => {
   };
 
   const onDeactivate = (e: EndCallbackEventType) => {
+    props.onDeactivate?.(e);
+  };
+
+  const onFinalize = (e: EndCallbackEventType) => {
     onActiveStateChange?.(false);
 
     if (!e.canceled && !longPressDetected.current) {
       onPress?.(e.pointerInside);
     }
 
-    props.onDeactivate?.(e);
-  };
-
-  const onFinalize = (e: EndCallbackEventType) => {
     if (longPressTimeout.current !== undefined) {
       clearTimeout(longPressTimeout.current);
       longPressTimeout.current = undefined;

package/src/v3/components/Pressable.tsx

@@ -308,7 +308,7 @@ const Pressable = (props: PressableProps) => {
       stateMachine.handleEvent(StateMachineEvent.NATIVE_BEGIN);
     },
     onActivate: () => {
-      if (Platform.OS !== 'android' && Platform.OS !== 'ios') {
+      if (Platform.OS !== 'android') {
         // Native.onActivate is broken with Android + hitSlop
         stateMachine.handleEvent(StateMachineEvent.NATIVE_START);
       }
@@ -331,6 +331,7 @@ const Pressable = (props: PressableProps) => {
     block,
     requireToFail,
     hitSlop: appliedHitSlop,
+    shouldActivateOnStart: Platform.OS === 'web',
   });
 
   const gesture = useSimultaneousGestures(

package/src/v3/components/Touchable/Touchable.tsx

@@ -1,26 +1,24 @@
 import React, { useCallback, useRef } from 'react';
 import { Platform } from 'react-native';
 
-import type { ButtonProps } from '../../../components/GestureHandlerButton';
 import GestureHandlerButton from '../../../components/GestureHandlerButton';
-import createNativeWrapper from '../../createNativeWrapper';
+import { NativeDetector } from '../../detectors/NativeDetector';
+import { useNativeGesture } from '../../hooks';
 import type {
   CallbackEventType,
   EndCallbackEventType,
   TouchableProps,
 } from './TouchableProps';
 
-const TouchableButton = createNativeWrapper<
-  React.ComponentRef<typeof GestureHandlerButton>,
-  ButtonProps
->(GestureHandlerButton, {
-  shouldCancelWhenOutside: true,
-  shouldActivateOnStart: false,
-});
-
 const isAndroid = Platform.OS === 'android';
 const TRANSPARENT_RIPPLE = { rippleColor: 'transparent' as const };
 
+enum PointerState {
+  UNKNOWN,
+  INSIDE,
+  OUTSIDE,
+}
+
 export const Touchable = (props: TouchableProps) => {
   const {
     underlayColor = 'black',
@@ -32,15 +30,16 @@ export const Touchable = (props: TouchableProps) => {
     onPress,
     onPressIn,
     onPressOut,
-    onActiveStateChange,
     children,
     disabled = false,
+    cancelOnLeave = true,
     ref,
     ...rest
   } = props;
 
   const shouldUseNativeRipple = isAndroid && androidRipple !== undefined;
 
+  const pointerState = useRef<PointerState>(PointerState.UNKNOWN);
   const longPressDetected = useRef(false);
   const longPressTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(
     undefined
@@ -62,50 +61,86 @@ export const Touchable = (props: TouchableProps) => {
   const onBegin = useCallback(
     (e: CallbackEventType) => {
       if (!e.pointerInside) {
+        pointerState.current = PointerState.OUTSIDE;
         return;
       }
 
       onPressIn?.(e);
       startLongPressTimer();
+
+      pointerState.current = PointerState.INSIDE;
     },
     [startLongPressTimer, onPressIn]
   );
 
-  const onActivate = useCallback(
-    (e: CallbackEventType) => {
-      onActiveStateChange?.(true);
-
-      if (!e.pointerInside && longPressTimeout.current !== undefined) {
-        clearTimeout(longPressTimeout.current);
-        longPressTimeout.current = undefined;
-      }
-    },
-    [onActiveStateChange]
-  );
+  const onActivate = useCallback((e: CallbackEventType) => {
+    if (!e.pointerInside && longPressTimeout.current !== undefined) {
+      clearTimeout(longPressTimeout.current);
+      longPressTimeout.current = undefined;
+    }
+  }, []);
 
-  const onDeactivate = useCallback(
+  const onFinalize = useCallback(
     (e: EndCallbackEventType) => {
-      onActiveStateChange?.(false);
+      if (pointerState.current === PointerState.INSIDE) {
+        onPressOut?.(e);
+      }
 
-      if (!e.canceled && !longPressDetected.current) {
-        onPress?.(e.pointerInside);
+      if (!e.canceled && !longPressDetected.current && e.pointerInside) {
+        onPress?.(e);
       }
-    },
-    [onActiveStateChange, onPress]
-  );
 
-  const onFinalize = useCallback(
-    (e: EndCallbackEventType) => {
-      onPressOut?.(e);
+      pointerState.current = PointerState.UNKNOWN;
 
       if (longPressTimeout.current !== undefined) {
         clearTimeout(longPressTimeout.current);
         longPressTimeout.current = undefined;
       }
     },
-    [onPressOut]
+    [onPressOut, onPress]
   );
 
+  const onUpdate = useCallback(
+    (e: CallbackEventType) => {
+      if (pointerState.current === PointerState.UNKNOWN) {
+        return;
+      }
+
+      if (e.pointerInside) {
+        if (pointerState.current === PointerState.OUTSIDE) {
+          onPressIn?.(e);
+        }
+        pointerState.current = PointerState.INSIDE;
+      } else {
+        if (pointerState.current === PointerState.INSIDE) {
+          onPressOut?.(e);
+
+          if (longPressTimeout.current !== undefined) {
+            clearTimeout(longPressTimeout.current);
+            longPressTimeout.current = undefined;
+          }
+        }
+        pointerState.current = PointerState.OUTSIDE;
+      }
+    },
+    [onPressIn, onPressOut]
+  );
+
+  const nativeGesture = useNativeGesture({
+    onBegin,
+    onActivate,
+    onFinalize,
+    onUpdate,
+    hitSlop: props.hitSlop,
+    testID: props.testID,
+    enabled: !disabled,
+    shouldCancelWhenOutside: cancelOnLeave,
+    disableReanimated: true,
+    shouldActivateOnStart: false,
+    disallowInterruption: true,
+    yieldsToContinuousGestures: true,
+  });
+
   const rippleProps = shouldUseNativeRipple
     ? {
         rippleColor: androidRipple?.color,
@@ -116,19 +151,17 @@ export const Touchable = (props: TouchableProps) => {
     : TRANSPARENT_RIPPLE;
 
   return (
-    <TouchableButton
-      {...rest}
-      {...rippleProps}
-      ref={ref ?? null}
-      enabled={!disabled}
-      onBegin={onBegin}
-      onActivate={onActivate}
-      onDeactivate={onDeactivate}
-      onFinalize={onFinalize}
-      defaultOpacity={defaultOpacity}
-      defaultUnderlayOpacity={defaultUnderlayOpacity}
-      underlayColor={underlayColor}>
-      {children}
-    </TouchableButton>
+    <NativeDetector gesture={nativeGesture}>
+      <GestureHandlerButton
+        {...rest}
+        {...rippleProps}
+        ref={ref ?? null}
+        enabled={!disabled}
+        defaultOpacity={defaultOpacity}
+        defaultUnderlayOpacity={defaultUnderlayOpacity}
+        underlayColor={underlayColor}>
+        {children}
+      </GestureHandlerButton>
+    </NativeDetector>
   );
 };

package/src/v3/components/Touchable/TouchableProps.ts

@@ -18,12 +18,20 @@ type PressableAndroidRippleConfig = {
 type RippleProps = 'rippleColor' | 'rippleRadius' | 'borderless' | 'foreground';
 
 export type TouchableProps = Omit<ButtonProps, RippleProps | 'enabled'> &
-  Omit<BaseButtonProps, keyof RawButtonProps> & {
+  Omit<
+    BaseButtonProps,
+    keyof RawButtonProps | 'onActiveStateChange' | 'onPress'
+  > & {
     /**
      * Configuration for the ripple effect on Android.
      */
     androidRipple?: PressableAndroidRippleConfig | undefined;
 
+    /**
+     * Called when the component gets pressed.
+     */
+    onPress?: ((event: CallbackEventType) => void) | undefined;
+
     /**
      * Called when pointer touches the component.
      */
@@ -38,4 +46,10 @@ export type TouchableProps = Omit<ButtonProps, RippleProps | 'enabled'> &
      * Whether the component should ignore touches. By default set to false.
      */
     disabled?: boolean | undefined;
+
+    /**
+     * Whether the touch should be canceled when pointer leaves the component. By default set to true.
+     * On web this prop doesn't have any effect and behaves as if `true` was set.
+     */
+    cancelOnLeave?: boolean | undefined;
   };

package/src/v3/detectors/HostGestureDetector.web.tsx

@@ -9,7 +9,8 @@ import type {
 } from '../../handlers/gestureHandlerCommon';
 import RNGestureHandlerModule from '../../RNGestureHandlerModule.web';
 import { tagMessage } from '../../utils';
-import type { PropsRef } from '../../web/interfaces';
+import { type PropsRef } from '../../web/interfaces';
+import { useNativeGestureRole } from './useNativeGestureRole';
 
 export interface GestureHandlerDetectorProps extends PropsRef {
   handlerTags: number[];
@@ -103,6 +104,8 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
     });
   };
 
+  useNativeGestureRole(viewRef, children);
+
   useEffect(() => {
     const shouldUpdateDOMProps =
       propsRef.current.userSelect !== props.userSelect ||

package/src/v3/detectors/VirtualDetector/VirtualDetector.tsx

@@ -6,6 +6,7 @@ import { tagMessage } from '../../../utils';
 import { isComposedGesture } from '../../hooks/utils/relationUtils';
 import type { DetectorCallbacks, VirtualChild } from '../../types';
 import type { VirtualDetectorProps } from '../common';
+import { useNativeGestureRole } from '../useNativeGestureRole';
 import { configureRelations } from '../utils';
 import {
   InterceptingDetectorMode,
@@ -54,6 +55,8 @@ export function VirtualDetector<
     [props.children]
   );
 
+  useNativeGestureRole(viewRef, props.children);
+
   useEffect(() => {
     if (viewTag === -1) {
       return;

package/src/v3/detectors/useNativeGestureRole.ts

@@ -0,0 +1,8 @@
+import type { ReactNode, RefObject } from 'react';
+
+export function useNativeGestureRole(
+  _viewRef: RefObject<unknown>,
+  _children: ReactNode
+): void {
+  // No-op on native; the web implementation lives in `useNativeGestureRole.web.ts`.
+}