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

package/src/v3/detectors/useNativeGestureRole.web.ts

@@ -0,0 +1,42 @@
+import type { ReactNode, RefObject } from 'react';
+import { useEffect } from 'react';
+
+import { NATIVE_GESTURE_ROLE_ATTRIBUTE } from '../../web/constants';
+import { NativeGestureRole } from '../../web/interfaces';
+
+export function useNativeGestureRole(
+  viewRef: RefObject<Element | null>,
+  children: ReactNode
+): void {
+  useEffect(() => {
+    const child = viewRef.current?.firstChild;
+
+    if (!(child instanceof HTMLElement)) {
+      return;
+    }
+
+    // @ts-ignore This exists on React.ReactNode
+    const displayName = children?.type?.displayName as string;
+
+    if (displayName === NativeGestureRole.ScrollView) {
+      child.setAttribute(
+        NATIVE_GESTURE_ROLE_ATTRIBUTE,
+        NativeGestureRole.ScrollView
+      );
+    } else if (displayName === NativeGestureRole.Switch) {
+      child.setAttribute(
+        NATIVE_GESTURE_ROLE_ATTRIBUTE,
+        NativeGestureRole.Switch
+      );
+    } else if (displayName === NativeGestureRole.Button) {
+      child.setAttribute(
+        NATIVE_GESTURE_ROLE_ATTRIBUTE,
+        NativeGestureRole.Button
+      );
+    }
+
+    return () => {
+      child.removeAttribute(NATIVE_GESTURE_ROLE_ATTRIBUTE);
+    };
+  }, [children, viewRef]);
+}

package/src/v3/hooks/callbacks/useReanimatedEventHandler.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 
 import type { ReanimatedHandler } from '../../../handlers/gestures/reanimatedWrapper';
 import { Reanimated } from '../../../handlers/gestures/reanimatedWrapper';
@@ -10,6 +10,12 @@ import type {
 } from '../../types';
 import { eventHandler } from './eventHandler';
 
+const REANIMATED_EVENT_NAMES = [
+  'onGestureHandlerReanimatedEvent',
+  'onGestureHandlerReanimatedStateChange',
+  'onGestureHandlerReanimatedTouchEvent',
+];
+
 const workletNOOP = () => {
   'worklet';
   // no-op
@@ -59,14 +65,24 @@ export function useReanimatedEventHandler<
     );
   };
 
+  // Fast Refresh invalidates `useMemo` caches but preserves `useRef`, so the
+  // `handlerTag` computed with `useMemo([])` in `useGesture` can regenerate
+  // on FR. Without forcing a rebuild, the registered worklet keeps the old
+  // `handlerTag` in its closure and `isEventForHandlerWithTag` rejects every
+  // event emitted by the freshly-created native handler.
+  const prevHandlerTagRef = useRef(handlerTag);
+  const handlerTagChanged = prevHandlerTagRef.current !== handlerTag;
+
+  // Write after commit so interrupted or re-invoked renders don't desync the
+  // ref from what was actually committed.
+  useEffect(() => {
+    prevHandlerTagRef.current = handlerTag;
+  }, [handlerTag]);
+
   const reanimatedEvent = Reanimated?.useEvent(
     callback,
-    [
-      'onGestureHandlerReanimatedEvent',
-      'onGestureHandlerReanimatedStateChange',
-      'onGestureHandlerReanimatedTouchEvent',
-    ],
-    !!reanimatedHandler?.doDependenciesDiffer
+    REANIMATED_EVENT_NAMES,
+    handlerTagChanged || !!reanimatedHandler?.doDependenciesDiffer
   );
 
   return reanimatedEvent;

package/src/v3/hooks/gestures/fling/useFlingGesture.ts

@@ -8,7 +8,11 @@ import type {
   FlingHandlerData,
 } from './FlingTypes';
 
-export function useFlingGesture(config: FlingGestureConfig): FlingGesture {
+const EMPTY_FLING_CONFIG: FlingGestureConfig = {};
+
+export function useFlingGesture(
+  config: FlingGestureConfig = EMPTY_FLING_CONFIG
+): FlingGesture {
   const flingConfig = useClonedAndRemappedConfig<
     FlingGestureProperties,
     FlingHandlerData

package/src/v3/hooks/gestures/hover/useHoverGesture.ts

@@ -44,7 +44,11 @@ function transformHoverProps(
 
 const HoverPropsMapping = new Map<string, string>([['effect', 'hoverEffect']]);
 
-export function useHoverGesture(config: HoverGestureConfig): HoverGesture {
+const EMPTY_HOVER_CONFIG: HoverGestureConfig = {};
+
+export function useHoverGesture(
+  config: HoverGestureConfig = EMPTY_HOVER_CONFIG
+): HoverGesture {
   const hoverConfig = useClonedAndRemappedConfig<
     HoverGestureProperties,
     HoverHandlerData,

package/src/v3/hooks/gestures/longPress/useLongPressGesture.ts

@@ -28,8 +28,10 @@ function transformLongPressProps(
   return config;
 }
 
+const EMPTY_LONG_PRESS_CONFIG: LongPressGestureConfig = {};
+
 export function useLongPressGesture(
-  config: LongPressGestureConfig
+  config: LongPressGestureConfig = EMPTY_LONG_PRESS_CONFIG
 ): LongPressGesture {
   const longPressConfig = useClonedAndRemappedConfig<
     LongPressGestureProperties,

package/src/v3/hooks/gestures/manual/useManualGesture.ts

@@ -8,7 +8,11 @@ import type {
   ManualHandlerData,
 } from './ManualTypes';
 
-export function useManualGesture(config: ManualGestureConfig): ManualGesture {
+const EMPTY_MANUAL_CONFIG: ManualGestureConfig = {};
+
+export function useManualGesture(
+  config: ManualGestureConfig = EMPTY_MANUAL_CONFIG
+): ManualGesture {
   const manualConfig = useClonedAndRemappedConfig<
     ManualGestureProperties,
     ManualHandlerData

package/src/v3/hooks/gestures/native/NativeTypes.ts

@@ -20,11 +20,23 @@ export type NativeGestureNativeProperties = {
    * `NativeViewGestureHandler` receives an `ACTIVE` state event.
    */
   disallowInterruption?: boolean;
+
+  /**
+   * Composes with `disallowInterruption`. When both are `true`, the handler still
+   * resists discrete gestures but yields to continuous gestures, so a wrapping
+   * gesture can take over the touch stream. No-op when `disallowInterruption` is
+   * `false`.
+   */
+  yieldsToContinuousGestures?: boolean;
 };
 
 export const NativeHandlerNativeProperties = new Set<
   keyof NativeGestureNativeProperties
->(['shouldActivateOnStart', 'disallowInterruption']);
+>([
+  'shouldActivateOnStart',
+  'disallowInterruption',
+  'yieldsToContinuousGestures',
+]);
 
 export type NativeHandlerData = {
   pointerInside: boolean;

package/src/v3/hooks/gestures/native/useNativeGesture.ts

@@ -8,7 +8,11 @@ import type {
   NativeHandlerData,
 } from './NativeTypes';
 
-export function useNativeGesture(config: NativeGestureConfig): NativeGesture {
+const EMPTY_NATIVE_CONFIG: NativeGestureConfig = {};
+
+export function useNativeGesture(
+  config: NativeGestureConfig = EMPTY_NATIVE_CONFIG
+): NativeGesture {
   const nativeConfig = useClonedAndRemappedConfig<
     NativeGestureProperties,
     NativeHandlerData

package/src/v3/hooks/gestures/pan/usePanGesture.ts

@@ -139,7 +139,11 @@ function transformPanProps(
   return config;
 }
 
-export function usePanGesture(config: PanGestureConfig): PanGesture {
+const EMPTY_PAN_CONFIG: PanGestureConfig = {};
+
+export function usePanGesture(
+  config: PanGestureConfig = EMPTY_PAN_CONFIG
+): PanGesture {
   if (__DEV__) {
     validatePanConfig(config);
   }

package/src/v3/hooks/gestures/pinch/usePinchGesture.ts

@@ -40,7 +40,11 @@ function transformPinchProps(
 
 const PinchPropsMapping = new Map<string, string>();
 
-export function usePinchGesture(config: PinchGestureConfig): PinchGesture {
+const EMPTY_PINCH_CONFIG: PinchGestureConfig = {};
+
+export function usePinchGesture(
+  config: PinchGestureConfig = EMPTY_PINCH_CONFIG
+): PinchGesture {
   const pinchConfig = useClonedAndRemappedConfig<
     PinchGestureProperties,
     PinchHandlerData,

package/src/v3/hooks/gestures/rotation/useRotationGesture.ts

@@ -42,8 +42,10 @@ function transformRotationProps(
 
 const RotationPropsMapping = new Map<string, string>();
 
+const EMPTY_ROTATION_CONFIG: RotationGestureConfig = {};
+
 export function useRotationGesture(
-  config: RotationGestureConfig
+  config: RotationGestureConfig = EMPTY_ROTATION_CONFIG
 ): RotationGesture {
   const rotationConfig = useClonedAndRemappedConfig<
     RotationGestureProperties,

package/src/v3/hooks/gestures/tap/useTapGesture.ts

@@ -18,7 +18,11 @@ const TapPropsMapping = new Map<
   ['maxDelay', 'maxDelayMs'],
 ]);
 
-export function useTapGesture(config: TapGestureConfig): TapGesture {
+const EMPTY_TAP_CONFIG: TapGestureConfig = {};
+
+export function useTapGesture(
+  config: TapGestureConfig = EMPTY_TAP_CONFIG
+): TapGesture {
   const tapConfig = useClonedAndRemappedConfig<
     TapGestureProperties,
     TapHandlerData,

package/src/v3/hooks/useGesture.ts

@@ -16,7 +16,6 @@ import type {
 import { useGestureCallbacks } from './useGestureCallbacks';
 import {
   bindSharedValues,
-  prepareConfig,
   prepareConfigForNativeSide,
   prepareRelations,
   unbindSharedValues,
@@ -41,9 +40,6 @@ export function useGesture<
     );
   }
 
-  // This has to be done ASAP as other hooks depend `shouldUseReanimatedDetector`.
-  prepareConfig(config);
-
   // TODO: Call only necessary hooks depending on which callbacks are defined (?)
   const { jsEventHandler, reanimatedEventHandler, animatedEventHandler } =
     useGestureCallbacks(handlerTag, config);

package/src/v3/hooks/utils/configUtils.ts

@@ -16,7 +16,7 @@ import {
 } from './propsWhiteList';
 import { hasWorkletEventHandlers, maybeUnpackValue } from './reanimatedUtils';
 
-export function prepareConfig<
+export function resolveInternalConfigProps<
   TConfig extends object,
   THandlerData,
   TExtendedHandlerData extends THandlerData,
@@ -125,7 +125,7 @@ function remapProps<
   TInternalConfig extends Record<string, unknown>,
 >(
   config: TConfig & TInternalConfig,
-  propsMapping: Map<string, string>
+  propsMapping: ReadonlyMap<string, string>
 ): TInternalConfig {
   type MergedConfig = TConfig & TInternalConfig;
 
@@ -142,6 +142,11 @@ function remapProps<
   return config;
 }
 
+const DEFAULT_PROPS_MAPPING = new Map<string, string>();
+const DEFAULT_PROPS_TRANSFORMER = <TConfig extends object>(
+  config: TConfig
+): TConfig => config;
+
 export function useClonedAndRemappedConfig<
   TConfig extends Record<string, unknown>,
   THandlerData,
@@ -151,8 +156,10 @@ export function useClonedAndRemappedConfig<
   config: ExcludeInternalConfigProps<
     BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
   >,
-  propsMapping: Map<string, string> = new Map(),
-  propsTransformer: (config: TInternalConfig) => TInternalConfig = (cfg) => cfg
+  propsMapping: ReadonlyMap<string, string> = DEFAULT_PROPS_MAPPING,
+  propsTransformer: (
+    config: TInternalConfig
+  ) => TInternalConfig = DEFAULT_PROPS_TRANSFORMER
 ): BaseGestureConfig<TInternalConfig, THandlerData, TExtendedHandlerData> {
   return useMemo(() => {
     const clonedConfig = cloneConfig<
@@ -161,11 +168,15 @@ export function useClonedAndRemappedConfig<
       TExtendedHandlerData
     >(config);
 
-    return propsTransformer(
+    const transformedConfig = propsTransformer(
       remapProps<TConfig, TInternalConfig>(
         clonedConfig as TConfig & TInternalConfig,
         propsMapping
       )
     );
+
+    resolveInternalConfigProps(transformedConfig);
+
+    return transformedConfig;
   }, [config, propsMapping, propsTransformer]);
 }

package/src/v3/hooks/utils/index.ts

@@ -1,5 +1,4 @@
 export {
-  prepareConfig,
   prepareConfigForNativeSide,
   useClonedAndRemappedConfig,
 } from './configUtils';

package/src/v3/hooks/utils/propsWhiteList.ts

@@ -23,6 +23,7 @@ const CommonConfig = new Set<keyof CommonGestureConfig>([
   'mouseButton',
   'testID',
   'cancelsTouchesInView',
+  'cancelsJSResponder',
   'manualActivation',
 ]);
 

package/src/v3/types/ConfigTypes.ts

@@ -77,6 +77,7 @@ export type CommonGestureConfig = {
     activeCursor?: ActiveCursor | undefined;
     mouseButton?: MouseButton | undefined;
     cancelsTouchesInView?: boolean | undefined;
+    cancelsJSResponder?: boolean | undefined;
     manualActivation?: boolean | undefined;
   },
   ActiveCursor | MouseButton

package/src/web/constants.ts

@@ -1,2 +1,3 @@
 export const DEFAULT_TOUCH_SLOP = 15;
 export const MINIMAL_RECOGNIZABLE_MAGNITUDE = 0.1;
+export const NATIVE_GESTURE_ROLE_ATTRIBUTE = 'rngh-role';

package/src/web/detectors/RotationGestureDetector.ts

@@ -84,15 +84,23 @@ export default class RotationGestureDetector
     this.onRotationEnd(this);
   }
 
-  private setKeyPointers(tracker: PointerTracker): void {
+  private setKeyPointers(tracker: PointerTracker, excludeId?: number): void {
     if (this.keyPointers[0] && this.keyPointers[1]) {
       return;
     }
 
-    const pointerIDs: IterableIterator<number> = tracker.trackedPointers.keys();
+    let assigned = 0;
 
-    this.keyPointers[0] = pointerIDs.next().value as number;
-    this.keyPointers[1] = pointerIDs.next().value as number;
+    for (const id of tracker.trackedPointers.keys()) {
+      if (id === excludeId) {
+        continue;
+      }
+
+      this.keyPointers[assigned++] = id;
+      if (assigned === 2) {
+        break;
+      }
+    }
   }
 
   public onTouchEvent(event: AdaptedEvent, tracker: PointerTracker): boolean {
@@ -132,7 +140,13 @@ export default class RotationGestureDetector
         }
 
         if (this.keyPointers.indexOf(event.pointerId) >= 0) {
-          this.finish();
+          if (tracker.trackedPointersCount <= 2) {
+            this.reset();
+          } else {
+            this.keyPointers = [NaN, NaN];
+            this.setKeyPointers(tracker, event.pointerId);
+            this.previousAngle = NaN;
+          }
         }
 
         break;

package/src/web/detectors/ScaleGestureDetector.ts

@@ -44,10 +44,16 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
     const action: EventTypes = event.eventType;
     const numOfPointers = tracker.trackedPointersCount;
 
+    // When the last second pointer lifts (going down to 1), pause without
+    // touching span/time state so the gesture resumes cleanly on re-add.
+    // When 3+ → 2+ pointers, fall through so configChanged resets the span
+    // baseline to the remaining pointer set and avoids a scale jump.
+    if (action === EventTypes.ADDITIONAL_POINTER_UP && numOfPointers <= 2) {
+      return true;
+    }
+
     const streamComplete: boolean =
-      action === EventTypes.UP ||
-      action === EventTypes.ADDITIONAL_POINTER_UP ||
-      action === EventTypes.CANCEL;
+      action === EventTypes.UP || action === EventTypes.CANCEL;
 
     if (action === EventTypes.DOWN || streamComplete) {
       if (this.inProgress) {

package/src/web/handlers/GestureHandler.ts

@@ -14,6 +14,7 @@ import { tagMessage } from '../../utils';
 import type {
   GestureStateChangeEventWithHandlerData,
   GestureUpdateEventWithHandlerData,
+  HandlerData,
   SingleGestureName,
 } from '../../v3/types';
 import type {
@@ -45,7 +46,7 @@ export default abstract class GestureHandler implements IGestureHandler {
 
   private viewRef: number | null = null;
   private propsRef: React.RefObject<PropsRef> | null = null;
-  private actionType: ActionType | null = null;
+  protected actionType: ActionType | null = null;
   private forAnimated: boolean = false;
   private forReanimated: boolean = false;
   private _handlerTag!: number;
@@ -302,6 +303,12 @@ export default abstract class GestureHandler implements IGestureHandler {
     );
   }
 
+  public shouldBeginWithRecordedHandlers(
+    _recorded: IGestureHandler[]
+  ): boolean {
+    return true;
+  }
+
   public shouldAttachGestureToChildView(): boolean {
     return false;
   }
@@ -355,8 +362,9 @@ export default abstract class GestureHandler implements IGestureHandler {
   protected onPointerCancel(_event: AdaptedEvent): void {
     // No need to send a cancel touch event explicitly here. `cancel` will
     // handle cancelling all tracked touches if the handler expects pointer data.
-    this.cancel();
-    this.reset();
+    if (GestureHandlerOrchestrator.instance.isHandlerRecorded(this)) {
+      this.cancel();
+    }
   }
   protected onPointerOutOfBounds(event: AdaptedEvent): void {
     this.tryToSendMoveEvent(true, event);
@@ -430,11 +438,13 @@ export default abstract class GestureHandler implements IGestureHandler {
       onGestureHandlerReanimatedStateChange,
     }: PropsRef = this.propsRef!.current;
 
+    const isStateChange = this.lastSentState !== newState;
+
     const resultEvent: ResultEvent = !usesNativeOrVirtualDetector(
       this.actionType
     )
       ? this.transformEventData(newState, oldState)
-      : this.lastSentState !== newState
+      : isStateChange
         ? this.transformStateChangeEvent(newState, oldState)
         : this.transformUpdateEvent(newState);
 
@@ -442,7 +452,7 @@ export default abstract class GestureHandler implements IGestureHandler {
     // Here the order is flipped to avoid workarounds such as making backup of the state and setting it to undefined first, then changing it back
     // Flipping order with setting oldState to undefined solves issue, when events were being sent twice instead of once
     // However, this may cause trouble in the future (but for now we don't know that)
-    if (this.lastSentState !== newState) {
+    if (isStateChange) {
       this.lastSentState = newState;
 
       if (this.forReanimated) {
@@ -456,6 +466,16 @@ export default abstract class GestureHandler implements IGestureHandler {
       return;
     }
 
+    // Cover only V3 path due to different event shape
+    if (!isStateChange && usesNativeOrVirtualDetector(this.actionType)) {
+      const handlerData = (
+        resultEvent.nativeEvent as GestureUpdateEventWithHandlerData<unknown>
+      ).handlerData;
+      if (this.shouldSuppressActiveUpdate(handlerData)) {
+        return;
+      }
+    }
+
     (resultEvent.nativeEvent as GestureHandlerNativeEvent).oldState = undefined;
 
     if (this.forReanimated) {
@@ -467,6 +487,12 @@ export default abstract class GestureHandler implements IGestureHandler {
     }
   };
 
+  protected shouldSuppressActiveUpdate(
+    _handlerData: HandlerData<unknown>
+  ): boolean {
+    return false;
+  }
+
   private transformEventData(
     newState: State,
     oldState: State
@@ -744,7 +770,6 @@ export default abstract class GestureHandler implements IGestureHandler {
     const enabledChanged = this.maybeUpdateEnabled(config.enabled);
 
     if (config.hitSlop !== undefined) {
-      this.hitSlop = config.hitSlop;
       this.hitSlop = config.hitSlop;
       this.validateHitSlops();
     }
@@ -1072,6 +1097,11 @@ export default abstract class GestureHandler implements IGestureHandler {
     this._name = value;
   }
 
+  /**
+   * Whether the handler represents a continuous gesture rather than a discrete one.
+   */
+  public readonly isContinuous: boolean = false;
+
   public getTrackedPointersID(): number[] {
     return this.tracker.trackedPointersIDs;
   }

package/src/web/handlers/HoverGestureHandler.ts

@@ -8,6 +8,8 @@ import GestureHandler from './GestureHandler';
 import type IGestureHandler from './IGestureHandler';
 
 export default class HoverGestureHandler extends GestureHandler {
+  public override readonly isContinuous = true;
+
   private stylusData: StylusData | undefined;
 
   public constructor(
@@ -52,9 +54,4 @@ export default class HoverGestureHandler extends GestureHandler {
 
     super.onPointerMove(event);
   }
-
-  protected override onPointerCancel(event: AdaptedEvent): void {
-    super.onPointerCancel(event);
-    this.reset();
-  }
 }

package/src/web/handlers/IGestureHandler.ts

@@ -22,6 +22,7 @@ export default interface IGestureHandler {
   readonly delegate: GestureHandlerDelegate<unknown, this>;
   readonly tracker: PointerTracker;
   readonly name: SingleGestureName;
+  readonly isContinuous: boolean;
   state: State;
   shouldCancelWhenOutside: boolean;
   shouldResetProgress: boolean;
@@ -53,6 +54,7 @@ export default interface IGestureHandler {
   shouldRequireToWaitForFailure: (handler: IGestureHandler) => boolean;
   shouldRecognizeSimultaneously: (handler: IGestureHandler) => boolean;
   shouldBeCancelledByOther: (handler: IGestureHandler) => boolean;
+  shouldBeginWithRecordedHandlers: (recorded: IGestureHandler[]) => boolean;
   shouldAttachGestureToChildView: () => boolean;
 
   sendEvent: (newState: State, oldState: State) => void;

package/src/web/handlers/ManualGestureHandler.ts

@@ -5,6 +5,8 @@ import GestureHandler from './GestureHandler';
 import type IGestureHandler from './IGestureHandler';
 
 export default class ManualGestureHandler extends GestureHandler {
+  public override readonly isContinuous = true;
+
   public constructor(
     delegate: GestureHandlerDelegate<unknown, IGestureHandler>
   ) {