@amazon-devices/react-native-gesture-handler 2.0.1758683737

package/src/handlers/gestures/eventReceiver.ts

@@ -0,0 +1,172 @@
+import { DeviceEventEmitter, NativeEventEmitter, EmitterSubscription, Platform } from 'react-native';
+import RNGestureHandlerModule from "../../RNGestureHandlerModule";
+import type KeplerGestureHandlerModule from "../../RNGestureHandlerModule.kepler"
+import { State } from '../../State';
+import { TouchEventType } from '../../TouchEventType';
+import {
+  GestureTouchEvent,
+  GestureUpdateEvent,
+  GestureStateChangeEvent,
+} from '../gestureHandlerCommon';
+import { findHandler, findOldGestureHandler } from '../handlersRegistry';
+import { BaseGesture } from './gesture';
+import {
+  GestureStateManager,
+  GestureStateManagerType,
+} from './gestureStateManager';
+
+let gestureHandlerEventSubscription: EmitterSubscription | null = null;
+let gestureHandlerStateChangeEventSubscription: EmitterSubscription | null =
+  null;
+
+const gestureStateManagers: Map<number, GestureStateManagerType> = new Map<
+  number,
+  GestureStateManagerType
+>();
+
+const lastUpdateEvent: (GestureUpdateEvent | undefined)[] = [];
+
+function isStateChangeEvent(
+  event: GestureUpdateEvent | GestureStateChangeEvent | GestureTouchEvent
+): event is GestureStateChangeEvent {
+  // @ts-ignore oldState doesn't exist on GestureTouchEvent and that's the point
+  return event.oldState != null;
+}
+
+function isTouchEvent(
+  event: GestureUpdateEvent | GestureStateChangeEvent | GestureTouchEvent
+): event is GestureTouchEvent {
+  return event.eventType != null;
+}
+
+export function onGestureHandlerEvent(
+  event: GestureUpdateEvent | GestureStateChangeEvent | GestureTouchEvent
+) {
+  const handler = findHandler(event.handlerTag) as BaseGesture<
+    Record<string, unknown>
+  >;
+
+  if (handler) {
+    if (isStateChangeEvent(event)) {
+      if (
+        event.oldState === State.UNDETERMINED &&
+        event.state === State.BEGAN
+      ) {
+        handler.handlers.onBegin?.(event);
+      } else if (
+        (event.oldState === State.BEGAN ||
+          event.oldState === State.UNDETERMINED) &&
+        event.state === State.ACTIVE
+      ) {
+        handler.handlers.onStart?.(event);
+        lastUpdateEvent[handler.handlers.handlerTag] = event;
+      } else if (event.oldState !== event.state && event.state === State.END) {
+        if (event.oldState === State.ACTIVE) {
+          handler.handlers.onEnd?.(event, true);
+        }
+        handler.handlers.onFinalize?.(event, true);
+        lastUpdateEvent[handler.handlers.handlerTag] = undefined;
+      } else if (
+        (event.state === State.FAILED || event.state === State.CANCELLED) &&
+        event.oldState !== event.state
+      ) {
+        if (event.oldState === State.ACTIVE) {
+          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, manager);
+          break;
+        case TouchEventType.TOUCHES_MOVE:
+          handler.handlers?.onTouchesMove?.(event, manager);
+          break;
+        case TouchEventType.TOUCHES_UP:
+          handler.handlers?.onTouchesUp?.(event, manager);
+          break;
+        case TouchEventType.TOUCHES_CANCELLED:
+          handler.handlers?.onTouchesCancelled?.(event, manager);
+          break;
+      }
+    } else {
+      handler.handlers.onUpdate?.(event);
+
+      if (handler.handlers.onChange && handler.handlers.changeEventCalculator) {
+        handler.handlers.onChange?.(
+          handler.handlers.changeEventCalculator?.(
+            event,
+            lastUpdateEvent[handler.handlers.handlerTag]
+          )
+        );
+
+        lastUpdateEvent[handler.handlers.handlerTag] = event;
+      }
+    }
+  } else {
+    const oldHandler = findOldGestureHandler(event.handlerTag);
+    if (oldHandler) {
+      const nativeEvent = { nativeEvent: event };
+      if (isStateChangeEvent(event)) {
+        oldHandler.onGestureStateChange(nativeEvent);
+      } else {
+        oldHandler.onGestureEvent(nativeEvent);
+      }
+      return;
+    }
+  }
+}
+
+export function startListening() {
+  stopListening();
+
+  // @ts-ignore types not correct?
+  if (Platform.OS === 'kepler') {
+    const eventEmitter = new NativeEventEmitter(RNGestureHandlerModule as typeof KeplerGestureHandlerModule);
+
+    gestureHandlerEventSubscription = eventEmitter.addListener(
+      'onGestureHandlerEvent',
+      onGestureHandlerEvent
+    );
+
+    gestureHandlerStateChangeEventSubscription = eventEmitter.addListener(
+      'onGestureHandlerStateChange',
+      onGestureHandlerEvent
+    );
+  } else {
+    gestureHandlerEventSubscription = DeviceEventEmitter.addListener(
+      'onGestureHandlerEvent',
+      onGestureHandlerEvent
+    );
+
+    gestureHandlerStateChangeEventSubscription = DeviceEventEmitter.addListener(
+      'onGestureHandlerStateChange',
+      onGestureHandlerEvent
+    );
+  }
+}
+
+export function stopListening() {
+  if (gestureHandlerEventSubscription) {
+    gestureHandlerEventSubscription.remove();
+    gestureHandlerEventSubscription = null;
+  }
+
+  if (gestureHandlerStateChangeEventSubscription) {
+    gestureHandlerStateChangeEventSubscription.remove();
+    gestureHandlerStateChangeEventSubscription = null;
+  }
+}

package/src/handlers/gestures/flingGesture.ts

@@ -0,0 +1,27 @@
+import { BaseGesture, BaseGestureConfig } from './gesture';
+import {
+  FlingGestureConfig,
+  FlingGestureHandlerEventPayload,
+} from '../FlingGestureHandler';
+
+export class FlingGesture extends BaseGesture<FlingGestureHandlerEventPayload> {
+  public config: BaseGestureConfig & FlingGestureConfig = {};
+
+  constructor() {
+    super();
+
+    this.handlerName = 'FlingGestureHandler';
+  }
+
+  numberOfPointers(pointers: number) {
+    this.config.numberOfPointers = pointers;
+    return this;
+  }
+
+  direction(direction: number) {
+    this.config.direction = direction;
+    return this;
+  }
+}
+
+export type FlingGestureType = InstanceType<typeof FlingGesture>;

package/src/handlers/gestures/forceTouchGesture.ts

@@ -0,0 +1,74 @@
+import { BaseGestureConfig, ContinousBaseGesture } from './gesture';
+import {
+  ForceTouchGestureConfig,
+  ForceTouchGestureHandlerEventPayload,
+} from '../ForceTouchGestureHandler';
+import { GestureUpdateEvent } from '../gestureHandlerCommon';
+
+export type ForceTouchGestureChangeEventPayload = {
+  forceChange: number;
+};
+
+function changeEventCalculator(
+  current: GestureUpdateEvent<ForceTouchGestureHandlerEventPayload>,
+  previous?: GestureUpdateEvent<ForceTouchGestureHandlerEventPayload>
+) {
+  'worklet';
+  let changePayload: ForceTouchGestureChangeEventPayload;
+  if (previous === undefined) {
+    changePayload = {
+      forceChange: current.force,
+    };
+  } else {
+    changePayload = {
+      forceChange: current.force - previous.force,
+    };
+  }
+
+  return { ...current, ...changePayload };
+}
+
+export class ForceTouchGesture extends ContinousBaseGesture<
+  ForceTouchGestureHandlerEventPayload,
+  ForceTouchGestureChangeEventPayload
+> {
+  public config: BaseGestureConfig & ForceTouchGestureConfig = {};
+
+  constructor() {
+    super();
+
+    this.handlerName = 'ForceTouchGestureHandler';
+  }
+
+  minForce(force: number) {
+    this.config.minForce = force;
+    return this;
+  }
+
+  maxForce(force: number) {
+    this.config.maxForce = force;
+    return this;
+  }
+
+  feedbackOnActivation(value: boolean) {
+    this.config.feedbackOnActivation = value;
+    return this;
+  }
+
+  onChange(
+    callback: (
+      event: GestureUpdateEvent<
+        GestureUpdateEvent<
+          ForceTouchGestureHandlerEventPayload &
+            ForceTouchGestureChangeEventPayload
+        >
+      >
+    ) => void
+  ) {
+    // @ts-ignore TS being overprotective, ForceTouchGestureHandlerEventPayload is Record
+    this.handlers.changeEventCalculator = changeEventCalculator;
+    return super.onChange(callback);
+  }
+}
+
+export type ForceTouchGestureType = InstanceType<typeof ForceTouchGesture>;

package/src/handlers/gestures/gesture.ts

@@ -0,0 +1,341 @@
+import { FlingGestureHandlerEventPayload } from '../FlingGestureHandler';
+import { ForceTouchGestureHandlerEventPayload } from '../ForceTouchGestureHandler';
+import {
+  HitSlop,
+  CommonGestureConfig,
+  GestureTouchEvent,
+  GestureStateChangeEvent,
+  GestureUpdateEvent,
+  ActiveCursor,
+} 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';
+import { isRemoteDebuggingEnabled } from '../../utils';
+
+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;
+  runOnJS?: boolean;
+  testId?: string;
+  cancelsTouchesInView?: boolean;
+}
+
+type TouchEventHandlerType = (
+  event: GestureTouchEvent,
+  stateManager: GestureStateManagerType
+) => void;
+
+export type HandlerCallbacks<EventPayloadT extends Record<string, unknown>> = {
+  gestureId: number;
+  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;
+  onChange?: (event: any) => void;
+  onTouchesDown?: TouchEventHandlerType;
+  onTouchesMove?: TouchEventHandlerType;
+  onTouchesUp?: TouchEventHandlerType;
+  onTouchesCancelled?: TouchEventHandlerType;
+  changeEventCalculator?: (
+    current: GestureUpdateEvent<Record<string, unknown>>,
+    previous?: GestureUpdateEvent<Record<string, unknown>>
+  ) => GestureUpdateEvent<Record<string, unknown>>;
+  isWorklet: boolean[];
+};
+
+export const CALLBACK_TYPE = {
+  UNDEFINED: 0,
+  BEGAN: 1,
+  START: 2,
+  UPDATE: 3,
+  CHANGE: 4,
+  END: 5,
+  FINALIZE: 6,
+  TOUCHES_DOWN: 7,
+  TOUCHES_MOVE: 8,
+  TOUCHES_UP: 9,
+  TOUCHES_CANCELLED: 10,
+} 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;
+}
+
+let nextGestureId = 0;
+export abstract class BaseGesture<
+  EventPayloadT extends Record<string, unknown>
+> extends Gesture {
+  private gestureId = -1;
+  public handlerTag = -1;
+  public handlerName = '';
+  public config: BaseGestureConfig = {};
+  public handlers: HandlerCallbacks<EventPayloadT> = {
+    gestureId: -1,
+    handlerTag: -1,
+    isWorklet: [],
+  };
+
+  constructor() {
+    super();
+
+    // Used to check whether the gesture config has been updated when wrapping it
+    // with `useMemo`. Since every config will have a unique id, when the dependencies
+    // don't change, the config won't be recreated and the id will stay the same.
+    // If the id is different, it means that the config has changed and the gesture
+    // needs to be updated.
+    this.gestureId = nextGestureId++;
+    this.handlers.gestureId = this.gestureId;
+  }
+
+  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;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  protected isWorklet(callback: Function) {
+    //@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;
+  }
+
+  activeCursor(activeCursor: ActiveCursor) {
+    this.config.activeCursor = activeCursor;
+    return this;
+  }
+
+  runOnJS(runOnJS: boolean) {
+    this.config.runOnJS = runOnJS;
+    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;
+  }
+
+  withTestId(id: string) {
+    this.config.testId = id;
+    return this;
+  }
+
+  cancelsTouchesInView(value: boolean) {
+    this.config.cancelsTouchesInView = value;
+    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() {}
+
+  get shouldUseReanimated(): boolean {
+    // use Reanimated when runOnJS isn't set explicitly,
+    // and all defined callbacks are worklets,
+    // and remote debugging is disabled
+    return (
+      this.config.runOnJS !== true &&
+      !this.handlers.isWorklet.includes(false) &&
+      !isRemoteDebuggingEnabled()
+    );
+  }
+}
+
+export abstract class ContinousBaseGesture<
+  EventPayloadT extends Record<string, unknown>,
+  EventChangePayloadT 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;
+  }
+
+  onChange(
+    callback: (
+      event: GestureUpdateEvent<EventPayloadT & EventChangePayloadT>
+    ) => void
+  ) {
+    this.handlers.onChange = callback;
+    this.handlers.isWorklet[CALLBACK_TYPE.CHANGE] = this.isWorklet(callback);
+    return this;
+  }
+
+  manualActivation(manualActivation: boolean) {
+    this.config.manualActivation = manualActivation;
+    return this;
+  }
+}