react-native-gesture-handler 2.9.0 → 2.10.0

package/src/handlers/gestures/GestureDetector.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import {
   GestureType,
   HandlerCallbacks,
@@ -42,7 +42,9 @@ import { Platform } from 'react-native';
 import type RNGestureHandlerModuleWeb from '../../RNGestureHandlerModule.web';
 import { onGestureHandlerEvent } from './eventReceiver';
 import { RNRenderer } from '../../RNRenderer';
-import { isExperimentalWebImplementationEnabled } from '../../EnableExperimentalWebImplementation';
+import { isNewWebImplementationEnabled } from '../../EnableNewWebImplementation';
+import { nativeViewGestureHandlerProps } from '../NativeViewGestureHandler';
+import GestureHandlerRootViewContext from '../../GestureHandlerRootViewContext';
 
 declare const global: {
   isFormsStackingContext: (node: unknown) => boolean | null; // JSI function
@@ -56,6 +58,7 @@ const ALLOWED_PROPS = [
   ...longPressGestureHandlerProps,
   ...forceTouchGestureHandlerProps,
   ...flingGestureHandlerProps,
+  ...nativeViewGestureHandlerProps,
 ];
 
 export type GestureConfigReference = {
@@ -147,9 +150,9 @@ function attachHandlers({
     preparedGesture.firstExecution = false;
   }
 
-  // use setImmediate to extract handlerTags, because all refs should be initialized
+  // use queueMicrotask to extract handlerTags, because all refs should be initialized
   // when it's ran
-  setImmediate(() => {
+  queueMicrotask(() => {
     if (!mountedRef.current) {
       return;
     }
@@ -167,9 +170,9 @@ function attachHandlers({
     registerHandler(handler.handlerTag, handler, handler.config.testId);
   }
 
-  // use setImmediate to extract handlerTags, because all refs should be initialized
+  // use queueMicrotask to extract handlerTags, because all refs should be initialized
   // when it's ran
-  setImmediate(() => {
+  queueMicrotask(() => {
     if (!mountedRef.current) {
       return;
     }
@@ -254,10 +257,10 @@ function updateHandlers(
     }
   }
 
-  // use setImmediate to extract handlerTags, because when it's ran, all refs should be updated
+  // use queueMicrotask to extract handlerTags, because when it's ran, all refs should be updated
   // and handlerTags in BaseGesture references should be updated in the loop above (we need to wait
   // in case of external relations)
-  setImmediate(() => {
+  queueMicrotask(() => {
     if (!mountedRef.current) {
       return;
     }
@@ -603,6 +606,13 @@ interface GestureDetectorState {
   forceReattach: boolean;
 }
 export const GestureDetector = (props: GestureDetectorProps) => {
+  const rootViewContext = useContext(GestureHandlerRootViewContext);
+  if (__DEV__ && !rootViewContext) {
+    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.'
+    );
+  }
+
   const gestureConfig = props.gesture;
 
   if (props.userSelect) {
@@ -624,7 +634,7 @@ export const GestureDetector = (props: GestureDetectorProps) => {
     onGestureHandlerEvent: (e: HandlerStateChangeEvent<unknown>) => {
       onGestureHandlerEvent(e.nativeEvent);
     },
-    onGestureHandlerStateChange: isExperimentalWebImplementationEnabled()
+    onGestureHandlerStateChange: isNewWebImplementationEnabled()
       ? (e: HandlerStateChangeEvent<unknown>) => {
           onGestureHandlerEvent(e.nativeEvent);
         }

package/src/handlers/gestures/reanimatedWrapper.ts

@@ -29,27 +29,28 @@ let Reanimated: {
 
 try {
   Reanimated = require('react-native-reanimated');
+} catch (e) {
+  // When 'react-native-reanimated' is not available we want to quietly continue
+  // @ts-ignore TS demands the variable to be initialized
+  Reanimated = undefined;
+}
 
-  if (!Reanimated.useSharedValue) {
-    // @ts-ignore Make sure the loaded module is actually Reanimated, if it's not
-    // reset the module to undefined so we can fallback to the default implementation
-    Reanimated = undefined;
-    throw new Error('react-native-reanimated is not found');
-  }
+if (!Reanimated?.useSharedValue) {
+  // @ts-ignore Make sure the loaded module is actually Reanimated, if it's not
+  // reset the module to undefined so we can fallback to the default implementation
+  Reanimated = undefined;
+}
 
-  if (!Reanimated.setGestureState) {
-    Reanimated.setGestureState = () => {
-      'worklet';
-      console.warn(
-        tagMessage(
-          'Please use newer version of react-native-reanimated in order to control state of the gestures.'
-        )
-      );
-    };
-  }
-  // When 'react-native-reanimated' is not available we want to
-  // quietly continue
-  // eslint-disable-next-line no-empty
-} catch (e) {}
+if (Reanimated !== undefined && !Reanimated.setGestureState) {
+  // The loaded module is Reanimated but it doesn't have the setGestureState defined
+  Reanimated.setGestureState = () => {
+    'worklet';
+    console.warn(
+      tagMessage(
+        'Please use newer version of react-native-reanimated in order to control state of the gestures.'
+      )
+    );
+  };
+}
 
 export { Reanimated };

package/src/index.ts

@@ -2,8 +2,8 @@ import { initialize } from './init';
 
 export { Directions } from './Directions';
 export { State } from './State';
-export { default as gestureHandlerRootHOC } from './gestureHandlerRootHOC';
-export { default as GestureHandlerRootView } from './GestureHandlerRootView';
+export { default as gestureHandlerRootHOC } from './components/gestureHandlerRootHOC';
+export { default as GestureHandlerRootView } from './components/GestureHandlerRootView';
 export type {
   // event types
   GestureEvent,
@@ -92,6 +92,7 @@ export {
   BaseButton,
   RectButton,
   BorderlessButton,
+  PureNativeButton,
 } from './components/GestureButtons';
 export {
   TouchableHighlight,
@@ -157,6 +158,9 @@ export type {
 } from './components/DrawerLayout';
 export { default as DrawerLayout } from './components/DrawerLayout';
 
-export { enableExperimentalWebImplementation } from './EnableExperimentalWebImplementation';
+export {
+  enableExperimentalWebImplementation,
+  enableLegacyWebImplementation,
+} from './EnableNewWebImplementation';
 
 initialize();

package/src/utils.ts

@@ -55,11 +55,6 @@ export function isFabric(): boolean {
   return !!global?.nativeFabricUIManager;
 }
 
-export function shouldUseCodegenNativeComponent(): boolean {
-  // use codegenNativeComponent starting with RN 0.68
-  return REACT_NATIVE_VERSION.minor >= 68 || REACT_NATIVE_VERSION.major > 0;
-}
-
 export function isRemoteDebuggingEnabled(): boolean {
   // react-native-reanimated checks if in remote debugging in the same way
   // @ts-ignore global is available but node types are not included

package/src/web/handlers/FlingGestureHandler.ts

@@ -159,11 +159,6 @@ export default class FlingGestureHandler extends GestureHandler {
     this.endFling();
   }
 
-  protected onPointerCancel(event: AdaptedEvent): void {
-    super.onPointerCancel(event);
-    this.reset();
-  }
-
   public activate(force?: boolean): void {
     super.activate(force);
     this.end();

package/src/web/handlers/GestureHandler.ts

@@ -352,6 +352,9 @@ export default abstract class GestureHandler {
     if (this.config.needsPointerData) {
       this.sendTouchEvent(event);
     }
+
+    this.cancel();
+    this.reset();
   }
   protected onPointerOutOfBounds(event: AdaptedEvent): void {
     this.tryToSendMoveEvent(true);

package/src/web/handlers/ManualGestureHandler.ts

@@ -40,9 +40,4 @@ export default class ManualGestureHandler extends GestureHandler {
     super.onPointerRemove(event);
     this.tracker.removeFromTracker(event.pointerId);
   }
-
-  protected onPointerCancel(event: AdaptedEvent): void {
-    super.onPointerCancel(event);
-    this.reset();
-  }
 }

package/src/web/handlers/NativeViewGestureHandler.ts

@@ -115,12 +115,6 @@ export default class NativeViewGestureHandler extends GestureHandler {
     }
   }
 
-  protected onPointerCancel(event: AdaptedEvent): void {
-    super.onPointerCancel(event);
-    this.cancel();
-    this.reset();
-  }
-
   public shouldRecognizeSimultaneously(handler: GestureHandler): boolean {
     if (super.shouldRecognizeSimultaneously(handler)) {
       return true;

package/src/web/handlers/PanGestureHandler.ts

@@ -1,4 +1,3 @@
-import { PixelRatio } from 'react-native';
 import { State } from '../../State';
 import { DEFAULT_TOUCH_SLOP } from '../constants';
 import { AdaptedEvent, Config } from '../interfaces';
@@ -188,7 +187,6 @@ export default class PanGestureHandler extends GestureHandler {
 
   protected transformNativeEvent() {
     const rect: DOMRect = this.view.getBoundingClientRect();
-    const ratio = PixelRatio.get();
 
     const translationX: number = this.getTranslationX();
     const translationY: number = this.getTranslationY();
@@ -198,8 +196,8 @@ export default class PanGestureHandler extends GestureHandler {
       translationY: isNaN(translationY) ? 0 : translationY,
       absoluteX: this.tracker.getLastAvgX(),
       absoluteY: this.tracker.getLastAvgY(),
-      velocityX: this.velocityX * ratio * 10,
-      velocityY: this.velocityY * ratio * 10,
+      velocityX: this.velocityX,
+      velocityY: this.velocityY,
       x: this.tracker.getLastAvgX() - rect.left,
       y: this.tracker.getLastAvgY() - rect.top,
     };
@@ -306,11 +304,6 @@ export default class PanGestureHandler extends GestureHandler {
     super.onPointerMove(event);
   }
 
-  protected onPointerCancel(event: AdaptedEvent): void {
-    super.onPointerCancel(event);
-
-    this.reset();
-  }
   protected onPointerOutOfBounds(event: AdaptedEvent): void {
     if (this.getShouldCancelWhenOutside()) {
       return;

package/src/web/handlers/PinchGestureHandler.ts

@@ -127,11 +127,6 @@ export default class PinchGestureHandler extends GestureHandler {
     super.onPointerOutOfBounds(event);
   }
 
-  protected onPointerCancel(event: AdaptedEvent): void {
-    super.onPointerCancel(event);
-    this.reset();
-  }
-
   private tryBegin(): void {
     if (this.currentState !== State.UNDETERMINED) {
       return;

package/src/web/handlers/RotationGestureHandler.ts

@@ -148,13 +148,6 @@ export default class RotationGestureHandler extends GestureHandler {
     this.tracker.removeFromTracker(event.pointerId);
   }
 
-  protected onPointerCancel(event: AdaptedEvent): void {
-    super.onPointerCancel(event);
-    this.end();
-
-    this.reset();
-  }
-
   protected tryBegin(): void {
     if (this.currentState !== State.UNDETERMINED) {
       return;

package/src/web/handlers/TapGestureHandler.ts

@@ -197,12 +197,6 @@ export default class TapGestureHandler extends GestureHandler {
     super.onPointerOutOfBounds(event);
   }
 
-  protected onPointerCancel(event: AdaptedEvent): void {
-    super.onPointerCancel(event);
-    this.tracker.resetTracker();
-    this.fail();
-  }
-
   private updateState(event: AdaptedEvent): void {
     if (
       this.currentMaxNumberOfPointers < this.tracker.getTrackedPointersCount()

package/src/web/tools/CircularBuffer.ts

@@ -0,0 +1,42 @@
+export default class CircularBuffer<T> {
+  private bufferSize: number;
+  private buffer: T[];
+  private index: number;
+  private actualSize: number;
+
+  constructor(size: number) {
+    this.bufferSize = size;
+    this.buffer = new Array<T>(size);
+    this.index = 0;
+    this.actualSize = 0;
+  }
+
+  public get size(): number {
+    return this.actualSize;
+  }
+
+  public push(element: T): void {
+    this.buffer[this.index] = element;
+    this.index = (this.index + 1) % this.bufferSize;
+    this.actualSize = Math.min(this.actualSize + 1, this.bufferSize);
+  }
+
+  public get(at: number): T {
+    if (this.actualSize === this.bufferSize) {
+      let index = (this.index + at) % this.bufferSize;
+      if (index < 0) {
+        index += this.bufferSize;
+      }
+
+      return this.buffer[index];
+    } else {
+      return this.buffer[at];
+    }
+  }
+
+  public clear(): void {
+    this.buffer = new Array<T>(this.bufferSize);
+    this.index = 0;
+    this.actualSize = 0;
+  }
+}

package/src/web/tools/LeastSquareSolver.ts

@@ -0,0 +1,182 @@
+// Implementation taken from Flutter's LeastSquareSolver
+// https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/gestures/lsq_solver.dart
+
+class Vector {
+  private offset: number;
+  private length: number;
+  private elements: number[];
+
+  constructor(length: number) {
+    this.offset = 0;
+    this.length = length;
+    this.elements = new Array<number>(length);
+  }
+
+  public static fromVOL(
+    values: number[],
+    offset: number,
+    length: number
+  ): Vector {
+    const result = new Vector(0);
+
+    result.offset = offset;
+    result.length = length;
+    result.elements = values;
+
+    return result;
+  }
+
+  public get(index: number): number {
+    return this.elements[this.offset + index];
+  }
+
+  public set(index: number, value: number): void {
+    this.elements[this.offset + index] = value;
+  }
+
+  public dot(other: Vector): number {
+    let result = 0;
+    for (let i = 0; i < this.length; i++) {
+      result += this.get(i) * other.get(i);
+    }
+    return result;
+  }
+
+  public norm() {
+    return Math.sqrt(this.dot(this));
+  }
+}
+
+class Matrix {
+  private columns: number;
+  private elements: number[];
+
+  constructor(rows: number, columns: number) {
+    this.columns = columns;
+    this.elements = new Array<number>(rows * columns);
+  }
+
+  public get(row: number, column: number): number {
+    return this.elements[row * this.columns + column];
+  }
+
+  public set(row: number, column: number, value: number): void {
+    this.elements[row * this.columns + column] = value;
+  }
+
+  public getRow(row: number): Vector {
+    return Vector.fromVOL(this.elements, row * this.columns, this.columns);
+  }
+}
+
+/// An nth degree polynomial fit to a dataset.
+class PolynomialFit {
+  /// The polynomial coefficients of the fit.
+  ///
+  /// For each `i`, the element `coefficients[i]` is the coefficient of
+  /// the `i`-th power of the variable.
+  public coefficients: number[];
+
+  /// Creates a polynomial fit of the given degree.
+  ///
+  /// There are n + 1 coefficients in a fit of degree n.
+  constructor(degree: number) {
+    this.coefficients = new Array<number>(degree + 1);
+  }
+}
+
+const precisionErrorTolerance = 1e-10;
+
+/// Uses the least-squares algorithm to fit a polynomial to a set of data.
+export default class LeastSquareSolver {
+  /// The x-coordinates of each data point.
+  private x: number[];
+  /// The y-coordinates of each data point.
+  private y: number[];
+  /// The weight to use for each data point.
+  private w: number[];
+
+  /// Creates a least-squares solver.
+  ///
+  /// The [x], [y], and [w] arguments must not be null.
+  constructor(x: number[], y: number[], w: number[]) {
+    this.x = x;
+    this.y = y;
+    this.w = w;
+  }
+
+  /// Fits a polynomial of the given degree to the data points.
+  ///
+  /// When there is not enough data to fit a curve null is returned.
+  public solve(degree: number): PolynomialFit | null {
+    if (degree > this.x.length) {
+      // Not enough data to fit a curve.
+      return null;
+    }
+
+    const result = new PolynomialFit(degree);
+
+    // Shorthands for the purpose of notation equivalence to original C++ code.
+    const m = this.x.length;
+    const n = degree + 1;
+
+    // Expand the X vector to a matrix A, pre-multiplied by the weights.
+    const a = new Matrix(n, m);
+    for (let h = 0; h < m; h++) {
+      a.set(0, h, this.w[h]);
+
+      for (let i = 1; i < n; i++) {
+        a.set(i, h, a.get(i - 1, h) * this.x[h]);
+      }
+    }
+
+    // Apply the Gram-Schmidt process to A to obtain its QR decomposition.
+
+    // Orthonormal basis, column-major ordVectorer.
+    const q = new Matrix(n, m);
+    // Upper triangular matrix, row-major order.
+    const r = new Matrix(n, m);
+
+    for (let j = 0; j < n; j += 1) {
+      for (let h = 0; h < m; h += 1) {
+        q.set(j, h, a.get(j, h));
+      }
+      for (let i = 0; i < j; i += 1) {
+        const dot = q.getRow(j).dot(q.getRow(i));
+        for (let h = 0; h < m; h += 1) {
+          q.set(j, h, q.get(j, h) - dot * q.get(i, h));
+        }
+      }
+
+      const norm = q.getRow(j).norm();
+      if (norm < precisionErrorTolerance) {
+        // Vectors are linearly dependent or zero so no solution.
+        return null;
+      }
+
+      const inverseNorm = 1.0 / norm;
+      for (let h = 0; h < m; h += 1) {
+        q.set(j, h, q.get(j, h) * inverseNorm);
+      }
+      for (let i = 0; i < n; i += 1) {
+        r.set(j, i, i < j ? 0.0 : q.getRow(j).dot(a.getRow(i)));
+      }
+    }
+
+    // Solve R B = Qt W Y to find B. This is easy because R is upper triangular.
+    // We just work from bottom-right to top-left calculating B's coefficients.
+    const wy = new Vector(m);
+    for (let h = 0; h < m; h += 1) {
+      wy.set(h, this.y[h] * this.w[h]);
+    }
+    for (let i = n - 1; i >= 0; i -= 1) {
+      result.coefficients[i] = q.getRow(i).dot(wy);
+      for (let j = n - 1; j > i; j -= 1) {
+        result.coefficients[i] -= r.get(i, j) * result.coefficients[j];
+      }
+      result.coefficients[i] /= r.get(i, i);
+    }
+
+    return result;
+  }
+}

package/src/web/tools/PointerEventManager.ts

@@ -8,6 +8,8 @@ import EventManager from './EventManager';
 import { isPointerInBounds } from '../utils';
 
 export default class PointerEventManager extends EventManager {
+  private trackedPointers = new Set<number>();
+
   public setListeners(): void {
     this.view.addEventListener('pointerdown', (event: PointerEvent): void => {
       if (event.pointerType === PointerType.TOUCH) {
@@ -24,6 +26,7 @@ export default class PointerEventManager extends EventManager {
 
       target.setPointerCapture(adaptedEvent.pointerId);
       this.markAsInBounds(adaptedEvent.pointerId);
+      this.trackedPointers.add(adaptedEvent.pointerId);
 
       if (++this.activePointersCounter > 1) {
         adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_DOWN;
@@ -51,6 +54,7 @@ export default class PointerEventManager extends EventManager {
 
       target.releasePointerCapture(adaptedEvent.pointerId);
       this.markAsOutOfBounds(adaptedEvent.pointerId);
+      this.trackedPointers.delete(adaptedEvent.pointerId);
 
       if (--this.activePointersCounter > 0) {
         adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_UP;
@@ -115,7 +119,27 @@ export default class PointerEventManager extends EventManager {
       this.onPointerCancel(adaptedEvent);
       this.markAsOutOfBounds(adaptedEvent.pointerId);
       this.activePointersCounter = 0;
+      this.trackedPointers.clear();
     });
+
+    this.view.addEventListener(
+      'lostpointercapture',
+      (event: PointerEvent): void => {
+        const adaptedEvent: AdaptedEvent = this.mapEvent(
+          event,
+          EventTypes.CANCEL
+        );
+
+        if (this.trackedPointers.has(adaptedEvent.pointerId)) {
+          // in some cases the `pointerup` event is not fired, but `lostpointercapture` is
+          // we simulate the `pointercancel` event here to make sure the gesture handler stops tracking it
+          this.onPointerCancel(adaptedEvent);
+
+          this.activePointersCounter = 0;
+          this.trackedPointers.clear();
+        }
+      }
+    );
   }
 
   protected mapEvent(event: PointerEvent, eventType: EventTypes): AdaptedEvent {
@@ -131,4 +155,9 @@ export default class PointerEventManager extends EventManager {
       time: event.timeStamp,
     };
   }
+
+  public resetManager(): void {
+    super.resetManager();
+    this.trackedPointers.clear();
+  }
 }

package/src/web/tools/PointerTracker.ts

@@ -1,4 +1,5 @@
 import { AdaptedEvent } from '../interfaces';
+import VelocityTracker from './VelocityTracker';
 
 export interface TrackerElement {
   lastX: number;
@@ -10,11 +11,10 @@ export interface TrackerElement {
   velocityY: number;
 }
 
-// Used to scale velocity so that it is similar to velocity in Android/iOS
-const VELOCITY_FACTOR = 0.2;
 const MAX_POINTERS = 20;
 
 export default class PointerTracker {
+  private velocityTracker = new VelocityTracker();
   private trackedPointers: Map<number, TrackerElement> = new Map<
     number,
     TrackerElement
@@ -74,12 +74,11 @@ export default class PointerTracker {
 
     this.lastMovedPointerId = event.pointerId;
 
-    const dx = event.x - element.lastX;
-    const dy = event.y - element.lastY;
-    const dt = event.time - element.timeStamp;
+    this.velocityTracker.add(event);
+    const [velocityX, velocityY] = this.velocityTracker.getVelocity();
 
-    element.velocityX = (dx / dt) * 1000 * VELOCITY_FACTOR;
-    element.velocityY = (dy / dt) * 1000 * VELOCITY_FACTOR;
+    element.velocityX = velocityX;
+    element.velocityY = velocityY;
 
     element.lastX = event.x;
     element.lastY = event.y;
@@ -223,6 +222,7 @@ export default class PointerTracker {
   }
 
   public resetTracker(): void {
+    this.velocityTracker.reset();
     this.trackedPointers.clear();
     this.lastMovedPointerId = NaN;