react-native-gesture-handler 2.32.0 → 2.33.0

package/src/handlers/gestures/GestureDetector/index.tsx

@@ -6,6 +6,7 @@ import { GestureType } from '../gesture';
 import { UserSelect, TouchAction } from '../../gestureHandlerCommon';
 import { ComposedGesture } from '../gestureComposition';
 import { isTestEnv } from '../../../utils';
+import { resolveHostInstance } from '../../../hostInstance';
 
 import GestureHandlerRootViewContext from '../../../GestureHandlerRootViewContext';
 import { AttachedGestureState, GestureDetectorState } from './types';
@@ -149,7 +150,9 @@ export const GestureDetector = (props: GestureDetectorProps) => {
   useAnimatedGesture(preparedGesture, needsToRebuildReanimatedEvent);
 
   useIsomorphicLayoutEffect(() => {
-    const viewTag = findNodeHandle(state.viewRef) as number;
+    const viewTag = findNodeHandle(
+      resolveHostInstance(state.viewRef)
+    ) as number;
     preparedGesture.isMounted = true;
 
     attachHandlers({

package/src/handlers/gestures/GestureDetector/useDetectorUpdater.ts

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { GestureType } from '../gesture';
 import { ComposedGesture } from '../gestureComposition';
 
+import { resolveHostInstance } from '../../../hostInstance';
 import {
   AttachedGestureState,
   GestureDetectorState,
@@ -29,7 +30,9 @@ export function useDetectorUpdater(
     // skipConfigUpdate is used to prevent unnecessary updates when only checking if the view has changed
     (skipConfigUpdate?: boolean) => {
       // If the underlying view has changed we need to reattach handlers to the new view
-      const viewTag = findNodeHandle(state.viewRef) as number;
+      const viewTag = findNodeHandle(
+        resolveHostInstance(state.viewRef)
+      ) as number;
       const didUnderlyingViewChange = viewTag !== state.previousViewTag;
 
       if (

package/src/handlers/gestures/GestureDetector/useMountReactions.ts

@@ -27,6 +27,12 @@ export function useMountReactions(
 ) {
   useEffect(() => {
     return MountRegistry.addMountListener((gesture) => {
+      // The detector may already be unmounted when this fires; bail out to avoid
+      // updating a detached detector.
+      if (!state.isMounted) {
+        return;
+      }
+
       // At this point the ref in the gesture config should be updated, so we can check if one of the gestures
       // set in a relation with the gesture got mounted. If so, we need to update the detector to propagate
       // the changes to the native side.

package/src/handlers/gestures/GestureDetector/useViewRefHandler.ts

@@ -4,6 +4,7 @@ import { getShadowNodeFromRef } from '../../../getShadowNodeFromRef';
 import { GestureDetectorState } from './types';
 import React, { useCallback } from 'react';
 import findNodeHandle from '../../../findNodeHandle';
+import { resolveHostInstance } from '../../../hostInstance';
 
 declare const global: {
   isViewFlatteningDisabled: (node: unknown) => boolean | null; // JSI function
@@ -26,7 +27,9 @@ export function useViewRefHandler(
 
       // if it's the first render, also set the previousViewTag to prevent reattaching gestures when not needed
       if (state.previousViewTag === -1) {
-        state.previousViewTag = findNodeHandle(state.viewRef) as number;
+        state.previousViewTag = findNodeHandle(
+          resolveHostInstance(state.viewRef)
+        ) as number;
       }
 
       // Pass true as `skipConfigUpdate`. Here we only want to trigger the eventual reattaching of handlers
@@ -36,7 +39,7 @@ export function useViewRefHandler(
       }
 
       if (__DEV__ && isFabric() && global.isViewFlatteningDisabled) {
-        const node = getShadowNodeFromRef(ref);
+        const node = getShadowNodeFromRef(resolveHostInstance(ref));
         if (global.isViewFlatteningDisabled(node) === false) {
           console.error(
             tagMessage(

package/src/handlers/gestures/gestureStateManager.web.ts

@@ -1,5 +1,13 @@
 import NodeManager from '../../web/tools/NodeManager';
-import { GestureStateManagerType } from './gestureStateManager';
+
+export interface GestureStateManagerType {
+  begin: () => void;
+  activate: () => void;
+  fail: () => void;
+  end: () => void;
+  /** @internal */
+  handlerTag: number;
+}
 
 export const GestureStateManager = {
   create(handlerTag: number): GestureStateManagerType {

package/src/handlers/gestures/panGesture.ts

@@ -147,7 +147,8 @@ export class PanGesture extends ContinousBaseGesture<
   }
 
   /**
-   * Minimum velocity the finger has to reach in order to activate handler.
+   * Minimum speed the pointer has to reach in order to activate handler.
+   * Expressed in points per second.
    * @param velocity
    */
   minVelocity(velocity: number) {
@@ -156,7 +157,8 @@ export class PanGesture extends ContinousBaseGesture<
   }
 
   /**
-   * Minimum velocity along X axis the finger has to reach in order to activate handler.
+   * Minimum speed along X axis the pointer has to reach in order to activate handler.
+   * Expressed in points per second.
    * @param velocity
    */
   minVelocityX(velocity: number) {
@@ -165,7 +167,8 @@ export class PanGesture extends ContinousBaseGesture<
   }
 
   /**
-   * Minimum velocity along Y axis the finger has to reach in order to activate handler.
+   * Minimum speed along Y axis the pointer has to reach in order to activate handler.
+   * Expressed in points per second.
    * @param velocity
    */
   minVelocityY(velocity: number) {

package/src/hostInstance.ts

@@ -0,0 +1,57 @@
+import type { Ref } from 'react';
+
+export type WrapRef = Ref<unknown> | undefined;
+
+export function assignRef(
+  ref: WrapRef,
+  instance: unknown
+): (() => void) | undefined {
+  if (typeof ref === 'function') {
+    const cleanup = ref(instance as never);
+    return typeof cleanup === 'function' ? cleanup : undefined;
+  }
+
+  if (ref) {
+    ref.current = instance;
+  }
+
+  return undefined;
+}
+
+export function isHostInstance(instance: unknown) {
+  return (
+    (instance as { __internalInstanceHandle?: unknown } | null | undefined)
+      ?.__internalInstanceHandle !== undefined
+  );
+}
+
+export function preferHostInstance(instance: unknown) {
+  if (instance === null || instance === undefined || isHostInstance(instance)) {
+    return instance;
+  }
+
+  const nativeRef = (
+    instance as { getNativeScrollRef?: () => unknown }
+  ).getNativeScrollRef?.();
+
+  return isHostInstance(nativeRef) ? nativeRef : instance;
+}
+
+export interface HostInstanceProvider {
+  getHostInstance: () => unknown;
+}
+
+function providesHostInstance(ref: unknown): ref is HostInstanceProvider {
+  return (
+    typeof (ref as HostInstanceProvider | null | undefined)?.getHostInstance ===
+    'function'
+  );
+}
+
+export function resolveHostInstance<T>(ref: T): T {
+  if (!providesHostInstance(ref)) {
+    return ref;
+  }
+
+  return (ref.getHostInstance() ?? ref) as T;
+}

package/src/index.ts

@@ -146,6 +146,7 @@ export type {
 export type { SwipeableProps } from './components/Swipeable';
 export { default as Swipeable } from './components/Swipeable';
 export type {
+  PressableEvent,
   PressableProps,
   PressableStateCallbackType,
 } from './components/Pressable';

package/src/mocks/mocks.tsx

@@ -8,7 +8,9 @@ import {
   FlatList,
   Switch,
   TextInput,
+  TextInputProps,
   DrawerLayoutAndroid,
+  DrawerLayoutAndroidProps,
   View,
 } from 'react-native';
 import { State } from '../State';
@@ -48,8 +50,10 @@ export default {
   ScrollView,
   FlatList,
   Switch,
-  TextInput,
-  DrawerLayoutAndroid,
+  // Explicit types keep the emitted declaration portable under TS 6.
+  TextInput: TextInput as React.ComponentType<TextInputProps>,
+  DrawerLayoutAndroid:
+    DrawerLayoutAndroid as React.ComponentType<DrawerLayoutAndroidProps>,
   NativeViewGestureHandler,
   TapGestureHandler,
   ForceTouchGestureHandler,

package/src/specs/NativeRNGestureHandlerModule.ts

@@ -1,24 +1,30 @@
-import { TurboModuleRegistry, TurboModule } from 'react-native';
-import { Double } from 'react-native/Libraries/Types/CodegenTypes';
+import type { CodegenTypes, TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
 
 export interface Spec extends TurboModule {
-  handleSetJSResponder: (tag: Double, blockNativeResponder: boolean) => void;
+  handleSetJSResponder: (
+    tag: CodegenTypes.Double,
+    blockNativeResponder: boolean
+  ) => void;
   handleClearJSResponder: () => void;
   createGestureHandler: (
     handlerName: string,
-    handlerTag: Double,
+    handlerTag: CodegenTypes.Double,
     // Record<> is not supported by codegen
     // eslint-disable-next-line @typescript-eslint/ban-types
     config: Object
   ) => void;
   attachGestureHandler: (
-    handlerTag: Double,
-    newView: Double,
-    actionType: Double
+    handlerTag: CodegenTypes.Double,
+    newView: CodegenTypes.Double,
+    actionType: CodegenTypes.Double
+  ) => void;
+  updateGestureHandler: (
+    handlerTag: CodegenTypes.Double,
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    newConfig: Object
   ) => void;
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  updateGestureHandler: (handlerTag: Double, newConfig: Object) => void;
-  dropGestureHandler: (handlerTag: Double) => void;
+  dropGestureHandler: (handlerTag: CodegenTypes.Double) => void;
   install: () => boolean;
   flushOperations: () => void;
 }

package/src/specs/RNGestureHandlerButtonNativeComponent.ts

@@ -1,27 +1,29 @@
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import { codegenNativeComponent } from 'react-native';
 import type {
-  Int32,
-  WithDefault,
-  Float,
-} from 'react-native/Libraries/Types/CodegenTypes';
-import type { ViewProps, ColorValue } from 'react-native';
+  CodegenTypes,
+  HostComponent,
+  ViewProps,
+  ColorValue,
+} from 'react-native';
 
 // @ts-ignore - Redefining pointerEvents with WithDefault for codegen, conflicts with ViewProps type but codegen needs it
 interface NativeProps extends ViewProps {
-  exclusive?: WithDefault<boolean, true>;
+  exclusive?: CodegenTypes.WithDefault<boolean, true>;
   foreground?: boolean;
   borderless?: boolean;
-  enabled?: WithDefault<boolean, true>;
+  enabled?: CodegenTypes.WithDefault<boolean, true>;
   rippleColor?: ColorValue;
-  rippleRadius?: Int32;
-  touchSoundDisabled?: WithDefault<boolean, false>;
-  borderWidth?: Float;
+  rippleRadius?: CodegenTypes.Int32;
+  touchSoundDisabled?: CodegenTypes.WithDefault<boolean, false>;
+  borderWidth?: CodegenTypes.Float;
   borderColor?: ColorValue;
-  borderStyle?: WithDefault<string, 'solid'>;
-  pointerEvents?: WithDefault<
+  borderStyle?: CodegenTypes.WithDefault<string, 'solid'>;
+  pointerEvents?: CodegenTypes.WithDefault<
     'box-none' | 'none' | 'box-only' | 'auto',
     'auto'
   >;
 }
 
-export default codegenNativeComponent<NativeProps>('RNGestureHandlerButton');
+export default codegenNativeComponent<NativeProps>(
+  'RNGestureHandlerButton'
+) as HostComponent<NativeProps>;

package/src/specs/RNGestureHandlerRootViewNativeComponent.ts

@@ -1,5 +1,5 @@
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-import type { ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+import type { HostComponent, ViewProps } from 'react-native';
 
 export interface RootViewNativeProps extends ViewProps {
   unstable_forceActive?: boolean;
@@ -7,4 +7,4 @@ export interface RootViewNativeProps extends ViewProps {
 
 export default codegenNativeComponent<RootViewNativeProps>(
   'RNGestureHandlerRootView'
-);
+) as HostComponent<RootViewNativeProps>;

package/src/web/detectors/RotationGestureDetector.ts

@@ -163,6 +163,6 @@ export default class RotationGestureDetector
   }
 
   public get timeDelta() {
-    return this.currentTime + this.previousTime;
+    return this.currentTime - this.previousTime;
   }
 }

package/src/web/handlers/LongPressGestureHandler.ts

@@ -5,6 +5,7 @@ import GestureHandler from './GestureHandler';
 
 const DEFAULT_MIN_DURATION_MS = 500;
 const DEFAULT_MAX_DIST_DP = 10;
+const DEFAULT_NUMBER_OF_POINTERS = 1;
 const SCALING_FACTOR = 10;
 
 export default class LongPressGestureHandler extends GestureHandler {
@@ -12,7 +13,7 @@ export default class LongPressGestureHandler extends GestureHandler {
   private defaultMaxDistSq = DEFAULT_MAX_DIST_DP * SCALING_FACTOR;
 
   private maxDistSq = this.defaultMaxDistSq;
-  private numberOfPointers = 1;
+  private numberOfPointers = DEFAULT_NUMBER_OF_POINTERS;
   private startX = 0;
   private startY = 0;
 
@@ -56,6 +57,7 @@ export default class LongPressGestureHandler extends GestureHandler {
     super.resetConfig();
     this.minDurationMs = DEFAULT_MIN_DURATION_MS;
     this.maxDistSq = this.defaultMaxDistSq;
+    this.numberOfPointers = DEFAULT_NUMBER_OF_POINTERS;
   }
 
   protected onStateChange(_newState: State, _oldState: State): void {

package/src/web/handlers/NativeViewGestureHandler.ts

@@ -20,8 +20,6 @@ export default class NativeViewGestureHandler extends GestureHandler {
   public init(ref: number, propsRef: React.RefObject<unknown>): void {
     super.init(ref, propsRef);
 
-    this.shouldCancelWhenOutside = true;
-
     if (Platform.OS !== 'web') {
       return;
     }
@@ -33,6 +31,9 @@ export default class NativeViewGestureHandler extends GestureHandler {
   }
 
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
+    // Config updates are full replaces, so restore the defaults first - the
+    // module never calls `resetConfig` on its own.
+    this.resetConfig();
     super.updateGestureConfig({ enabled: enabled, ...props });
 
     if (this.config.shouldActivateOnStart !== undefined) {
@@ -46,6 +47,14 @@ export default class NativeViewGestureHandler extends GestureHandler {
     this.restoreViewStyles(view);
   }
 
+  protected override resetConfig(): void {
+    super.resetConfig();
+
+    this.shouldCancelWhenOutside = true;
+    this.shouldActivateOnStart = false;
+    this.disallowInterruption = false;
+  }
+
   private restoreViewStyles(view: HTMLElement) {
     if (!view) {
       return;

package/src/web/handlers/PanGestureHandler.ts

@@ -82,8 +82,7 @@ export default class PanGestureHandler extends GestureHandler {
     }
 
     if (this.config.minVelocity !== undefined) {
-      this.minVelocityX = this.config.minVelocity;
-      this.minVelocityY = this.config.minVelocity;
+      this.minVelocitySq = this.config.minVelocity * this.config.minVelocity;
     }
 
     if (this.config.minVelocityX !== undefined) {
@@ -191,6 +190,7 @@ export default class PanGestureHandler extends GestureHandler {
     this.maxPointers = DEFAULT_MAX_POINTERS;
 
     this.activateAfterLongPress = 0;
+    this.enableTrackpadTwoFingerGesture = false;
   }
 
   protected transformNativeEvent() {
@@ -354,14 +354,13 @@ export default class PanGestureHandler extends GestureHandler {
     }
   }
 
-  private scheduleWheelEnd(event: AdaptedEvent) {
+  private scheduleWheelEnd() {
     clearTimeout(this.endWheelTimeout);
 
     this.endWheelTimeout = setTimeout(() => {
       if (this.state === State.ACTIVE) {
         this.end();
-        this.tracker.removeFromTracker(event.pointerId);
-        this.state = State.UNDETERMINED;
+        this.reset();
       }
 
       this.wheelDevice = WheelDevice.UNDETERMINED;
@@ -383,7 +382,7 @@ export default class PanGestureHandler extends GestureHandler {
           : WheelDevice.MOUSE;
 
       if (this.wheelDevice === WheelDevice.MOUSE) {
-        this.scheduleWheelEnd(event);
+        this.scheduleWheelEnd();
         return;
       }
 
@@ -403,7 +402,7 @@ export default class PanGestureHandler extends GestureHandler {
     this.updateVelocity(event.pointerId);
 
     this.tryToSendMoveEvent(false, event);
-    this.scheduleWheelEnd(event);
+    this.scheduleWheelEnd();
   }
 
   private shouldActivate(): boolean {
@@ -452,8 +451,7 @@ export default class PanGestureHandler extends GestureHandler {
 
     if (
       this.minVelocityX !== Number.MAX_SAFE_INTEGER &&
-      ((this.minVelocityX < 0 && vx <= this.minVelocityX) ||
-        (this.minVelocityX >= 0 && this.minVelocityX <= vx))
+      Math.abs(vx) >= Math.abs(this.minVelocityX)
     ) {
       return true;
     }
@@ -461,8 +459,7 @@ export default class PanGestureHandler extends GestureHandler {
     const vy: number = this.velocityY;
     if (
       this.minVelocityY !== Number.MAX_SAFE_INTEGER &&
-      ((this.minVelocityY < 0 && vy <= this.minVelocityY) ||
-        (this.minVelocityY >= 0 && this.minVelocityY <= vy))
+      Math.abs(vy) >= Math.abs(this.minVelocityY)
     ) {
       return true;
     }

package/src/web/handlers/TapGestureHandler.ts

@@ -159,7 +159,7 @@ export default class TapGestureHandler extends GestureHandler {
     this.tracker.removeFromTracker(event.pointerId);
 
     this.offsetX += this.lastX - this.startX;
-    this.offsetY += this.lastY = this.startY;
+    this.offsetY += this.lastY - this.startY;
 
     this.updateLastCoords();
 

package/src/web/tools/GestureHandlerOrchestrator.ts

@@ -264,7 +264,26 @@ export default class GestureHandlerOrchestrator {
     handler.activationIndex = this.activationIndex++;
   }
 
+  // A handler whose pointer sequence ended before it began (e.g. a press
+  // outside a negative hit slop) never reaches a finished state, so
+  // `cleanupFinishedHandlers` never drops it and it would block or park every
+  // later gesture. Drop such idle entries before a new gesture consults them.
+  private dropIdleHandlers(): void {
+    for (let i = this.gestureHandlers.length - 1; i >= 0; --i) {
+      const handler = this.gestureHandlers[i];
+
+      if (
+        handler.state === State.UNDETERMINED &&
+        handler.tracker.trackedPointersCount === 0
+      ) {
+        this.removeHandlerFromOrchestrator(handler);
+      }
+    }
+  }
+
   public recordHandlerIfNotPresent(handler: IGestureHandler): void {
+    this.dropIdleHandlers();
+
     if (this.gestureHandlers.includes(handler)) {
       return;
     }

package/src/web/tools/WheelEventManager.ts

@@ -44,5 +44,6 @@ export default class WheelEventManager extends EventManager<HTMLElement> {
 
   public resetManager(): void {
     super.resetManager();
+    this.wheelDelta = { x: 0, y: 0 };
   }
 }