react-native-gesture-handler 2.26.0 → 2.27.1

package/src/components/Pressable/PressableProps.tsx

@@ -6,9 +6,12 @@ import {
   ViewStyle,
   PressableStateCallbackType as RNPressableStateCallbackType,
   PressableAndroidRippleConfig as RNPressableAndroidRippleConfig,
+  View,
 } from 'react-native';
 import { RelationPropType } from '../utils';
 
+export type PressableDimensions = { width: number; height: number };
+
 export type PressableStateCallbackType = RNPressableStateCallbackType;
 export type PressableAndroidRippleConfig = RNPressableAndroidRippleConfig;
 
@@ -60,6 +63,11 @@ export interface PressableProps
    */
   onLongPress?: null | ((event: PressableEvent) => void);
 
+  /**
+   * A reference to the pressable element.
+   */
+  ref?: React.RefObject<View>;
+
   /**
    * Either children or a render prop that receives a boolean reflecting whether
    * the component is currently pressed.
@@ -158,4 +166,11 @@ export interface PressableProps
    * used with the Pressable's gesture handlers.
    */
   blocksExternalGesture?: RelationPropType;
+
+  /**
+   * Defines the dimensions of the Pressable after it's been resized.
+   * This property does not affect Pressable's physical appearance.
+   * Required when the Pressable is resized **and** uses pressRetentionOffset.
+   */
+  dimensionsAfterResize?: PressableDimensions;
 }

package/src/components/Pressable/StateMachine.tsx

@@ -0,0 +1,49 @@
+import { PressableEvent } from './PressableProps';
+
+interface StateDefinition {
+  eventName: string;
+  callback?: (event: PressableEvent) => void;
+}
+
+class PressableStateMachine {
+  private states: StateDefinition[];
+  private currentStepIndex: number;
+  private eventPayload: PressableEvent | null;
+
+  constructor(steps: StateDefinition[]) {
+    this.states = steps;
+    this.currentStepIndex = 0;
+    this.eventPayload = null;
+  }
+
+  public reset() {
+    this.currentStepIndex = 0;
+    this.eventPayload = null;
+  }
+
+  public handleEvent(eventName: string, eventPayload?: PressableEvent) {
+    const step = this.states[this.currentStepIndex];
+    this.eventPayload = eventPayload || this.eventPayload;
+
+    if (step.eventName !== eventName) {
+      if (this.currentStepIndex > 0) {
+        // retry with position at index 0
+        this.reset();
+        this.handleEvent(eventName, eventPayload);
+      }
+      return;
+    }
+
+    if (this.eventPayload && step.callback) {
+      step.callback(this.eventPayload);
+    }
+
+    this.currentStepIndex++;
+
+    if (this.currentStepIndex === this.states.length) {
+      this.reset();
+    }
+  }
+}
+
+export { PressableStateMachine };

package/src/components/Pressable/stateDefinitions.ts

@@ -0,0 +1,125 @@
+import { Platform } from 'react-native';
+import { PressableEvent } from './PressableProps';
+import { PressableStateMachine } from './StateMachine';
+
+export enum StateMachineEvent {
+  NATIVE_BEGIN = 'nativeBegin',
+  NATIVE_START = 'nativeStart',
+  FINALIZE = 'finalize',
+  LONG_PRESS_TOUCHES_DOWN = 'longPressTouchesDown',
+}
+
+function getAndroidStateMachine(
+  handlePressIn: (event: PressableEvent) => void,
+  handlePressOut: (event: PressableEvent) => void
+) {
+  return new PressableStateMachine([
+    {
+      eventName: StateMachineEvent.NATIVE_BEGIN,
+    },
+    {
+      eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
+      callback: handlePressIn,
+    },
+    {
+      eventName: StateMachineEvent.FINALIZE,
+      callback: handlePressOut,
+    },
+  ]);
+}
+
+function getIosStateMachine(
+  handlePressIn: (event: PressableEvent) => void,
+  handlePressOut: (event: PressableEvent) => void
+) {
+  return new PressableStateMachine([
+    {
+      eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
+    },
+    {
+      eventName: StateMachineEvent.NATIVE_START,
+      callback: handlePressIn,
+    },
+    {
+      eventName: StateMachineEvent.FINALIZE,
+      callback: handlePressOut,
+    },
+  ]);
+}
+
+function getWebStateMachine(
+  handlePressIn: (event: PressableEvent) => void,
+  handlePressOut: (event: PressableEvent) => void
+) {
+  return new PressableStateMachine([
+    {
+      eventName: StateMachineEvent.NATIVE_BEGIN,
+    },
+    {
+      eventName: StateMachineEvent.NATIVE_START,
+    },
+    {
+      eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
+      callback: handlePressIn,
+    },
+    {
+      eventName: StateMachineEvent.FINALIZE,
+      callback: handlePressOut,
+    },
+  ]);
+}
+
+function getMacosStateMachine(
+  handlePressIn: (event: PressableEvent) => void,
+  handlePressOut: (event: PressableEvent) => void
+) {
+  return new PressableStateMachine([
+    {
+      eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
+    },
+    {
+      eventName: StateMachineEvent.NATIVE_BEGIN,
+      callback: handlePressIn,
+    },
+    {
+      eventName: StateMachineEvent.NATIVE_START,
+    },
+    {
+      eventName: StateMachineEvent.FINALIZE,
+      callback: handlePressOut,
+    },
+  ]);
+}
+
+function getUniversalStateMachine(
+  handlePressIn: (event: PressableEvent) => void,
+  handlePressOut: (event: PressableEvent) => void
+) {
+  return new PressableStateMachine([
+    {
+      eventName: StateMachineEvent.FINALIZE,
+      callback: (event: PressableEvent) => {
+        handlePressIn(event);
+        handlePressOut(event);
+      },
+    },
+  ]);
+}
+
+export function getConfiguredStateMachine(
+  handlePressIn: (event: PressableEvent) => void,
+  handlePressOut: (event: PressableEvent) => void
+) {
+  if (Platform.OS === 'android') {
+    return getAndroidStateMachine(handlePressIn, handlePressOut);
+  } else if (Platform.OS === 'ios') {
+    return getIosStateMachine(handlePressIn, handlePressOut);
+  } else if (Platform.OS === 'web') {
+    return getWebStateMachine(handlePressIn, handlePressOut);
+  } else if (Platform.OS === 'macos') {
+    return getMacosStateMachine(handlePressIn, handlePressOut);
+  } else {
+    // Unknown platform - using minimal universal setup.
+    return getUniversalStateMachine(handlePressIn, handlePressOut);
+  }
+}

package/src/components/Pressable/utils.ts

@@ -8,7 +8,11 @@ import {
   GestureStateChangeEvent,
   GestureTouchEvent,
 } from '../../handlers/gestureHandlerCommon';
-import { InnerPressableEvent, PressableEvent } from './PressableProps';
+import {
+  PressableDimensions,
+  InnerPressableEvent,
+  PressableEvent,
+} from './PressableProps';
 
 const numberAsInset = (value: number): Insets => ({
   left: value,
@@ -59,14 +63,14 @@ const gestureToPressEvent = (
 });
 
 const isTouchWithinInset = (
-  dimensions: { width: number; height: number },
+  dimensions: PressableDimensions,
   inset: Insets,
-  touch?: TouchData
+  touch?: InnerPressableEvent
 ) =>
-  (touch?.x ?? 0) < (inset.right ?? 0) + dimensions.width &&
-  (touch?.y ?? 0) < (inset.bottom ?? 0) + dimensions.height &&
-  (touch?.x ?? 0) > -(inset.left ?? 0) &&
-  (touch?.y ?? 0) > -(inset.top ?? 0);
+  (touch?.locationX ?? 0) < (inset.right ?? 0) + dimensions.width &&
+  (touch?.locationY ?? 0) < (inset.bottom ?? 0) + dimensions.height &&
+  (touch?.locationX ?? 0) > -(inset.left ?? 0) &&
+  (touch?.locationY ?? 0) > -(inset.top ?? 0);
 
 const gestureToPressableEvent = (
   event: GestureStateChangeEvent<

package/src/handlers/GestureHandlerEventPayload.ts

@@ -7,6 +7,9 @@ export type FlingGestureHandlerEventPayload = {
   absoluteY: number;
 };
 
+/**
+ * @deprecated ForceTouch gesture is deprecated and will be removed in the future.
+ */
 export type ForceTouchGestureHandlerEventPayload = {
   x: number;
   y: number;

package/src/handlers/gestureHandlerTypesCompat.ts

@@ -46,8 +46,14 @@ export type TapGestureHandlerGestureEvent =
 export type TapGestureHandlerStateChangeEvent =
   HandlerStateChangeEvent<TapGestureHandlerEventPayload>;
 
+/**
+ * @deprecated ForceTouchGestureHandler is deprecated and will be removed in the future.
+ */
 export type ForceTouchGestureHandlerGestureEvent =
   GestureEvent<ForceTouchGestureHandlerEventPayload>;
+/**
+ * @deprecated ForceTouchGestureHandler is deprecated and will be removed in the future.
+ */
 export type ForceTouchGestureHandlerStateChangeEvent =
   HandlerStateChangeEvent<ForceTouchGestureHandlerEventPayload>;
 
@@ -84,6 +90,9 @@ export type PanGestureHandlerProperties = PanGestureHandlerProps;
 export type PinchGestureHandlerProperties = PinchGestureHandlerProps;
 export type RotationGestureHandlerProperties = RotationGestureHandlerProps;
 export type FlingGestureHandlerProperties = FlingGestureHandlerProps;
+/**
+ * @deprecated ForceTouch gesture is deprecated and will be removed in the future.
+ */
 export type ForceTouchGestureHandlerProperties = ForceTouchGestureHandlerProps;
 // Button props
 export type RawButtonProperties = RawButtonProps;

package/src/handlers/gestures/forceTouchGesture.ts

@@ -3,6 +3,9 @@ import { ForceTouchGestureConfig } from '../ForceTouchGestureHandler';
 import type { ForceTouchGestureHandlerEventPayload } from '../GestureHandlerEventPayload';
 import { GestureUpdateEvent } from '../gestureHandlerCommon';
 
+/**
+ * @deprecated ForceTouch gesture is deprecated and will be removed in the future.
+ */
 export type ForceTouchGestureChangeEventPayload = {
   forceChange: number;
 };
@@ -26,6 +29,9 @@ function changeEventCalculator(
   return { ...current, ...changePayload };
 }
 
+/**
+ * @deprecated ForceTouch gesture is deprecated and will be removed in the future.
+ */
 export class ForceTouchGesture extends ContinousBaseGesture<
   ForceTouchGestureHandlerEventPayload,
   ForceTouchGestureChangeEventPayload
@@ -83,4 +89,7 @@ export class ForceTouchGesture extends ContinousBaseGesture<
   }
 }
 
+/**
+ * @deprecated ForceTouch gesture is deprecated and will be removed in the future.
+ */
 export type ForceTouchGestureType = InstanceType<typeof ForceTouchGesture>;

package/src/handlers/gestures/gestureObjects.ts

@@ -73,7 +73,9 @@ export const GestureObjects = {
   },
 
   /**
-   * #### iOS only
+   * @deprecated ForceTouch gesture 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.
    * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/force-touch-gesture
    */

package/src/web/detectors/RotationGestureDetector.ts

@@ -42,6 +42,10 @@ export default class RotationGestureDetector
     const firstPointerCoords = tracker.getLastAbsoluteCoords(firstPointerID);
     const secondPointerCoords = tracker.getLastAbsoluteCoords(secondPointerID);
 
+    if (!firstPointerCoords || !secondPointerCoords) {
+      return;
+    }
+
     const vectorX: number = secondPointerCoords.x - firstPointerCoords.x;
     const vectorY: number = secondPointerCoords.y - firstPointerCoords.y;
 

package/src/web/handlers/FlingGestureHandler.ts

@@ -49,6 +49,10 @@ export default class FlingGestureHandler extends GestureHandler {
   private tryEndFling(): boolean {
     const velocityVector = Vector.fromVelocity(this.tracker, this.keyPointer);
 
+    if (!velocityVector) {
+      return false;
+    }
+
     const getAlignment = (
       direction: Directions | DiagonalDirections,
       minimalAlignmentCosine: number

package/src/web/handlers/GestureHandler.ts

@@ -701,9 +701,15 @@ export default abstract class GestureHandler implements IGestureHandler {
     }
 
     const rect = this.delegate.measureView();
-    const { x, y } = this.tracker.getLastAbsoluteCoords();
-    const offsetX: number = x - rect.pageX;
-    const offsetY: number = y - rect.pageY;
+
+    const lastCoords = this.tracker.getLastAbsoluteCoords();
+
+    if (!lastCoords) {
+      return false;
+    }
+
+    const offsetX: number = lastCoords.x - rect.pageX;
+    const offsetY: number = lastCoords.y - rect.pageY;
 
     return (
       offsetX >= left && offsetX <= right && offsetY >= top && offsetY <= bottom

package/src/web/handlers/PanGestureHandler.ts

@@ -218,6 +218,20 @@ export default class PanGestureHandler extends GestureHandler {
     clearTimeout(this.activationTimeout);
   }
 
+  private updateLastCoords() {
+    const { x, y } = this.tracker.getAbsoluteCoordsAverage();
+
+    this.lastX = x;
+    this.lastY = y;
+  }
+
+  private updateVelocity(pointerId: number) {
+    const velocities = this.tracker.getVelocity(pointerId);
+
+    this.velocityX = velocities?.x ?? 0;
+    this.velocityY = velocities?.y ?? 0;
+  }
+
   // Events Handling
   protected onPointerDown(event: AdaptedEvent): void {
     if (!this.isButtonInConfig(event.button)) {
@@ -229,9 +243,7 @@ export default class PanGestureHandler extends GestureHandler {
 
     super.onPointerDown(event);
 
-    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
-    this.lastX = lastCoords.x;
-    this.lastY = lastCoords.y;
+    this.updateLastCoords();
 
     this.startX = this.lastX;
     this.startY = this.lastY;
@@ -250,9 +262,7 @@ export default class PanGestureHandler extends GestureHandler {
     this.offsetX += this.lastX - this.startX;
     this.offsetY += this.lastY - this.startY;
 
-    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
-    this.lastX = lastCoords.x;
-    this.lastY = lastCoords.y;
+    this.updateLastCoords();
 
     this.startX = this.lastX;
     this.startY = this.lastY;
@@ -299,9 +309,7 @@ export default class PanGestureHandler extends GestureHandler {
     this.offsetX += this.lastX - this.startX;
     this.offsetY += this.lastY - this.startY;
 
-    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
-    this.lastX = lastCoords.x;
-    this.lastY = lastCoords.y;
+    this.updateLastCoords();
 
     this.startX = this.lastX;
     this.startY = this.lastY;
@@ -320,13 +328,8 @@ export default class PanGestureHandler extends GestureHandler {
     this.tracker.track(event);
     this.stylusData = event.stylusData;
 
-    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
-    this.lastX = lastCoords.x;
-    this.lastY = lastCoords.y;
-
-    const velocity = this.tracker.getVelocity(event.pointerId);
-    this.velocityX = velocity.x;
-    this.velocityY = velocity.y;
+    this.updateLastCoords();
+    this.updateVelocity(event.pointerId);
 
     this.checkBegan();
 
@@ -341,13 +344,8 @@ export default class PanGestureHandler extends GestureHandler {
     this.tracker.track(event);
     this.stylusData = event.stylusData;
 
-    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
-    this.lastX = lastCoords.x;
-    this.lastY = lastCoords.y;
-
-    const velocity = this.tracker.getVelocity(event.pointerId);
-    this.velocityX = velocity.x;
-    this.velocityY = velocity.y;
+    this.updateLastCoords();
+    this.updateVelocity(event.pointerId);
 
     this.checkBegan();
 
@@ -391,9 +389,7 @@ export default class PanGestureHandler extends GestureHandler {
 
       this.tracker.addToTracker(event);
 
-      const lastCoords = this.tracker.getAbsoluteCoordsAverage();
-      this.lastX = lastCoords.x;
-      this.lastY = lastCoords.y;
+      this.updateLastCoords();
 
       this.startX = this.lastX;
       this.startY = this.lastY;
@@ -403,13 +399,8 @@ export default class PanGestureHandler extends GestureHandler {
     }
     this.tracker.track(event);
 
-    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
-    this.lastX = lastCoords.x;
-    this.lastY = lastCoords.y;
-
-    const velocity = this.tracker.getVelocity(event.pointerId);
-    this.velocityX = velocity.x;
-    this.velocityY = velocity.y;
+    this.updateLastCoords();
+    this.updateVelocity(event.pointerId);
 
     this.tryToSendMoveEvent(false, event);
     this.scheduleWheelEnd(event);
@@ -540,9 +531,7 @@ export default class PanGestureHandler extends GestureHandler {
         }, this.activateAfterLongPress);
       }
     } else {
-      const velocity = this.tracker.getVelocity(event.pointerId);
-      this.velocityX = velocity.x;
-      this.velocityY = velocity.y;
+      this.updateVelocity(event.pointerId);
     }
   }
 

package/src/web/handlers/TapGestureHandler.ts

@@ -99,6 +99,13 @@ export default class TapGestureHandler extends GestureHandler {
     }
   }
 
+  private updateLastCoords() {
+    const { x, y } = this.tracker.getAbsoluteCoordsAverage();
+
+    this.lastX = x;
+    this.lastY = y;
+  }
+
   // Handling Events
   protected onPointerDown(event: AdaptedEvent): void {
     if (!this.isButtonInConfig(event.button)) {
@@ -129,12 +136,10 @@ export default class TapGestureHandler extends GestureHandler {
     this.offsetX += this.lastX - this.startX;
     this.offsetY += this.lastY - this.startY;
 
-    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
-    this.lastX = lastCoords.x;
-    this.lastY = lastCoords.y;
+    this.updateLastCoords();
 
-    this.startX = lastCoords.x;
-    this.startY = lastCoords.y;
+    this.startX = this.lastX;
+    this.startY = this.lastY;
 
     this.updateState(event);
   }
@@ -142,9 +147,7 @@ export default class TapGestureHandler extends GestureHandler {
   protected onPointerUp(event: AdaptedEvent): void {
     super.onPointerUp(event);
 
-    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
-    this.lastX = lastCoords.x;
-    this.lastY = lastCoords.y;
+    this.updateLastCoords();
 
     this.tracker.removeFromTracker(event.pointerId);
 
@@ -158,9 +161,7 @@ export default class TapGestureHandler extends GestureHandler {
     this.offsetX += this.lastX - this.startX;
     this.offsetY += this.lastY = this.startY;
 
-    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
-    this.lastX = lastCoords.x;
-    this.lastY = lastCoords.y;
+    this.updateLastCoords();
 
     this.startX = this.lastX;
     this.startY = this.lastY;
@@ -172,10 +173,7 @@ export default class TapGestureHandler extends GestureHandler {
     this.trySettingPosition(event);
     this.tracker.track(event);
 
-    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
-    this.lastX = lastCoords.x;
-    this.lastY = lastCoords.y;
-
+    this.updateLastCoords();
     this.updateState(event);
 
     super.onPointerMove(event);
@@ -185,10 +183,7 @@ export default class TapGestureHandler extends GestureHandler {
     this.trySettingPosition(event);
     this.tracker.track(event);
 
-    const lastCoords = this.tracker.getAbsoluteCoordsAverage();
-    this.lastX = lastCoords.x;
-    this.lastY = lastCoords.y;
-
+    this.updateLastCoords();
     this.updateState(event);
 
     super.onPointerOutOfBounds(event);

package/src/web/tools/GestureHandlerOrchestrator.ts

@@ -337,6 +337,7 @@ export default class GestureHandlerOrchestrator {
       const point = handler.tracker.getLastAbsoluteCoords(pointer);
 
       return (
+        point &&
         handler.delegate.isPointerInBounds(point) &&
         otherHandler.delegate.isPointerInBounds(point)
       );

package/src/web/tools/PointerEventManager.ts

@@ -98,7 +98,7 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
     // pointer moves until it succeeds.
     // God, I do love web development.
     if (
-      !target.hasPointerCapture(event.pointerId) &&
+      !target?.hasPointerCapture(event.pointerId) &&
       !POINTER_CAPTURE_EXCLUDE_LIST.has(target.tagName)
     ) {
       target.setPointerCapture(event.pointerId);

package/src/web/tools/PointerTracker.ts

@@ -61,11 +61,9 @@ export default class PointerTracker {
   }
 
   public track(event: AdaptedEvent): void {
-    const element: TrackerElement = this.trackedPointers.get(
-      event.pointerId
-    ) as TrackerElement;
+    const pointerData = this.trackedPointers.get(event.pointerId);
 
-    if (!element) {
+    if (!pointerData) {
       return;
     }
 
@@ -74,13 +72,13 @@ export default class PointerTracker {
     this.velocityTracker.add(event);
     const [velocityX, velocityY] = this.velocityTracker.velocity;
 
-    element.velocityX = velocityX;
-    element.velocityY = velocityY;
+    pointerData.velocityX = velocityX;
+    pointerData.velocityY = velocityY;
 
-    element.abosoluteCoords = { x: event.x, y: event.y };
-    element.relativeCoords = { x: event.offsetX, y: event.offsetY };
+    pointerData.abosoluteCoords = { x: event.x, y: event.y };
+    pointerData.relativeCoords = { x: event.offsetX, y: event.offsetY };
 
-    this.trackedPointers.set(event.pointerId, element);
+    this.trackedPointers.set(event.pointerId, pointerData);
 
     this.cachedAbsoluteAverages = this.getAbsoluteCoordsAverage();
     this.cachedRelativeAverages = this.getRelativeCoordsAverage();
@@ -114,20 +112,24 @@ export default class PointerTracker {
   }
 
   public getVelocity(pointerId: number) {
-    return {
-      x: this.trackedPointers.get(pointerId)?.velocityX as number,
-      y: this.trackedPointers.get(pointerId)?.velocityY as number,
-    };
+    const pointerData = this.trackedPointers.get(pointerId);
+
+    return pointerData
+      ? {
+          x: pointerData.velocityX,
+          y: pointerData.velocityY,
+        }
+      : null;
   }
 
   public getLastAbsoluteCoords(pointerId?: number) {
     return this.trackedPointers.get(pointerId ?? this.lastMovedPointerId)
-      ?.abosoluteCoords as Point;
+      ?.abosoluteCoords;
   }
 
   public getLastRelativeCoords(pointerId?: number) {
     return this.trackedPointers.get(pointerId ?? this.lastMovedPointerId)
-      ?.relativeCoords as Point;
+      ?.relativeCoords;
   }
 
   // Some handlers use these methods to send average values in native event.

package/src/web/tools/Vector.ts

@@ -27,7 +27,7 @@ export default class Vector {
 
   static fromVelocity(tracker: PointerTracker, pointerId: number) {
     const velocity = tracker.getVelocity(pointerId);
-    return new Vector(velocity.x, velocity.y);
+    return velocity ? new Vector(velocity.x, velocity.y) : null;
   }
 
   public get magnitude() {