react-native-gesture-handler 1.10.3 → 2.2.0

package/src/handlers/gestures/panGesture.ts

@@ -0,0 +1,147 @@
+import { BaseGestureConfig, ContinousBaseGesture } from './gesture';
+import { GestureUpdateEvent } from '../gestureHandlerCommon';
+import {
+  PanGestureConfig,
+  PanGestureHandlerEventPayload,
+} from '../PanGestureHandler';
+
+type PanGestureChangeEventPayload = {
+  changeX: number;
+  changeY: number;
+};
+
+function changeEventCalculator(
+  current: GestureUpdateEvent<PanGestureHandlerEventPayload>,
+  previous?: GestureUpdateEvent<PanGestureHandlerEventPayload>
+) {
+  'worklet';
+  let changePayload: PanGestureChangeEventPayload;
+  if (previous === undefined) {
+    changePayload = {
+      changeX: current.translationX,
+      changeY: current.translationY,
+    };
+  } else {
+    changePayload = {
+      changeX: current.translationX - previous.translationX,
+      changeY: current.translationY - previous.translationY,
+    };
+  }
+
+  return { ...current, ...changePayload };
+}
+
+export class PanGesture extends ContinousBaseGesture<
+  PanGestureHandlerEventPayload,
+  PanGestureChangeEventPayload
+> {
+  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;
+  }
+
+  onChange(
+    callback: (
+      event: GestureUpdateEvent<
+        PanGestureHandlerEventPayload & PanGestureChangeEventPayload
+      >
+    ) => void
+  ) {
+    // @ts-ignore TS being overprotective, PanGestureHandlerEventPayload is Record
+    this.handlers.changeEventCalculator = changeEventCalculator;
+    return super.onChange(callback);
+  }
+}
+
+export type PanGestureType = InstanceType<typeof PanGesture>;

package/src/handlers/gestures/pinchGesture.ts

@@ -0,0 +1,51 @@
+import { ContinousBaseGesture } from './gesture';
+import { PinchGestureHandlerEventPayload } from '../PinchGestureHandler';
+import { GestureUpdateEvent } from '../gestureHandlerCommon';
+
+type PinchGestureChangeEventPayload = {
+  scaleChange: number;
+};
+
+function changeEventCalculator(
+  current: GestureUpdateEvent<PinchGestureHandlerEventPayload>,
+  previous?: GestureUpdateEvent<PinchGestureHandlerEventPayload>
+) {
+  'worklet';
+  let changePayload: PinchGestureChangeEventPayload;
+  if (previous === undefined) {
+    changePayload = {
+      scaleChange: current.scale,
+    };
+  } else {
+    changePayload = {
+      scaleChange: current.scale / previous.scale,
+    };
+  }
+
+  return { ...current, ...changePayload };
+}
+
+export class PinchGesture extends ContinousBaseGesture<
+  PinchGestureHandlerEventPayload,
+  PinchGestureChangeEventPayload
+> {
+  constructor() {
+    super();
+
+    this.handlerName = 'PinchGestureHandler';
+  }
+
+  onChange(
+    callback: (
+      event: GestureUpdateEvent<
+        PinchGestureHandlerEventPayload & PinchGestureChangeEventPayload
+      >
+    ) => void
+  ) {
+    // @ts-ignore TS being overprotective, PinchGestureHandlerEventPayload is Record
+    this.handlers.changeEventCalculator = changeEventCalculator;
+    return super.onChange(callback);
+  }
+}
+
+export type PinchGestureType = InstanceType<typeof PinchGesture>;

package/src/handlers/gestures/reanimatedWrapper.ts

@@ -0,0 +1,45 @@
+import { ComponentClass } from 'react';
+import {
+  GestureUpdateEvent,
+  GestureStateChangeEvent,
+} from '../gestureHandlerCommon';
+
+export interface SharedValue<T> {
+  value: T;
+}
+
+let Reanimated: {
+  default: {
+    // Slightly modified definition copied from 'react-native-reanimated'
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    createAnimatedComponent<P extends object>(
+      component: ComponentClass<P>,
+      options?: unknown
+    ): ComponentClass<P>;
+  };
+  useEvent: (
+    callback: (event: GestureUpdateEvent | GestureStateChangeEvent) => void,
+    events: string[],
+    rebuild: boolean
+  ) => unknown;
+  useSharedValue: <T>(value: T) => SharedValue<T>;
+  setGestureState: (handlerTag: number, newState: number) => void;
+};
+
+try {
+  Reanimated = require('react-native-reanimated');
+
+  if (!Reanimated.setGestureState) {
+    Reanimated.setGestureState = () => {
+      'worklet';
+      console.warn(
+        '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) {}
+
+export { Reanimated };

package/src/handlers/gestures/rotationGesture.ts

@@ -0,0 +1,51 @@
+import { ContinousBaseGesture } from './gesture';
+import { RotationGestureHandlerEventPayload } from '../RotationGestureHandler';
+import { GestureUpdateEvent } from '../gestureHandlerCommon';
+
+type RotationGestureChangeEventPayload = {
+  rotationChange: number;
+};
+
+function changeEventCalculator(
+  current: GestureUpdateEvent<RotationGestureHandlerEventPayload>,
+  previous?: GestureUpdateEvent<RotationGestureHandlerEventPayload>
+) {
+  'worklet';
+  let changePayload: RotationGestureChangeEventPayload;
+  if (previous === undefined) {
+    changePayload = {
+      rotationChange: current.rotation,
+    };
+  } else {
+    changePayload = {
+      rotationChange: current.rotation - previous.rotation,
+    };
+  }
+
+  return { ...current, ...changePayload };
+}
+
+export class RotationGesture extends ContinousBaseGesture<
+  RotationGestureHandlerEventPayload,
+  RotationGestureChangeEventPayload
+> {
+  constructor() {
+    super();
+
+    this.handlerName = 'RotationGestureHandler';
+  }
+
+  onChange(
+    callback: (
+      event: GestureUpdateEvent<
+        RotationGestureHandlerEventPayload & RotationGestureChangeEventPayload
+      >
+    ) => void
+  ) {
+    // @ts-ignore TS being overprotective, RotationGestureHandlerEventPayload is Record
+    this.handlers.changeEventCalculator = changeEventCalculator;
+    return super.onChange(callback);
+  }
+}
+
+export type RotationGestureType = InstanceType<typeof RotationGesture>;

package/src/handlers/gestures/tapGesture.ts

@@ -0,0 +1,52 @@
+import { BaseGestureConfig, BaseGesture } from './gesture';
+import {
+  TapGestureConfig,
+  TapGestureHandlerEventPayload,
+} from '../TapGestureHandler';
+
+export class TapGesture extends BaseGesture<TapGestureHandlerEventPayload> {
+  public config: BaseGestureConfig & TapGestureConfig = {};
+
+  constructor() {
+    super();
+
+    this.handlerName = 'TapGestureHandler';
+  }
+
+  minPointers(minPointers: number) {
+    this.config.minPointers = minPointers;
+    return this;
+  }
+
+  numberOfTaps(count: number) {
+    this.config.numberOfTaps = count;
+    return this;
+  }
+
+  maxDistance(maxDist: number) {
+    this.config.maxDist = maxDist;
+    return this;
+  }
+
+  maxDuration(duration: number) {
+    this.config.maxDurationMs = duration;
+    return this;
+  }
+
+  maxDelay(delay: number) {
+    this.config.maxDelayMs = delay;
+    return this;
+  }
+
+  maxDeltaX(delta: number) {
+    this.config.maxDeltaX = delta;
+    return this;
+  }
+
+  maxDeltaY(delta: number) {
+    this.config.maxDeltaY = delta;
+    return this;
+  }
+}
+
+export type TapGestureType = InstanceType<typeof TapGesture>;

package/src/handlers/handlersRegistry.ts

@@ -0,0 +1,22 @@
+import { GestureType } from './gestures/gesture';
+
+export const handlerIDToTag: Record<string, number> = {};
+const handlers = new Map<number, GestureType>();
+
+let handlerTag = 1;
+
+export function getNextHandlerTag(): number {
+  return handlerTag++;
+}
+
+export function registerHandler(handlerTag: number, handler: GestureType) {
+  handlers.set(handlerTag, handler);
+}
+
+export function unregisterHandler(handlerTag: number) {
+  handlers.delete(handlerTag);
+}
+
+export function findHandler(handlerTag: number) {
+  return handlers.get(handlerTag);
+}

package/src/index.ts

@@ -1,3 +1,5 @@
+import { initialize } from './init';
+
 export { Directions } from './Directions';
 export { State } from './State';
 export { default as gestureHandlerRootHOC } from './gestureHandlerRootHOC';
@@ -9,36 +11,72 @@ export type {
   // event payloads types
   GestureEventPayload,
   HandlerStateChangeEventPayload,
+  // pointer events
+  GestureTouchEvent,
+  TouchData,
+  // new api event types
+  GestureUpdateEvent,
+  GestureStateChangeEvent,
+} from './handlers/gestureHandlerCommon';
+export type { GestureType } from './handlers/gestures/gesture';
+export type {
   TapGestureHandlerEventPayload,
-  ForceTouchGestureHandlerEventPayload,
-  LongPressGestureHandlerEventPayload,
-  PanGestureHandlerEventPayload,
-  PinchGestureHandlerEventPayload,
-  RotationGestureHandlerEventPayload,
-  FlingGestureHandlerEventPayload,
-  // gesture handlers props types
   TapGestureHandlerProps,
+} from './handlers/TapGestureHandler';
+export type {
+  ForceTouchGestureHandlerEventPayload,
   ForceTouchGestureHandlerProps,
+} from './handlers/ForceTouchGestureHandler';
+export type {
+  LongPressGestureHandlerEventPayload,
   LongPressGestureHandlerProps,
+} from './handlers/LongPressGestureHandler';
+export type {
+  PanGestureHandlerEventPayload,
   PanGestureHandlerProps,
+} from './handlers/PanGestureHandler';
+export type {
+  PinchGestureHandlerEventPayload,
   PinchGestureHandlerProps,
+} from './handlers/PinchGestureHandler';
+export type {
+  RotationGestureHandlerEventPayload,
   RotationGestureHandlerProps,
+} from './handlers/RotationGestureHandler';
+export type {
+  FlingGestureHandlerEventPayload,
   FlingGestureHandlerProps,
-} from './handlers/gestureHandlers';
-export {
-  TapGestureHandler,
-  ForceTouchGestureHandler,
-  LongPressGestureHandler,
-  PanGestureHandler,
-  PinchGestureHandler,
-  RotationGestureHandler,
-  FlingGestureHandler,
-} from './handlers/gestureHandlers';
+} from './handlers/FlingGestureHandler';
+export { TapGestureHandler } from './handlers/TapGestureHandler';
+export { ForceTouchGestureHandler } from './handlers/ForceTouchGestureHandler';
+export { LongPressGestureHandler } from './handlers/LongPressGestureHandler';
+export { PanGestureHandler } from './handlers/PanGestureHandler';
+export { PinchGestureHandler } from './handlers/PinchGestureHandler';
+export { RotationGestureHandler } from './handlers/RotationGestureHandler';
+export { FlingGestureHandler } from './handlers/FlingGestureHandler';
 export { default as createNativeWrapper } from './handlers/createNativeWrapper';
 export type {
   NativeViewGestureHandlerPayload,
   NativeViewGestureHandlerProps,
 } from './handlers/NativeViewGestureHandler';
+export { GestureDetector } from './handlers/gestures/GestureDetector';
+export { GestureObjects as Gesture } from './handlers/gestures/gestureObjects';
+export type { TapGestureType as TapGesture } from './handlers/gestures/tapGesture';
+export type { PanGestureType as PanGesture } from './handlers/gestures/panGesture';
+export type { FlingGestureType as FlingGesture } from './handlers/gestures/flingGesture';
+export type { LongPressGestureType as LongPressGesture } from './handlers/gestures/longPressGesture';
+export type { PinchGestureType as PinchGesture } from './handlers/gestures/pinchGesture';
+export type { RotationGestureType as RotationGesture } from './handlers/gestures/rotationGesture';
+export type { ForceTouchGestureType as ForceTouchGesture } from './handlers/gestures/forceTouchGesture';
+export type { NativeGestureType as NativeGesture } from './handlers/gestures/nativeGesture';
+export type { ManualGestureType as ManualGesture } from './handlers/gestures/manualGesture';
+export type {
+  ComposedGestureType as ComposedGesture,
+  RaceGestureType as RaceGesture,
+  SimultaneousGestureType as SimultaneousGesture,
+  ExclusiveGestureType as ExclusiveGesture,
+} from './handlers/gestures/gestureComposition';
+export type { GestureStateManagerType as GestureStateManager } from './handlers/gestures/gestureStateManager';
 export { NativeViewGestureHandler } from './handlers/NativeViewGestureHandler';
 export type {
   RawButtonProps,
@@ -114,3 +152,5 @@ export type {
   DrawerKeyboardDismissMode,
 } from './components/DrawerLayout';
 export { default as DrawerLayout } from './components/DrawerLayout';
+
+initialize();

package/src/init.ts

@@ -0,0 +1,5 @@
+import { startListening } from './handlers/gestures/eventReceiver';
+
+export function initialize() {
+  startListening();
+}

package/src/mocks.ts

@@ -1,19 +1,59 @@
-import { View, ScrollView as RNScrollView } from 'react-native';
+import {
+  TouchableHighlight,
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  ScrollView,
+  FlatList,
+  Switch,
+  TextInput,
+  DrawerLayoutAndroid,
+  View,
+} from 'react-native';
 import { State } from './State';
 import { Directions } from './Directions';
 
 const NOOP = () => {
   // do nothing
 };
-const ScrollView = RNScrollView;
 const PanGestureHandler = View;
 const attachGestureHandler = NOOP;
 const createGestureHandler = NOOP;
 const dropGestureHandler = NOOP;
 const updateGestureHandler = NOOP;
+const NativeViewGestureHandler = View;
+const TapGestureHandler = View;
+const ForceTouchGestureHandler = View;
+const LongPressGestureHandler = View;
+const PinchGestureHandler = View;
+const RotationGestureHandler = View;
+const FlingGestureHandler = View;
+const RawButton = TouchableNativeFeedback;
+const BaseButton = TouchableNativeFeedback;
+const RectButton = TouchableNativeFeedback;
+const BorderlessButton = TouchableNativeFeedback;
 
 export default {
+  TouchableHighlight,
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
   ScrollView,
+  FlatList,
+  Switch,
+  TextInput,
+  DrawerLayoutAndroid,
+  NativeViewGestureHandler,
+  TapGestureHandler,
+  ForceTouchGestureHandler,
+  LongPressGestureHandler,
+  PinchGestureHandler,
+  RotationGestureHandler,
+  FlingGestureHandler,
+  RawButton,
+  BaseButton,
+  RectButton,
+  BorderlessButton,
   PanGestureHandler,
   attachGestureHandler,
   createGestureHandler,

package/src/utils.ts

@@ -0,0 +1,7 @@
+export function toArray<T>(object: T | T[]): T[] {
+  if (!Array.isArray(object)) {
+    return [object];
+  }
+
+  return object;
+}

package/src/web/GestureHandler.ts

@@ -466,8 +466,7 @@ function invokeNullableMethod(
         if ('__nodeConfig' in method) {
           const { argMapping } = method.__nodeConfig;
           if (Array.isArray(argMapping)) {
-            for (const index in argMapping) {
-              const [key, value] = argMapping[index];
+            for (const [index, [key, value]] of argMapping.entries()) {
               if (key in event.nativeEvent) {
                 // @ts-ignore fix method type
                 const nativeValue = event.nativeEvent[key];

package/src/web/NodeManager.ts

@@ -22,6 +22,11 @@ export function createGestureHandler(
 }
 
 export function dropGestureHandler(handlerTag: number) {
+  // Since React 18, there are cases where componentWillUnmount gets called twice in a row
+  // so skip this if the tag was already removed.
+  if (!(handlerTag in gestures)) {
+    return;
+  }
   getHandler(handlerTag).destroy();
   // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
   delete gestures[handlerTag];

package/android/lib/src/main/java/com/swmansion/gesturehandler/BaseGestureHandlerInteractionController.java

@@ -1,23 +0,0 @@
-package com.swmansion.gesturehandler;
-
-public abstract class BaseGestureHandlerInteractionController
-        implements GestureHandlerInteractionController {
-
-  @Override
-  public boolean shouldWaitForHandlerFailure(GestureHandler handler,
-                                             GestureHandler otherHandler) {
-    return false;
-  }
-
-  @Override
-  public boolean shouldRequireHandlerToWaitForFailure(GestureHandler handler,
-                                                      GestureHandler otherHandler) {
-    return false;
-  }
-
-  @Override
-  public boolean shouldRecognizeSimultaneously(GestureHandler handler,
-                                               GestureHandler otherHandler) {
-    return false;
-  }
-}