react-native-gesture-handler 2.6.0 → 2.6.2

package/src/fabric/RNGestureHandlerButtonNativeComponent.ts

@@ -1,19 +1,9 @@
-// @ts-ignore TODO: remove once there is a .d.ts file with definitions
-import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent';
-// @ts-ignore TODO: remove once there is a .d.ts file with definitions
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type {
   Int32,
   WithDefault,
-  // @ts-ignore TODO: remove once there is a .d.ts file with definitions
 } from 'react-native/Libraries/Types/CodegenTypes';
-import type { ViewProps, HostComponent } from 'react-native';
-// @ts-ignore TODO: remove once there is a .d.ts file with definitions
-import type { ColorValue } from 'react-native/Libraries/StyleSheet/StyleSheet';
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-const codegenNativeComponent = codegenNativeComponentUntyped as <T extends {}>(
-  name: string
-) => HostComponent<T>;
+import type { ViewProps, ColorValue } from 'react-native';
 
 interface NativeProps extends ViewProps {
   exclusive?: WithDefault<boolean, true>;

package/src/fabric/RNGestureHandlerRootViewNativeComponent.ts

@@ -1,11 +1,5 @@
-// @ts-ignore TODO: remove once there is a .d.ts file with definitions
-import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent';
-import type { ViewProps, HostComponent } from 'react-native';
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-const codegenNativeComponent = codegenNativeComponentUntyped as <T extends {}>(
-  name: string
-) => HostComponent<T>;
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
 
 interface NativeProps extends ViewProps {}
 

package/src/handlers/gestures/GestureDetector.tsx

@@ -35,7 +35,7 @@ import { State } from '../../State';
 import { TouchEventType } from '../../TouchEventType';
 import { ComposedGesture } from './gestureComposition';
 import { ActionType } from '../../ActionType';
-import { isFabric, tagMessage } from '../../utils';
+import { isFabric, REACT_NATIVE_VERSION, tagMessage } from '../../utils';
 import { getShadowNodeFromRef } from '../../getShadowNodeFromRef';
 import { Platform } from 'react-native';
 import type RNGestureHandlerModuleWeb from '../../RNGestureHandlerModule.web';
@@ -152,7 +152,6 @@ function attachHandlers({
 
   for (const handler of gesture) {
     checkGestureCallbacksForWorklets(handler);
-
     RNGestureHandlerModule.createGestureHandler(
       handler.handlerName,
       handler.handlerTag,
@@ -540,8 +539,13 @@ function validateDetectorChildren(ref: any) {
   //         /       \
   //   NativeView  NativeView
   if (__DEV__ && Platform.OS !== 'web') {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-    const wrapType = ref._reactInternals.elementType;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const wrapType =
+      REACT_NATIVE_VERSION.minor > 63 || REACT_NATIVE_VERSION.major > 0
+        ? // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          ref._reactInternals.elementType
+        : // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          ref._reactInternalFiber.elementType;
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
     let instance = RNRenderer.findHostInstance_DEPRECATED(ref)
       ._internalFiberInstanceHandleDEV;

package/src/handlers/gestures/eventReceiver.ts

@@ -6,32 +6,20 @@ import {
   GestureUpdateEvent,
   GestureStateChangeEvent,
 } from '../gestureHandlerCommon';
-import { GestureStateManagerType } from './gestureStateManager';
 import { findHandler, findOldGestureHandler } from '../handlersRegistry';
 import { BaseGesture } from './gesture';
-import { tagMessage } from '../../utils';
+import {
+  GestureStateManager,
+  GestureStateManagerType,
+} from './gestureStateManager';
 
 let gestureHandlerEventSubscription: EmitterSubscription | null = null;
 let gestureHandlerStateChangeEventSubscription: EmitterSubscription | null = null;
 
-const warningMessage = tagMessage(
-  'You have to use react-native-reanimated in order to control the state of the gesture.'
-);
-
-const dummyStateManager: GestureStateManagerType = {
-  begin: () => {
-    console.warn(warningMessage);
-  },
-  activate: () => {
-    console.warn(warningMessage);
-  },
-  end: () => {
-    console.warn(warningMessage);
-  },
-  fail: () => {
-    console.warn(warningMessage);
-  },
-};
+const gestureStateManagers: Map<number, GestureStateManagerType> = new Map<
+  number,
+  GestureStateManagerType
+>();
 
 const lastUpdateEvent: (GestureUpdateEvent | undefined)[] = [];
 
@@ -83,21 +71,32 @@ export function onGestureHandlerEvent(
           handler.handlers.onEnd?.(event, false);
         }
         handler.handlers.onFinalize?.(event, false);
+        gestureStateManagers.delete(event.handlerTag);
         lastUpdateEvent[handler.handlers.handlerTag] = undefined;
       }
     } else if (isTouchEvent(event)) {
+      if (!gestureStateManagers.has(event.handlerTag)) {
+        gestureStateManagers.set(
+          event.handlerTag,
+          GestureStateManager.create(event.handlerTag)
+        );
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const manager = gestureStateManagers.get(event.handlerTag)!;
+
       switch (event.eventType) {
         case TouchEventType.TOUCHES_DOWN:
-          handler.handlers?.onTouchesDown?.(event, dummyStateManager);
+          handler.handlers?.onTouchesDown?.(event, manager);
           break;
         case TouchEventType.TOUCHES_MOVE:
-          handler.handlers?.onTouchesMove?.(event, dummyStateManager);
+          handler.handlers?.onTouchesMove?.(event, manager);
           break;
         case TouchEventType.TOUCHES_UP:
-          handler.handlers?.onTouchesUp?.(event, dummyStateManager);
+          handler.handlers?.onTouchesUp?.(event, manager);
           break;
         case TouchEventType.TOUCHES_CANCELLED:
-          handler.handlers?.onTouchesCancelled?.(event, dummyStateManager);
+          handler.handlers?.onTouchesCancelled?.(event, manager);
           break;
       }
     } else {

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

@@ -0,0 +1,24 @@
+import NodeManager from '../../web/tools/NodeManager';
+import { GestureStateManagerType } from './gestureStateManager';
+
+export const GestureStateManager = {
+  create(handlerTag: number): GestureStateManagerType {
+    return {
+      begin: () => {
+        NodeManager.getHandler(handlerTag).begin();
+      },
+
+      activate: () => {
+        NodeManager.getHandler(handlerTag).activate();
+      },
+
+      fail: () => {
+        NodeManager.getHandler(handlerTag).fail();
+      },
+
+      end: () => {
+        NodeManager.getHandler(handlerTag).end();
+      },
+    };
+  },
+};

package/src/utils.ts

@@ -1,6 +1,10 @@
 import pack from 'react-native/package.json';
 
-const rnVersion = pack.version;
+const [majorStr, minorStr] = pack.version.split('.');
+export const REACT_NATIVE_VERSION = {
+  major: parseInt(majorStr, 10),
+  minor: parseInt(minorStr, 10),
+};
 
 export function toArray<T>(object: T | T[]): T[] {
   if (!Array.isArray(object)) {
@@ -52,12 +56,8 @@ export function isFabric(): boolean {
 }
 
 export function shouldUseCodegenNativeComponent(): boolean {
-  const [majorStr, minorStr] = rnVersion.split('.');
-  const major = Number.parseInt(majorStr);
-  const minor = Number.parseInt(minorStr);
-
   // use codegenNativeComponent starting with RN 0.68
-  return minor >= 68 || major > 0;
+  return REACT_NATIVE_VERSION.minor >= 68 || REACT_NATIVE_VERSION.major > 0;
 }
 
 export function isRemoteDebuggingEnabled(): boolean {

package/src/web/detectors/RotationGestureDetector.ts

@@ -1,29 +1,17 @@
-import { AdaptedPointerEvent, EventTypes } from '../interfaces';
+import { AdaptedEvent, EventTypes } from '../interfaces';
 import PointerTracker from '../tools/PointerTracker';
 
 export interface RotationGestureListener {
   onRotationBegin: (detector: RotationGestureDetector) => boolean;
-  onRotation: (
-    detector: RotationGestureDetector,
-    event: AdaptedPointerEvent
-  ) => boolean;
-  onRotationEnd: (
-    detector: RotationGestureDetector,
-    event: AdaptedPointerEvent
-  ) => void;
+  onRotation: (detector: RotationGestureDetector) => boolean;
+  onRotationEnd: (detector: RotationGestureDetector) => void;
 }
 
 export default class RotationGestureDetector
   implements RotationGestureListener {
   onRotationBegin: (detector: RotationGestureDetector) => boolean;
-  onRotation: (
-    detector: RotationGestureDetector,
-    event: AdaptedPointerEvent
-  ) => boolean;
-  onRotationEnd: (
-    detector: RotationGestureDetector,
-    event: AdaptedPointerEvent
-  ) => void;
+  onRotation: (detector: RotationGestureDetector) => boolean;
+  onRotationEnd: (detector: RotationGestureDetector) => void;
 
   private currentTime = 0;
   private previousTime = 0;
@@ -44,10 +32,7 @@ export default class RotationGestureDetector
     this.onRotationEnd = callbacks.onRotationEnd;
   }
 
-  private updateCurrent(
-    event: AdaptedPointerEvent,
-    tracker: PointerTracker
-  ): void {
+  private updateCurrent(event: AdaptedEvent, tracker: PointerTracker): void {
     this.previousTime = this.currentTime;
     this.currentTime = event.time;
 
@@ -66,6 +51,7 @@ export default class RotationGestureDetector
 
     //Angle diff should be positive when rotating in clockwise direction
     const angle: number = -Math.atan2(vectorY, vectorX);
+
     this.rotation = Number.isNaN(this.previousAngle)
       ? 0
       : this.previousAngle - angle;
@@ -85,14 +71,14 @@ export default class RotationGestureDetector
     }
   }
 
-  private finish(event: AdaptedPointerEvent): void {
+  private finish(): void {
     if (!this.isInProgress) {
       return;
     }
 
     this.isInProgress = false;
     this.keyPointers = [NaN, NaN];
-    this.onRotationEnd(this, event);
+    this.onRotationEnd(this);
   }
 
   private setKeyPointers(tracker: PointerTracker): void {
@@ -106,12 +92,7 @@ export default class RotationGestureDetector
     this.keyPointers[1] = pointerIDs.next().value as number;
   }
 
-  public onTouchEvent(
-    event: AdaptedPointerEvent,
-    tracker: PointerTracker
-  ): boolean {
-    this.adaptEvent(event, tracker);
-
+  public onTouchEvent(event: AdaptedEvent, tracker: PointerTracker): boolean {
     switch (event.eventType) {
       case EventTypes.DOWN:
         this.isInProgress = false;
@@ -121,7 +102,6 @@ export default class RotationGestureDetector
         if (this.isInProgress) {
           break;
         }
-
         this.isInProgress = true;
 
         this.previousTime = event.time;
@@ -139,7 +119,7 @@ export default class RotationGestureDetector
         }
 
         this.updateCurrent(event, tracker);
-        this.onRotation(this, event);
+        this.onRotation(this);
 
         break;
 
@@ -149,38 +129,21 @@ export default class RotationGestureDetector
         }
 
         if (this.keyPointers.indexOf(event.pointerId) >= 0) {
-          this.finish(event);
+          this.finish();
         }
 
         break;
 
       case EventTypes.UP:
-        this.finish(event);
+        if (this.isInProgress) {
+          this.finish();
+        }
         break;
     }
 
     return true;
   }
 
-  private adaptEvent(
-    event: AdaptedPointerEvent,
-    tracker: PointerTracker
-  ): void {
-    if (
-      tracker.getTrackedPointersCount() &&
-      event.eventType === EventTypes.DOWN
-    ) {
-      event.eventType = EventTypes.ADDITIONAL_POINTER_DOWN;
-    }
-
-    if (
-      tracker.getTrackedPointersCount() > 1 &&
-      event.eventType === EventTypes.UP
-    ) {
-      event.eventType = EventTypes.ADDITIONAL_POINTER_UP;
-    }
-  }
-
   public getTimeDelta(): number {
     return this.currentTime + this.previousTime;
   }
@@ -196,4 +159,9 @@ export default class RotationGestureDetector
   public getRotation(): number {
     return this.rotation;
   }
+
+  public reset(): void {
+    this.keyPointers = [NaN, NaN];
+    this.isInProgress = false;
+  }
 }

package/src/web/detectors/ScaleGestureDetector.ts

@@ -1,30 +1,18 @@
 import { DEFAULT_TOUCH_SLOP } from '../constants';
-import { AdaptedPointerEvent, EventTypes } from '../interfaces';
+import { AdaptedEvent, EventTypes } from '../interfaces';
 
 import PointerTracker from '../tools/PointerTracker';
 
 export interface ScaleGestureListener {
   onScaleBegin: (detector: ScaleGestureDetector) => boolean;
-  onScale: (
-    detector: ScaleGestureDetector,
-    event: AdaptedPointerEvent
-  ) => boolean;
-  onScaleEnd: (
-    detector: ScaleGestureDetector,
-    event: AdaptedPointerEvent
-  ) => void;
+  onScale: (detector: ScaleGestureDetector) => boolean;
+  onScaleEnd: (detector: ScaleGestureDetector) => void;
 }
 
 export default class ScaleGestureDetector implements ScaleGestureListener {
   public onScaleBegin: (detector: ScaleGestureDetector) => boolean;
-  public onScale: (
-    detector: ScaleGestureDetector,
-    event: AdaptedPointerEvent
-  ) => boolean;
-  public onScaleEnd: (
-    detector: ScaleGestureDetector,
-    event: AdaptedPointerEvent
-  ) => void;
+  public onScale: (detector: ScaleGestureDetector) => boolean;
+  public onScaleEnd: (detector: ScaleGestureDetector) => void;
 
   private focusX!: number;
   private focusY!: number;
@@ -50,12 +38,7 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
     this.minSpan = 0;
   }
 
-  public onTouchEvent(
-    event: AdaptedPointerEvent,
-    tracker: PointerTracker
-  ): boolean {
-    this.adaptEvent(event, tracker);
-
+  public onTouchEvent(event: AdaptedEvent, tracker: PointerTracker): boolean {
     this.currentTime = event.time;
 
     const action: EventTypes = event.eventType;
@@ -68,7 +51,7 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
 
     if (action === EventTypes.DOWN || streamComplete) {
       if (this.inProgress) {
-        this.onScaleEnd(this, event);
+        this.onScaleEnd(this);
         this.inProgress = false;
         this.initialSpan = 0;
       }
@@ -127,7 +110,7 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
     this.focusY = focusY;
 
     if (this.inProgress && (span < this.minSpan || configChanged)) {
-      this.onScaleEnd(this, event);
+      this.onScaleEnd(this);
       this.inProgress = false;
       this.initialSpan = span;
     }
@@ -153,7 +136,7 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
 
     this.currentSpan = span;
 
-    if (this.inProgress && !this.onScale(this, event)) {
+    if (this.inProgress && !this.onScale(this)) {
       return true;
     }
 
@@ -163,25 +146,6 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
     return true;
   }
 
-  private adaptEvent(
-    event: AdaptedPointerEvent,
-    tracker: PointerTracker
-  ): void {
-    if (
-      tracker.getTrackedPointersCount() > 1 &&
-      event.eventType === EventTypes.DOWN
-    ) {
-      event.eventType = EventTypes.ADDITIONAL_POINTER_DOWN;
-    }
-
-    if (
-      tracker.getTrackedPointersCount() > 1 &&
-      event.eventType === EventTypes.UP
-    ) {
-      event.eventType = EventTypes.ADDITIONAL_POINTER_UP;
-    }
-  }
-
   public getCurrentSpan(): number {
     return this.currentSpan;
   }

package/src/web/handlers/FlingGestureHandler.ts

@@ -1,6 +1,6 @@
 import { State } from '../../State';
 import { Direction } from '../constants';
-import { AdaptedPointerEvent } from '../interfaces';
+import { AdaptedEvent, Config } from '../interfaces';
 
 import GestureHandler from './GestureHandler';
 
@@ -26,7 +26,7 @@ export default class FlingGestureHandler extends GestureHandler {
     super.init(ref, propsRef);
   }
 
-  public updateGestureConfig({ enabled = true, ...props }): void {
+  public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
 
     this.enabled = enabled;
@@ -40,27 +40,29 @@ export default class FlingGestureHandler extends GestureHandler {
     }
   }
 
-  protected transformNativeEvent(event: AdaptedPointerEvent) {
+  protected transformNativeEvent() {
+    const rect: DOMRect = this.view.getBoundingClientRect();
+
     return {
-      x: event.offsetX,
-      y: event.offsetY,
-      absoluteX: event.x,
-      absoluteY: event.y,
+      x: this.tracker.getLastAvgX() - rect.left,
+      y: this.tracker.getLastAvgY() - rect.top,
+      absoluteX: this.tracker.getLastAvgX(),
+      absoluteY: this.tracker.getLastAvgY(),
     };
   }
 
-  private startFling(event: AdaptedPointerEvent): void {
+  private startFling(event: AdaptedEvent): void {
     this.startX = event.x;
     this.startY = event.y;
 
-    this.begin(event);
+    this.begin();
 
     this.maxNumberOfPointersSimultaneously = 1;
 
-    this.delayTimeout = setTimeout(() => this.fail(event), this.maxDurationMs);
+    this.delayTimeout = setTimeout(() => this.fail(), this.maxDurationMs);
   }
 
-  private tryEndFling(event: AdaptedPointerEvent): boolean {
+  private tryEndFling(event: AdaptedEvent): boolean {
     if (
       this.maxNumberOfPointersSimultaneously ===
         this.numberOfPointersRequired &&
@@ -74,7 +76,7 @@ export default class FlingGestureHandler extends GestureHandler {
           event.y - this.startY > this.minAcceptableDelta))
     ) {
       clearTimeout(this.delayTimeout);
-      this.activate(event);
+      this.activate();
 
       return true;
     }
@@ -82,17 +84,25 @@ export default class FlingGestureHandler extends GestureHandler {
     return false;
   }
 
-  private endFling(event: AdaptedPointerEvent) {
+  private endFling(event: AdaptedEvent) {
     if (!this.tryEndFling(event)) {
-      this.fail(event);
+      this.fail();
     }
   }
 
-  protected onPointerDown(event: AdaptedPointerEvent): void {
+  protected onPointerDown(event: AdaptedEvent): void {
+    this.tracker.addToTracker(event);
     super.onPointerDown(event);
+    this.newPointerAction(event);
+  }
 
+  protected onPointerAdd(event: AdaptedEvent): void {
     this.tracker.addToTracker(event);
+    super.onPointerAdd(event);
+    this.newPointerAction(event);
+  }
 
+  private newPointerAction(event: AdaptedEvent): void {
     if (this.currentState === State.UNDETERMINED) {
       this.startFling(event);
     }
@@ -111,7 +121,7 @@ export default class FlingGestureHandler extends GestureHandler {
     }
   }
 
-  protected onPointerMove(event: AdaptedPointerEvent): void {
+  protected onPointerMove(event: AdaptedEvent): void {
     this.tracker.track(event);
 
     if (this.currentState !== State.BEGAN) {
@@ -123,19 +133,32 @@ export default class FlingGestureHandler extends GestureHandler {
     super.onPointerMove(event);
   }
 
-  protected onPointerUp(event: AdaptedPointerEvent): void {
-    this.tracker.removeFromTracker(event.pointerId);
+  protected onPointerUp(event: AdaptedEvent): void {
+    super.onPointerUp(event);
+    this.onUp(event);
+  }
 
+  protected onPointerRemove(event: AdaptedEvent): void {
+    super.onPointerRemove(event);
+    this.onUp(event);
+  }
+
+  private onUp(event: AdaptedEvent): void {
+    this.tracker.removeFromTracker(event.pointerId);
     if (this.currentState !== State.BEGAN) {
       return;
     }
-
     this.endFling(event);
   }
 
-  protected activate(event: AdaptedPointerEvent, force?: boolean): void {
-    super.activate(event, force);
-    this.end(event);
+  protected onPointerCancel(event: AdaptedEvent): void {
+    super.onPointerCancel(event);
+    this.reset();
+  }
+
+  public activate(force?: boolean): void {
+    super.activate(force);
+    this.end();
   }
 
   protected resetConfig(): void {