react-native-gesture-handler 1.10.1 → 2.1.0

package/src/handlers/gestures/gesture.ts

@@ -0,0 +1,279 @@
+import { FlingGestureHandlerEventPayload } from '../FlingGestureHandler';
+import { ForceTouchGestureHandlerEventPayload } from '../ForceTouchGestureHandler';
+import {
+  HitSlop,
+  CommonGestureConfig,
+  GestureTouchEvent,
+  GestureStateChangeEvent,
+  GestureUpdateEvent,
+} from '../gestureHandlerCommon';
+import { getNextHandlerTag } from '../handlersRegistry';
+import { GestureStateManagerType } from './gestureStateManager';
+import { LongPressGestureHandlerEventPayload } from '../LongPressGestureHandler';
+import { PanGestureHandlerEventPayload } from '../PanGestureHandler';
+import { PinchGestureHandlerEventPayload } from '../PinchGestureHandler';
+import { RotationGestureHandlerEventPayload } from '../RotationGestureHandler';
+import { TapGestureHandlerEventPayload } from '../TapGestureHandler';
+import { NativeViewGestureHandlerPayload } from '../NativeViewGestureHandler';
+
+export type GestureType =
+  | BaseGesture<Record<string, unknown>>
+  | BaseGesture<Record<string, never>>
+  | BaseGesture<TapGestureHandlerEventPayload>
+  | BaseGesture<PanGestureHandlerEventPayload>
+  | BaseGesture<LongPressGestureHandlerEventPayload>
+  | BaseGesture<RotationGestureHandlerEventPayload>
+  | BaseGesture<PinchGestureHandlerEventPayload>
+  | BaseGesture<FlingGestureHandlerEventPayload>
+  | BaseGesture<ForceTouchGestureHandlerEventPayload>
+  | BaseGesture<NativeViewGestureHandlerPayload>;
+
+export type GestureRef =
+  | number
+  | GestureType
+  | React.RefObject<GestureType | undefined>
+  | React.RefObject<React.ComponentType | undefined>; // allow adding a ref to a gesture handler
+export interface BaseGestureConfig
+  extends CommonGestureConfig,
+    Record<string, unknown> {
+  ref?: React.MutableRefObject<GestureType | undefined>;
+  requireToFail?: GestureRef[];
+  simultaneousWith?: GestureRef[];
+  needsPointerData?: boolean;
+  manualActivation?: boolean;
+}
+
+type TouchEventHandlerType = (
+  event: GestureTouchEvent,
+  stateManager: GestureStateManagerType
+) => void;
+
+export type HandlerCallbacks<EventPayloadT extends Record<string, unknown>> = {
+  handlerTag: number;
+  onBegin?: (event: GestureStateChangeEvent<EventPayloadT>) => void;
+  onStart?: (event: GestureStateChangeEvent<EventPayloadT>) => void;
+  onEnd?: (
+    event: GestureStateChangeEvent<EventPayloadT>,
+    success: boolean
+  ) => void;
+  onFinalize?: (
+    event: GestureStateChangeEvent<EventPayloadT>,
+    success: boolean
+  ) => void;
+  onUpdate?: (event: GestureUpdateEvent<EventPayloadT>) => void;
+  onTouchesDown?: TouchEventHandlerType;
+  onTouchesMove?: TouchEventHandlerType;
+  onTouchesUp?: TouchEventHandlerType;
+  onTouchesCancelled?: TouchEventHandlerType;
+  isWorklet: boolean[];
+};
+
+export const CALLBACK_TYPE = {
+  UNDEFINED: 0,
+  BEGAN: 1,
+  START: 2,
+  UPDATE: 3,
+  END: 4,
+  FINALIZE: 5,
+  TOUCHES_DOWN: 6,
+  TOUCHES_MOVE: 7,
+  TOUCHES_UP: 8,
+  TOUCHES_CANCELLED: 9,
+} as const;
+
+// Allow using CALLBACK_TYPE as object and type
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export type CALLBACK_TYPE = typeof CALLBACK_TYPE[keyof typeof CALLBACK_TYPE];
+
+export abstract class Gesture {
+  /**
+   * Return array of gestures, providing the same interface for creating and updating
+   * handlers, no matter which object was used to create gesture instance.
+   */
+  abstract toGestureArray(): GestureType[];
+
+  /**
+   * Assign handlerTag to the gesture instance and set ref.current (if a ref is set)
+   */
+  abstract initialize(): void;
+
+  /**
+   * Make sure that values of properties defining relations are arrays. Do any necessary
+   * preprocessing required to configure relations between handlers. Called just before
+   * updating the handler on the native side.
+   */
+  abstract prepare(): void;
+}
+
+export abstract class BaseGesture<
+  EventPayloadT extends Record<string, unknown>
+> extends Gesture {
+  public handlerTag = -1;
+  public handlerName = '';
+  public config: BaseGestureConfig = {};
+  public handlers: HandlerCallbacks<EventPayloadT> = {
+    handlerTag: -1,
+    isWorklet: [false, false, false, false],
+  };
+
+  private addDependency(
+    key: 'simultaneousWith' | 'requireToFail',
+    gesture: Exclude<GestureRef, number>
+  ) {
+    const value = this.config[key];
+    this.config[key] = value
+      ? Array<GestureRef>().concat(value, gesture)
+      : [gesture];
+  }
+
+  withRef(ref: React.MutableRefObject<GestureType | undefined>) {
+    this.config.ref = ref;
+    return this;
+  }
+
+  protected isWorklet(
+    callback:
+      | TouchEventHandlerType
+      | ((event: GestureUpdateEvent<EventPayloadT>) => void)
+      | ((event: GestureStateChangeEvent<EventPayloadT>) => void)
+  ) {
+    //@ts-ignore if callback is a worklet, the property will be available, if not then the check will return false
+    return callback.__workletHash !== undefined;
+  }
+
+  onBegin(callback: (event: GestureStateChangeEvent<EventPayloadT>) => void) {
+    this.handlers.onBegin = callback;
+    this.handlers.isWorklet[CALLBACK_TYPE.BEGAN] = this.isWorklet(callback);
+    return this;
+  }
+
+  onStart(callback: (event: GestureStateChangeEvent<EventPayloadT>) => void) {
+    this.handlers.onStart = callback;
+    this.handlers.isWorklet[CALLBACK_TYPE.START] = this.isWorklet(callback);
+    return this;
+  }
+
+  onEnd(
+    callback: (
+      event: GestureStateChangeEvent<EventPayloadT>,
+      success: boolean
+    ) => void
+  ) {
+    this.handlers.onEnd = callback;
+    //@ts-ignore if callback is a worklet, the property will be available, if not then the check will return false
+    this.handlers.isWorklet[CALLBACK_TYPE.END] = this.isWorklet(callback);
+    return this;
+  }
+
+  onFinalize(
+    callback: (
+      event: GestureStateChangeEvent<EventPayloadT>,
+      success: boolean
+    ) => void
+  ) {
+    this.handlers.onFinalize = callback;
+    //@ts-ignore if callback is a worklet, the property will be available, if not then the check will return false
+    this.handlers.isWorklet[CALLBACK_TYPE.FINALIZE] = this.isWorklet(callback);
+    return this;
+  }
+
+  onTouchesDown(callback: TouchEventHandlerType) {
+    this.config.needsPointerData = true;
+    this.handlers.onTouchesDown = callback;
+    this.handlers.isWorklet[CALLBACK_TYPE.TOUCHES_DOWN] = this.isWorklet(
+      callback
+    );
+
+    return this;
+  }
+
+  onTouchesMove(callback: TouchEventHandlerType) {
+    this.config.needsPointerData = true;
+    this.handlers.onTouchesMove = callback;
+    this.handlers.isWorklet[CALLBACK_TYPE.TOUCHES_MOVE] = this.isWorklet(
+      callback
+    );
+
+    return this;
+  }
+
+  onTouchesUp(callback: TouchEventHandlerType) {
+    this.config.needsPointerData = true;
+    this.handlers.onTouchesUp = callback;
+    this.handlers.isWorklet[CALLBACK_TYPE.TOUCHES_UP] = this.isWorklet(
+      callback
+    );
+
+    return this;
+  }
+
+  onTouchesCancelled(callback: TouchEventHandlerType) {
+    this.config.needsPointerData = true;
+    this.handlers.onTouchesCancelled = callback;
+    this.handlers.isWorklet[CALLBACK_TYPE.TOUCHES_CANCELLED] = this.isWorklet(
+      callback
+    );
+
+    return this;
+  }
+
+  enabled(enabled: boolean) {
+    this.config.enabled = enabled;
+    return this;
+  }
+
+  shouldCancelWhenOutside(value: boolean) {
+    this.config.shouldCancelWhenOutside = value;
+    return this;
+  }
+
+  hitSlop(hitSlop: HitSlop) {
+    this.config.hitSlop = hitSlop;
+    return this;
+  }
+
+  simultaneousWithExternalGesture(...gestures: Exclude<GestureRef, number>[]) {
+    for (const gesture of gestures) {
+      this.addDependency('simultaneousWith', gesture);
+    }
+    return this;
+  }
+
+  requireExternalGestureToFail(...gestures: Exclude<GestureRef, number>[]) {
+    for (const gesture of gestures) {
+      this.addDependency('requireToFail', gesture);
+    }
+    return this;
+  }
+
+  initialize() {
+    this.handlerTag = getNextHandlerTag();
+    this.handlers = { ...this.handlers, handlerTag: this.handlerTag };
+
+    if (this.config.ref) {
+      this.config.ref.current = this as GestureType;
+    }
+  }
+
+  toGestureArray(): GestureType[] {
+    return [this as GestureType];
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  prepare() {}
+}
+
+export abstract class ContinousBaseGesture<
+  EventPayloadT extends Record<string, unknown>
+> extends BaseGesture<EventPayloadT> {
+  onUpdate(callback: (event: GestureUpdateEvent<EventPayloadT>) => void) {
+    this.handlers.onUpdate = callback;
+    this.handlers.isWorklet[CALLBACK_TYPE.UPDATE] = this.isWorklet(callback);
+    return this;
+  }
+
+  manualActivation(manualActivation: boolean) {
+    this.config.manualActivation = manualActivation;
+    return this;
+  }
+}

package/src/handlers/gestures/gestureComposition.ts

@@ -0,0 +1,109 @@
+import { BaseGesture, Gesture, GestureRef, GestureType } from './gesture';
+
+function extendRelation(
+  currentRelation: GestureRef[] | undefined,
+  extendWith: GestureType[]
+) {
+  if (currentRelation === undefined) {
+    return [...extendWith];
+  } else {
+    return [...currentRelation, ...extendWith];
+  }
+}
+
+export class ComposedGesture extends Gesture {
+  protected gestures: Gesture[] = [];
+  protected simultaneousGestures: GestureType[] = [];
+  protected requireGesturesToFail: GestureType[] = [];
+
+  constructor(...gestures: Gesture[]) {
+    super();
+    this.gestures = gestures;
+  }
+
+  protected prepareSingleGesture(
+    gesture: Gesture,
+    simultaneousGestures: GestureType[],
+    requireGesturesToFail: GestureType[]
+  ) {
+    if (gesture instanceof BaseGesture) {
+      const newConfig = { ...gesture.config };
+
+      newConfig.simultaneousWith = extendRelation(
+        newConfig.simultaneousWith,
+        simultaneousGestures
+      );
+      newConfig.requireToFail = extendRelation(
+        newConfig.requireToFail,
+        requireGesturesToFail
+      );
+
+      gesture.config = newConfig;
+    } else if (gesture instanceof ComposedGesture) {
+      gesture.simultaneousGestures = simultaneousGestures;
+      gesture.requireGesturesToFail = requireGesturesToFail;
+      gesture.prepare();
+    }
+  }
+
+  prepare() {
+    for (const gesture of this.gestures) {
+      this.prepareSingleGesture(
+        gesture,
+        this.simultaneousGestures,
+        this.requireGesturesToFail
+      );
+    }
+  }
+
+  initialize() {
+    for (const gesture of this.gestures) {
+      gesture.initialize();
+    }
+  }
+
+  toGestureArray(): GestureType[] {
+    return this.gestures.flatMap((gesture) => gesture.toGestureArray());
+  }
+}
+
+export class SimultaneousGesture extends ComposedGesture {
+  prepare() {
+    const simultaneousArray = this.gestures
+      .flatMap((gesture) => gesture.toGestureArray())
+      .concat(this.simultaneousGestures);
+
+    for (const gesture of this.gestures) {
+      this.prepareSingleGesture(
+        gesture,
+        simultaneousArray,
+        this.requireGesturesToFail
+      );
+    }
+  }
+}
+
+export class ExclusiveGesture extends ComposedGesture {
+  prepare() {
+    const gestureArrays = this.gestures.map((gesture) =>
+      gesture.toGestureArray()
+    );
+
+    let requireToFail: GestureType[] = [];
+
+    for (let i = 0; i < this.gestures.length; i++) {
+      this.prepareSingleGesture(
+        this.gestures[i],
+        this.simultaneousGestures,
+        this.requireGesturesToFail.concat(requireToFail)
+      );
+
+      requireToFail = requireToFail.concat(gestureArrays[i]);
+    }
+  }
+}
+
+export type ComposedGestureType = InstanceType<typeof ComposedGesture>;
+export type RaceGestureType = ComposedGestureType;
+export type SimultaneousGestureType = InstanceType<typeof SimultaneousGesture>;
+export type ExclusiveGestureType = InstanceType<typeof ExclusiveGesture>;

package/src/handlers/gestures/gestureObjects.ts

@@ -0,0 +1,79 @@
+import { FlingGesture } from './flingGesture';
+import { ForceTouchGesture } from './forceTouchGesture';
+import { Gesture } from './gesture';
+import {
+  ComposedGesture,
+  ExclusiveGesture,
+  SimultaneousGesture,
+} from './gestureComposition';
+import { LongPressGesture } from './longPressGesture';
+import { PanGesture } from './panGesture';
+import { PinchGesture } from './pinchGesture';
+import { RotationGesture } from './rotationGesture';
+import { TapGesture } from './tapGesture';
+import { NativeGesture } from './nativeGesture';
+import { ManualGesture } from './manualGesture';
+
+export const GestureObjects = {
+  Tap: () => {
+    return new TapGesture();
+  },
+
+  Pan: () => {
+    return new PanGesture();
+  },
+
+  Pinch: () => {
+    return new PinchGesture();
+  },
+
+  Rotation: () => {
+    return new RotationGesture();
+  },
+
+  Fling: () => {
+    return new FlingGesture();
+  },
+
+  LongPress: () => {
+    return new LongPressGesture();
+  },
+
+  ForceTouch: () => {
+    return new ForceTouchGesture();
+  },
+
+  Native: () => {
+    return new NativeGesture();
+  },
+
+  Manual: () => {
+    return new ManualGesture();
+  },
+
+  /**
+   * Builds a composed gesture consisting of gestures provided as parameters.
+   * The first one that becomes active cancels the rest of gestures.
+   */
+  Race: (...gestures: Gesture[]) => {
+    return new ComposedGesture(...gestures);
+  },
+
+  /**
+   * Builds a composed gesture that allows all base gestures to run simultaneously.
+   */
+  Simultaneous(...gestures: Gesture[]) {
+    return new SimultaneousGesture(...gestures);
+  },
+
+  /**
+   * Builds a composed gesture where only one of the provided gestures can become active.
+   * Priority is decided through the order of gestures: the first one has higher priority
+   * than the second one, second one has higher priority than the third one, and so on.
+   * For example, to make a gesture that recognizes both single and double tap you need
+   * to call Exclusive(doubleTap, singleTap).
+   */
+  Exclusive(...gestures: Gesture[]) {
+    return new ExclusiveGesture(...gestures);
+  },
+};

package/src/handlers/gestures/gestureStateManager.ts

@@ -0,0 +1,60 @@
+import { Reanimated } from './reanimatedWrapper';
+import { State } from '../../State';
+
+export interface GestureStateManagerType {
+  begin: () => void;
+  activate: () => void;
+  fail: () => void;
+  end: () => void;
+}
+
+export const GestureStateManager = {
+  create(handlerTag: number): GestureStateManagerType {
+    'worklet';
+    return {
+      begin: () => {
+        'worklet';
+        if (Reanimated) {
+          Reanimated.setGestureState(handlerTag, State.BEGAN);
+        } else {
+          console.warn(
+            'react-native-reanimated is required in order to use synchronous state management'
+          );
+        }
+      },
+
+      activate: () => {
+        'worklet';
+        if (Reanimated) {
+          Reanimated.setGestureState(handlerTag, State.ACTIVE);
+        } else {
+          console.warn(
+            'react-native-reanimated is required in order to use synchronous state management'
+          );
+        }
+      },
+
+      fail: () => {
+        'worklet';
+        if (Reanimated) {
+          Reanimated.setGestureState(handlerTag, State.FAILED);
+        } else {
+          console.warn(
+            'react-native-reanimated is required in order to use synchronous state management'
+          );
+        }
+      },
+
+      end: () => {
+        'worklet';
+        if (Reanimated) {
+          Reanimated.setGestureState(handlerTag, State.END);
+        } else {
+          console.warn(
+            'react-native-reanimated is required in order to use synchronous state management'
+          );
+        }
+      },
+    };
+  },
+};

package/src/handlers/gestures/longPressGesture.ts

@@ -0,0 +1,27 @@
+import { BaseGesture, BaseGestureConfig } from './gesture';
+import {
+  LongPressGestureConfig,
+  LongPressGestureHandlerEventPayload,
+} from '../LongPressGestureHandler';
+
+export class LongPressGesture extends BaseGesture<LongPressGestureHandlerEventPayload> {
+  public config: BaseGestureConfig & LongPressGestureConfig = {};
+
+  constructor() {
+    super();
+
+    this.handlerName = 'LongPressGestureHandler';
+  }
+
+  minDuration(duration: number) {
+    this.config.minDurationMs = duration;
+    return this;
+  }
+
+  maxDistance(distance: number) {
+    this.config.maxDist = distance;
+    return this;
+  }
+}
+
+export type LongPressGestureType = InstanceType<typeof LongPressGesture>;

package/src/handlers/gestures/manualGesture.ts

@@ -0,0 +1,11 @@
+import { ContinousBaseGesture } from './gesture';
+
+export class ManualGesture extends ContinousBaseGesture<Record<string, never>> {
+  constructor() {
+    super();
+
+    this.handlerName = 'ManualGestureHandler';
+  }
+}
+
+export type ManualGestureType = InstanceType<typeof ManualGesture>;

package/src/handlers/gestures/nativeGesture.ts

@@ -0,0 +1,27 @@
+import { BaseGestureConfig, BaseGesture } from './gesture';
+import {
+  NativeViewGestureConfig,
+  NativeViewGestureHandlerPayload,
+} from '../NativeViewGestureHandler';
+
+export class NativeGesture extends BaseGesture<NativeViewGestureHandlerPayload> {
+  public config: BaseGestureConfig & NativeViewGestureConfig = {};
+
+  constructor() {
+    super();
+
+    this.handlerName = 'NativeViewGestureHandler';
+  }
+
+  shouldActivateOnStart(value: boolean) {
+    this.config.shouldActivateOnStart = value;
+    return this;
+  }
+
+  disallowInterruption(value: boolean) {
+    this.config.disallowInterruption = value;
+    return this;
+  }
+}
+
+export type NativeGestureType = InstanceType<typeof NativeGesture>;

package/src/handlers/gestures/panGesture.ts

@@ -0,0 +1,105 @@
+import { BaseGestureConfig, ContinousBaseGesture } from './gesture';
+import {
+  PanGestureConfig,
+  PanGestureHandlerEventPayload,
+} from '../PanGestureHandler';
+
+export class PanGesture extends ContinousBaseGesture<PanGestureHandlerEventPayload> {
+  public config: BaseGestureConfig & PanGestureConfig = {};
+
+  constructor() {
+    super();
+
+    this.handlerName = 'PanGestureHandler';
+  }
+
+  activeOffsetY(offset: number | number[]) {
+    if (Array.isArray(offset)) {
+      this.config.activeOffsetYStart = offset[0];
+      this.config.activeOffsetYEnd = offset[1];
+    } else if (offset < 0) {
+      this.config.activeOffsetYStart = offset;
+    } else {
+      this.config.activeOffsetYEnd = offset;
+    }
+    return this;
+  }
+
+  activeOffsetX(offset: number | number[]) {
+    if (Array.isArray(offset)) {
+      this.config.activeOffsetXStart = offset[0];
+      this.config.activeOffsetXEnd = offset[1];
+    } else if (offset < 0) {
+      this.config.activeOffsetXStart = offset;
+    } else {
+      this.config.activeOffsetXEnd = offset;
+    }
+    return this;
+  }
+
+  failOffsetY(offset: number | number[]) {
+    if (Array.isArray(offset)) {
+      this.config.failOffsetYStart = offset[0];
+      this.config.failOffsetYEnd = offset[1];
+    } else if (offset < 0) {
+      this.config.failOffsetYStart = offset;
+    } else {
+      this.config.failOffsetYEnd = offset;
+    }
+    return this;
+  }
+
+  failOffsetX(offset: number | number[]) {
+    if (Array.isArray(offset)) {
+      this.config.failOffsetXStart = offset[0];
+      this.config.failOffsetXEnd = offset[1];
+    } else if (offset < 0) {
+      this.config.failOffsetXStart = offset;
+    } else {
+      this.config.failOffsetXEnd = offset;
+    }
+    return this;
+  }
+
+  minPointers(minPointers: number) {
+    this.config.minPointers = minPointers;
+    return this;
+  }
+
+  maxPointers(maxPointers: number) {
+    this.config.maxPointers = maxPointers;
+    return this;
+  }
+
+  minDistance(distance: number) {
+    this.config.minDist = distance;
+    return this;
+  }
+
+  minVelocity(velocity: number) {
+    this.config.minVelocity = velocity;
+    return this;
+  }
+
+  minVelocityX(velocity: number) {
+    this.config.minVelocityX = velocity;
+    return this;
+  }
+
+  minVelocityY(velocity: number) {
+    this.config.minVelocityY = velocity;
+    return this;
+  }
+
+  averageTouches(value: boolean) {
+    this.config.avgTouches = value;
+    return this;
+  }
+
+  enableTrackpadTwoFingerGesture(value: boolean) {
+    this.config.enableTrackpadTwoFingerGesture = value;
+    return this;
+  }
+}
+
+export type PanGestureType = InstanceType<typeof PanGesture>;