react-native-gesture-handler 2.32.0 → 2.33.1

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,10 +1,19 @@
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-import type { ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
 
 export interface RootViewNativeProps extends ViewProps {
   unstable_forceActive?: boolean;
 }
 
-export default codegenNativeComponent<RootViewNativeProps>(
+// @ts-expect-error WithDefault adds null for codegen, unlike ViewProps.pointerEvents.
+interface NativeProps extends ViewProps {
+  pointerEvents?: CodegenTypes.WithDefault<
+    'box-none' | 'none' | 'box-only' | 'auto',
+    'auto'
+  >;
+  unstable_forceActive?: boolean;
+}
+
+export default codegenNativeComponent<NativeProps>(
   '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/GestureHandlerWebDelegate.ts

@@ -12,6 +12,7 @@ import { Config } from '../interfaces';
 import { MouseButton } from '../../handlers/gestureHandlerCommon';
 import KeyboardEventManager from './KeyboardEventManager';
 import WheelEventManager from './WheelEventManager';
+import PanGestureHandler from '../handlers/PanGestureHandler';
 
 interface DefaultViewStyles {
   userSelect: string;
@@ -49,6 +50,7 @@ export class GestureHandlerWebDelegate
     };
 
     const config = handler.config;
+    const shouldSendWheelEvents = handler instanceof PanGestureHandler;
 
     this.setUserSelect(config.enabled);
     this.setTouchAction(config.enabled);
@@ -56,7 +58,10 @@ export class GestureHandlerWebDelegate
 
     this.eventManagers.push(new PointerEventManager(this.view));
     this.eventManagers.push(new KeyboardEventManager(this.view));
-    this.eventManagers.push(new WheelEventManager(this.view));
+
+    if (shouldSendWheelEvents) {
+      this.eventManagers.push(new WheelEventManager(this.view));
+    }
 
     this.eventManagers.forEach((manager) =>
       this.gestureHandler.attachEventManager(manager)

package/src/web/tools/KeyboardEventManager.ts

@@ -3,9 +3,10 @@ import EventManager from './EventManager';
 import { PointerType } from '../../PointerType';
 
 export default class KeyboardEventManager extends EventManager<HTMLElement> {
-  private static activationKeys = ['Enter', ' '];
-  private static cancelationKeys = ['Tab'];
-  private isPressed = false;
+  private static activationKeys = new Set(['Enter', ' ']);
+  private static cancelationKeys = new Set(['Tab']);
+  private keyPointer: string | null = null;
+
   private static registeredStaticListeners = false;
   private static instances: Set<KeyboardEventManager> = new Set();
 
@@ -13,8 +14,7 @@ export default class KeyboardEventManager extends EventManager<HTMLElement> {
     // We need a global listener, as in some cases, keyUp event gets stop-propagated.
     // Then, if we used only component-level listeners the gesture would never end,
     // causing other gestues to fail.
-
-    if (this.activationKeys.indexOf(event.key) === -1) {
+    if (!this.activationKeys.has(event.key)) {
       return;
     }
 
@@ -24,30 +24,30 @@ export default class KeyboardEventManager extends EventManager<HTMLElement> {
   };
 
   private keyDownCallback = (event: KeyboardEvent): void => {
-    if (
-      KeyboardEventManager.cancelationKeys.indexOf(event.key) !== -1 &&
-      this.isPressed
-    ) {
-      this.dispatchEvent(event, EventTypes.CANCEL);
+    if (this.keyPointer !== null) {
+      if (KeyboardEventManager.cancelationKeys.has(event.key)) {
+        this.dispatchEvent(event, EventTypes.CANCEL);
+        this.keyPointer = null;
+      }
+
       return;
     }
 
-    if (KeyboardEventManager.activationKeys.indexOf(event.key) === -1) {
+    if (!KeyboardEventManager.activationKeys.has(event.key) || event.repeat) {
       return;
     }
 
+    this.keyPointer = event.key;
     this.dispatchEvent(event, EventTypes.DOWN);
   };
 
   private onKeyUp = (event: KeyboardEvent): void => {
-    if (
-      KeyboardEventManager.activationKeys.indexOf(event.key) === -1 ||
-      !this.isPressed
-    ) {
+    if (this.keyPointer !== event.key) {
       return;
     }
 
     this.dispatchEvent(event, EventTypes.UP);
+    this.keyPointer = null;
   };
 
   private dispatchEvent(event: KeyboardEvent, eventType: EventTypes) {
@@ -59,15 +59,12 @@ export default class KeyboardEventManager extends EventManager<HTMLElement> {
 
     switch (eventType) {
       case EventTypes.UP:
-        this.isPressed = false;
         this.onPointerUp(adaptedEvent);
         break;
       case EventTypes.DOWN:
-        this.isPressed = true;
         this.onPointerDown(adaptedEvent);
         break;
       case EventTypes.CANCEL:
-        this.isPressed = false;
         this.onPointerCancel(adaptedEvent);
         break;
     }
@@ -103,6 +100,11 @@ export default class KeyboardEventManager extends EventManager<HTMLElement> {
     }
   }
 
+  public override resetManager(): void {
+    super.resetManager();
+    this.keyPointer = null;
+  }
+
   protected mapEvent(
     event: KeyboardEvent,
     eventType: EventTypes

package/src/web/tools/WheelEventManager.ts

@@ -1,6 +1,7 @@
 import EventManager from './EventManager';
 import { AdaptedEvent, EventTypes } from '../interfaces';
 import { PointerType } from '../../PointerType';
+import { calculateViewScale } from '../utils';
 
 export default class WheelEventManager extends EventManager<HTMLElement> {
   private wheelDelta = { x: 0, y: 0 };
@@ -19,7 +20,9 @@ export default class WheelEventManager extends EventManager<HTMLElement> {
 
   public registerListeners(): void {
     this.view.addEventListener('pointermove', this.resetDelta);
-    this.view.addEventListener('wheel', this.wheelCallback);
+    this.view.addEventListener('wheel', this.wheelCallback, {
+      passive: true,
+    });
   }
 
   public unregisterListeners(): void {
@@ -28,11 +31,17 @@ export default class WheelEventManager extends EventManager<HTMLElement> {
   }
 
   protected mapEvent(event: WheelEvent): AdaptedEvent {
+    const rect = this.view.getBoundingClientRect();
+    const { scaleX, scaleY } = calculateViewScale(this.view);
+
+    const x = event.clientX + this.wheelDelta.x;
+    const y = event.clientY + this.wheelDelta.y;
+
     return {
-      x: event.clientX + this.wheelDelta.x,
-      y: event.clientY + this.wheelDelta.y,
-      offsetX: event.offsetX - event.deltaX,
-      offsetY: event.offsetY - event.deltaY,
+      x,
+      y,
+      offsetX: (x - rect.left) / scaleX,
+      offsetY: (y - rect.top) / scaleY,
       pointerId: -1,
       eventType: EventTypes.MOVE,
       pointerType: PointerType.OTHER,
@@ -44,5 +53,6 @@ export default class WheelEventManager extends EventManager<HTMLElement> {
 
   public resetManager(): void {
     super.resetManager();
+    this.wheelDelta = { x: 0, y: 0 };
   }
 }