react-native-gesture-handler 2.22.1 → 2.23.1

package/src/handlers/PinchGestureHandler.ts

@@ -5,12 +5,22 @@ import {
   baseGestureHandlerProps,
 } from './gestureHandlerCommon';
 
+/**
+ * @deprecated PinchGestureHandler will be removed in the future version of Gesture Handler. Use `Gesture.Pinch()` instead.
+ */
 export interface PinchGestureHandlerProps
   extends BaseGestureHandlerProps<PinchGestureHandlerEventPayload> {}
 
 export const pinchHandlerName = 'PinchGestureHandler';
 
+/**
+ * @deprecated PinchGestureHandler will be removed in the future version of Gesture Handler. Use `Gesture.Pinch()` instead.
+ */
 export type PinchGestureHandler = typeof PinchGestureHandler;
+
+/**
+ * @deprecated PinchGestureHandler will be removed in the future version of Gesture Handler. Use `Gesture.Pinch()` instead.
+ */
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const PinchGestureHandler = createHandler<
   PinchGestureHandlerProps,

package/src/handlers/RotationGestureHandler.ts

@@ -5,12 +5,22 @@ import {
   baseGestureHandlerProps,
 } from './gestureHandlerCommon';
 
+/**
+ * @deprecated RotationGestureHandler will be removed in the future version of Gesture Handler. Use `Gesture.Rotation()` instead.
+ */
 export interface RotationGestureHandlerProps
   extends BaseGestureHandlerProps<RotationGestureHandlerEventPayload> {}
 
 export const rotationHandlerName = 'RotationGestureHandler';
 
+/**
+ * @deprecated RotationGestureHandler will be removed in the future version of Gesture Handler. Use `Gesture.Rotation()` instead.
+ */
 export type RotationGestureHandler = typeof RotationGestureHandler;
+
+/**
+ * @deprecated RotationGestureHandler will be removed in the future version of Gesture Handler. Use `Gesture.Rotation()` instead.
+ */
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const RotationGestureHandler = createHandler<
   RotationGestureHandlerProps,

package/src/handlers/TapGestureHandler.ts

@@ -66,13 +66,23 @@ export interface TapGestureConfig {
   maxDist?: number;
 }
 
+/**
+ * @deprecated TapGestureHandler will be removed in the future version of Gesture Handler. Use `Gesture.Tap()` instead.
+ */
 export interface TapGestureHandlerProps
   extends BaseGestureHandlerProps<TapGestureHandlerEventPayload>,
     TapGestureConfig {}
 
 export const tapHandlerName = 'TapGestureHandler';
 
+/**
+ * @deprecated TapGestureHandler will be removed in the future version of Gesture Handler. Use `Gesture.Tap()` instead.
+ */
 export type TapGestureHandler = typeof TapGestureHandler;
+
+/**
+ * @deprecated TapGestureHandler will be removed in the future version of Gesture Handler. Use `Gesture.Tap()` instead.
+ */
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const TapGestureHandler = createHandler<
   TapGestureHandlerProps,

package/src/handlers/createHandler.tsx

@@ -8,7 +8,11 @@ import {
 import { customDirectEventTypes } from './customDirectEventTypes';
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
 import { State } from '../State';
-import { handlerIDToTag, registerOldGestureHandler } from './handlersRegistry';
+import {
+  handlerIDToTag,
+  registerOldGestureHandler,
+  unregisterOldGestureHandler,
+} from './handlersRegistry';
 import { getNextHandlerTag } from './getNextHandlerTag';
 
 import {
@@ -19,7 +23,7 @@ import {
 import { filterConfig, scheduleFlushOperations } from './utils';
 import findNodeHandle from '../findNodeHandle';
 import { ValueOf } from '../typeUtils';
-import { deepEqual, isFabric, isJestEnv, tagMessage } from '../utils';
+import { deepEqual, isFabric, isTestEnv, tagMessage } from '../utils';
 import { ActionType } from '../ActionType';
 import { PressabilityDebugView } from './PressabilityDebugView';
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
@@ -255,6 +259,9 @@ export default function createHandler<
     componentWillUnmount() {
       this.inspectorToggleListener?.remove();
       this.isMountedRef.current = false;
+      if (Platform.OS !== 'web') {
+        unregisterOldGestureHandler(this.handlerTag);
+      }
       RNGestureHandlerModule.dropGestureHandler(this.handlerTag);
       scheduleFlushOperations();
       // We can't use this.props.id directly due to TS generic type narrowing bug, see https://github.com/microsoft/TypeScript/issues/13995 for more context
@@ -428,7 +435,7 @@ export default function createHandler<
     }
 
     render() {
-      if (__DEV__ && !this.context && !isJestEnv() && Platform.OS !== 'web') {
+      if (__DEV__ && !this.context && !isTestEnv() && Platform.OS !== 'web') {
         throw new Error(
           name +
             ' must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.'
@@ -539,7 +546,7 @@ export default function createHandler<
         {
           ref: this.refHandler,
           collapsable: false,
-          ...(isJestEnv()
+          ...(isTestEnv()
             ? {
                 handlerType: name,
                 handlerTag: this.handlerTag,

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

@@ -11,7 +11,7 @@ import findNodeHandle from '../../../findNodeHandle';
 import { GestureType } from '../gesture';
 import { UserSelect, TouchAction } from '../../gestureHandlerCommon';
 import { ComposedGesture } from '../gestureComposition';
-import { isJestEnv } from '../../../utils';
+import { isTestEnv } from '../../../utils';
 
 import GestureHandlerRootViewContext from '../../../GestureHandlerRootViewContext';
 import { AttachedGestureState, GestureDetectorState } from './types';
@@ -94,7 +94,7 @@ interface GestureDetectorProps {
  */
 export const GestureDetector = (props: GestureDetectorProps) => {
   const rootViewContext = useContext(GestureHandlerRootViewContext);
-  if (__DEV__ && !rootViewContext && !isJestEnv() && Platform.OS !== 'web') {
+  if (__DEV__ && !rootViewContext && !isTestEnv() && Platform.OS !== 'web') {
     throw new Error(
       'GestureDetector must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.'
     );

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

@@ -6,7 +6,7 @@ import React, { useCallback } from 'react';
 import findNodeHandle from '../../../findNodeHandle';
 
 declare const global: {
-  isFormsStackingContext: (node: unknown) => boolean | null; // JSI function
+  isViewFlatteningDisabled: (node: unknown) => boolean | null; // JSI function
 };
 
 // Ref handler for the Wrap component attached under the GestureDetector.
@@ -35,9 +35,9 @@ export function useViewRefHandler(
         updateAttachedGestures(true);
       }
 
-      if (__DEV__ && isFabric() && global.isFormsStackingContext) {
+      if (__DEV__ && isFabric() && global.isViewFlatteningDisabled) {
         const node = getShadowNodeFromRef(ref);
-        if (global.isFormsStackingContext(node) === false) {
+        if (global.isViewFlatteningDisabled(node) === false) {
           console.error(
             tagMessage(
               'GestureDetector has received a child that may get view-flattened. ' +

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

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native';
 
-import { isJestEnv, tagMessage } from '../../../utils';
+import { isTestEnv, tagMessage } from '../../../utils';
 import { GestureRef, BaseGesture, GestureType } from '../gesture';
 
 import { flingGestureHandlerProps } from '../../FlingGestureHandler';
@@ -100,7 +100,7 @@ export function checkGestureCallbacksForWorklets(gesture: GestureType) {
   const areAllNotWorklets = !areSomeWorklets && areSomeNotWorklets;
   // If none of the callbacks are worklets and the gesture is not explicitly marked with
   // `.runOnJS(true)` show a warning
-  if (areAllNotWorklets && !isJestEnv()) {
+  if (areAllNotWorklets && !isTestEnv()) {
     console.warn(
       tagMessage(
         `None of the callbacks in the gesture are worklets. If you wish to run them on the JS thread use '.runOnJS(true)' modifier on the gesture to make this explicit. Otherwise, mark the callbacks as 'worklet' to run them on the UI thread.`

package/src/handlers/handlersRegistry.ts

@@ -1,4 +1,4 @@
-import { isJestEnv } from '../utils';
+import { isTestEnv } from '../utils';
 import { GestureType } from './gestures/gesture';
 import { GestureEvent, HandlerStateChangeEvent } from './gestureHandlerCommon';
 
@@ -13,7 +13,7 @@ export function registerHandler(
   testID?: string
 ) {
   gestures.set(handlerTag, handler);
-  if (isJestEnv() && testID) {
+  if (isTestEnv() && testID) {
     testIDs.set(testID, handlerTag);
   }
 }
@@ -25,9 +25,13 @@ export function registerOldGestureHandler(
   oldHandlers.set(handlerTag, handler);
 }
 
+export function unregisterOldGestureHandler(handlerTag: number) {
+  oldHandlers.delete(handlerTag);
+}
+
 export function unregisterHandler(handlerTag: number, testID?: string) {
   gestures.delete(handlerTag);
-  if (isJestEnv() && testID) {
+  if (isTestEnv() && testID) {
     testIDs.delete(testID);
   }
 }

package/src/index.ts

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

package/src/utils.ts

@@ -34,9 +34,9 @@ export function hasProperty(object: object, key: string) {
   return Object.prototype.hasOwnProperty.call(object, key);
 }
 
-export function isJestEnv(): boolean {
+export function isTestEnv(): boolean {
   // @ts-ignore Do not use `@types/node` because it will prioritise Node types over RN types which breaks the types (ex. setTimeout) in React Native projects.
-  return hasProperty(global, 'process') && !!process.env.JEST_WORKER_ID;
+  return hasProperty(global, 'process') && process.env.NODE_ENV === 'test';
 }
 
 export function tagMessage(msg: string) {

package/src/web/detectors/RotationGestureDetector.ts

@@ -18,10 +18,10 @@ export default class RotationGestureDetector
   private previousTime = 0;
 
   private previousAngle = 0;
-  private rotation = 0;
+  private _rotation = 0;
 
-  private anchorX = 0;
-  private anchorY = 0;
+  private _anchorX = 0;
+  private _anchorY = 0;
 
   private isInProgress = false;
 
@@ -45,28 +45,28 @@ export default class RotationGestureDetector
     const vectorX: number = secondPointerCoords.x - firstPointerCoords.x;
     const vectorY: number = secondPointerCoords.y - firstPointerCoords.y;
 
-    this.anchorX = (firstPointerCoords.x + secondPointerCoords.x) / 2;
-    this.anchorY = (firstPointerCoords.y + secondPointerCoords.y) / 2;
+    this._anchorX = (firstPointerCoords.x + secondPointerCoords.x) / 2;
+    this._anchorY = (firstPointerCoords.y + secondPointerCoords.y) / 2;
 
     // Angle diff should be positive when rotating in clockwise direction
     const angle: number = -Math.atan2(vectorY, vectorX);
 
-    this.rotation = Number.isNaN(this.previousAngle)
+    this._rotation = Number.isNaN(this.previousAngle)
       ? 0
       : this.previousAngle - angle;
 
     this.previousAngle = angle;
 
     if (this.rotation > Math.PI) {
-      this.rotation -= Math.PI;
+      this._rotation -= Math.PI;
     } else if (this.rotation < -Math.PI) {
-      this.rotation += Math.PI;
+      this._rotation += Math.PI;
     }
 
     if (this.rotation > Math.PI / 2) {
-      this.rotation -= Math.PI;
+      this._rotation -= Math.PI;
     } else if (this.rotation < -Math.PI / 2) {
-      this.rotation += Math.PI;
+      this._rotation += Math.PI;
     }
   }
 
@@ -85,7 +85,7 @@ export default class RotationGestureDetector
       return;
     }
 
-    const pointerIDs: IterableIterator<number> = tracker.getData().keys();
+    const pointerIDs: IterableIterator<number> = tracker.trackedPointers.keys();
 
     this.keyPointers[0] = pointerIDs.next().value as number;
     this.keyPointers[1] = pointerIDs.next().value as number;
@@ -143,24 +143,24 @@ export default class RotationGestureDetector
     return true;
   }
 
-  public getTimeDelta(): number {
-    return this.currentTime + this.previousTime;
+  public reset(): void {
+    this.keyPointers = [NaN, NaN];
+    this.isInProgress = false;
   }
 
-  public getAnchorX(): number {
-    return this.anchorX;
+  public get anchorX() {
+    return this._anchorX;
   }
 
-  public getAnchorY(): number {
-    return this.anchorY;
+  public get anchorY() {
+    return this._anchorY;
   }
 
-  public getRotation(): number {
-    return this.rotation;
+  public get rotation() {
+    return this._rotation;
   }
 
-  public reset(): void {
-    this.keyPointers = [NaN, NaN];
-    this.isInProgress = false;
+  public get timeDelta() {
+    return this.currentTime + this.previousTime;
   }
 }

package/src/web/detectors/ScaleGestureDetector.ts

@@ -14,10 +14,10 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
   public onScale: (detector: ScaleGestureDetector) => boolean;
   public onScaleEnd: (detector: ScaleGestureDetector) => void;
 
-  private focusX!: number;
-  private focusY!: number;
+  private _focusX!: number;
+  private _focusY!: number;
 
-  private currentSpan!: number;
+  private _currentSpan!: number;
   private prevSpan!: number;
   private initialSpan!: number;
 
@@ -42,7 +42,7 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
     this.currentTime = event.time;
 
     const action: EventTypes = event.eventType;
-    const numOfPointers = tracker.getTrackedPointersCount();
+    const numOfPointers = tracker.trackedPointersCount;
 
     const streamComplete: boolean =
       action === EventTypes.UP ||
@@ -86,7 +86,7 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
     let devSumX = 0;
     let devSumY = 0;
 
-    tracker.getData().forEach((value, key) => {
+    tracker.trackedPointers.forEach((value, key) => {
       if (key === ignoredPointer) {
         return;
       }
@@ -105,8 +105,8 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
 
     // Begin/end events
     const wasInProgress: boolean = this.inProgress;
-    this.focusX = focusX;
-    this.focusY = focusY;
+    this._focusX = focusX;
+    this._focusY = focusY;
 
     if (this.inProgress && (span < this.minSpan || configChanged)) {
       this.onScaleEnd(this);
@@ -115,7 +115,7 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
     }
 
     if (configChanged) {
-      this.initialSpan = this.prevSpan = this.currentSpan = span;
+      this.initialSpan = this.prevSpan = this._currentSpan = span;
     }
 
     if (
@@ -123,7 +123,7 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
       span >= this.minSpan &&
       (wasInProgress || Math.abs(span - this.initialSpan) > this.spanSlop)
     ) {
-      this.prevSpan = this.currentSpan = span;
+      this.prevSpan = this._currentSpan = span;
       this.prevTime = this.currentTime;
       this.inProgress = this.onScaleBegin(this);
     }
@@ -133,7 +133,7 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
       return true;
     }
 
-    this.currentSpan = span;
+    this._currentSpan = span;
 
     if (this.inProgress && !this.onScale(this)) {
       return true;
@@ -145,27 +145,27 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
     return true;
   }
 
-  public getCurrentSpan(): number {
-    return this.currentSpan;
-  }
+  public calculateScaleFactor(numOfPointers: number): number {
+    if (numOfPointers < 2) {
+      return 1;
+    }
 
-  public getFocusX(): number {
-    return this.focusX;
+    return this.prevSpan > 0 ? this.currentSpan / this.prevSpan : 1;
   }
 
-  public getFocusY(): number {
-    return this.focusY;
+  public get currentSpan() {
+    return this._currentSpan;
   }
 
-  public getTimeDelta(): number {
-    return this.currentTime - this.prevTime;
+  public get focusX() {
+    return this._focusX;
   }
 
-  public getScaleFactor(numOfPointers: number): number {
-    if (numOfPointers < 2) {
-      return 1;
-    }
+  public get focusY() {
+    return this._focusY;
+  }
 
-    return this.prevSpan > 0 ? this.currentSpan / this.prevSpan : 1;
+  public get timeDelta() {
+    return this.currentTime - this.prevTime;
   }
 }

package/src/web/handlers/FlingGestureHandler.ts

@@ -121,29 +121,28 @@ export default class FlingGestureHandler extends GestureHandler {
   }
 
   private newPointerAction(): void {
-    if (this.currentState === State.UNDETERMINED) {
+    if (this.state === State.UNDETERMINED) {
       this.startFling();
     }
 
-    if (this.currentState !== State.BEGAN) {
+    if (this.state !== State.BEGAN) {
       return;
     }
 
     this.tryEndFling();
 
     if (
-      this.tracker.getTrackedPointersCount() >
-      this.maxNumberOfPointersSimultaneously
+      this.tracker.trackedPointersCount > this.maxNumberOfPointersSimultaneously
     ) {
       this.maxNumberOfPointersSimultaneously =
-        this.tracker.getTrackedPointersCount();
+        this.tracker.trackedPointersCount;
     }
   }
 
   private pointerMoveAction(event: AdaptedEvent): void {
     this.tracker.track(event);
 
-    if (this.currentState !== State.BEGAN) {
+    if (this.state !== State.BEGAN) {
       return;
     }
 
@@ -173,7 +172,7 @@ export default class FlingGestureHandler extends GestureHandler {
   }
 
   private onUp(event: AdaptedEvent): void {
-    if (this.currentState === State.BEGAN) {
+    if (this.state === State.BEGAN) {
       this.endFling();
     }