react-native-gesture-handler 2.2.0 → 2.3.0

package/src/handlers/gestures/eventReceiver.ts

@@ -7,32 +7,29 @@ import {
   GestureStateChangeEvent,
 } from '../gestureHandlerCommon';
 import { GestureStateManagerType } from './gestureStateManager';
-import { findHandler } from '../handlersRegistry';
+import { findHandler, findOldGestureHandler } from '../handlersRegistry';
 import { BaseGesture } from './gesture';
+import { tagMessage } from '../../utils';
 
 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(
-      'You have to use react-native-reanimated in order to control the state of the gesture.'
-    );
+    console.warn(warningMessage);
   },
   activate: () => {
-    console.warn(
-      'You have to use react-native-reanimated in order to control the state of the gesture.'
-    );
+    console.warn(warningMessage);
   },
   end: () => {
-    console.warn(
-      'You have to use react-native-reanimated in order to control the state of the gesture.'
-    );
+    console.warn(warningMessage);
   },
   fail: () => {
-    console.warn(
-      'You have to use react-native-reanimated in order to control the state of the gesture.'
-    );
+    console.warn(warningMessage);
   },
 };
 
@@ -117,6 +114,17 @@ function onGestureHandlerEvent(
         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;
+    }
   }
 }
 
@@ -136,16 +144,12 @@ export function startListening() {
 
 export function stopListening() {
   if (gestureHandlerEventSubscription) {
-    DeviceEventEmitter.removeSubscription(gestureHandlerEventSubscription);
-
+    gestureHandlerEventSubscription.remove();
     gestureHandlerEventSubscription = null;
   }
 
   if (gestureHandlerStateChangeEventSubscription) {
-    DeviceEventEmitter.removeSubscription(
-      gestureHandlerStateChangeEventSubscription
-    );
-
+    gestureHandlerStateChangeEventSubscription.remove();
     gestureHandlerStateChangeEventSubscription = null;
   }
 }

package/src/handlers/gestures/forceTouchGesture.ts

@@ -5,7 +5,7 @@ import {
 } from '../ForceTouchGestureHandler';
 import { GestureUpdateEvent } from '../gestureHandlerCommon';
 
-type ForceTouchGestureChangeEventPayload = {
+export type ForceTouchGestureChangeEventPayload = {
   forceChange: number;
 };
 

package/src/handlers/gestures/gesture.ts

@@ -41,6 +41,8 @@ export interface BaseGestureConfig
   simultaneousWith?: GestureRef[];
   needsPointerData?: boolean;
   manualActivation?: boolean;
+  runOnJS?: boolean;
+  testId?: string;
 }
 
 type TouchEventHandlerType = (
@@ -119,7 +121,7 @@ export abstract class BaseGesture<
   public config: BaseGestureConfig = {};
   public handlers: HandlerCallbacks<EventPayloadT> = {
     handlerTag: -1,
-    isWorklet: [false, false, false, false],
+    isWorklet: [],
   };
 
   private addDependency(
@@ -234,6 +236,11 @@ export abstract class BaseGesture<
     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);
@@ -248,8 +255,14 @@ export abstract class BaseGesture<
     return this;
   }
 
+  withTestId(id: string) {
+    this.config.testId = id;
+    return this;
+  }
+
   initialize() {
     this.handlerTag = getNextHandlerTag();
+
     this.handlers = { ...this.handlers, handlerTag: this.handlerTag };
 
     if (this.config.ref) {
@@ -263,6 +276,13 @@ export abstract class BaseGesture<
 
   // 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
+    return (
+      this.config.runOnJS !== true && !this.handlers.isWorklet.includes(false)
+    );
+  }
 }
 
 export abstract class ContinousBaseGesture<

package/src/handlers/gestures/gestureStateManager.ts

@@ -1,5 +1,6 @@
 import { Reanimated } from './reanimatedWrapper';
 import { State } from '../../State';
+import { tagMessage } from '../../utils';
 
 export interface GestureStateManagerType {
   begin: () => void;
@@ -8,6 +9,10 @@ export interface GestureStateManagerType {
   end: () => void;
 }
 
+const warningMessage = tagMessage(
+  'react-native-reanimated is required in order to use synchronous state management'
+);
+
 export const GestureStateManager = {
   create(handlerTag: number): GestureStateManagerType {
     'worklet';
@@ -17,9 +22,7 @@ export const GestureStateManager = {
         if (Reanimated) {
           Reanimated.setGestureState(handlerTag, State.BEGAN);
         } else {
-          console.warn(
-            'react-native-reanimated is required in order to use synchronous state management'
-          );
+          console.warn(warningMessage);
         }
       },
 
@@ -28,9 +31,7 @@ export const GestureStateManager = {
         if (Reanimated) {
           Reanimated.setGestureState(handlerTag, State.ACTIVE);
         } else {
-          console.warn(
-            'react-native-reanimated is required in order to use synchronous state management'
-          );
+          console.warn(warningMessage);
         }
       },
 
@@ -39,9 +40,7 @@ export const GestureStateManager = {
         if (Reanimated) {
           Reanimated.setGestureState(handlerTag, State.FAILED);
         } else {
-          console.warn(
-            'react-native-reanimated is required in order to use synchronous state management'
-          );
+          console.warn(warningMessage);
         }
       },
 
@@ -50,9 +49,7 @@ export const GestureStateManager = {
         if (Reanimated) {
           Reanimated.setGestureState(handlerTag, State.END);
         } else {
-          console.warn(
-            'react-native-reanimated is required in order to use synchronous state management'
-          );
+          console.warn(warningMessage);
         }
       },
     };

package/src/handlers/gestures/panGesture.ts

@@ -5,7 +5,7 @@ import {
   PanGestureHandlerEventPayload,
 } from '../PanGestureHandler';
 
-type PanGestureChangeEventPayload = {
+export type PanGestureChangeEventPayload = {
   changeX: number;
   changeY: number;
 };

package/src/handlers/gestures/pinchGesture.ts

@@ -2,7 +2,7 @@ import { ContinousBaseGesture } from './gesture';
 import { PinchGestureHandlerEventPayload } from '../PinchGestureHandler';
 import { GestureUpdateEvent } from '../gestureHandlerCommon';
 
-type PinchGestureChangeEventPayload = {
+export type PinchGestureChangeEventPayload = {
   scaleChange: number;
 };
 

package/src/handlers/gestures/reanimatedWrapper.ts

@@ -3,6 +3,7 @@ import {
   GestureUpdateEvent,
   GestureStateChangeEvent,
 } from '../gestureHandlerCommon';
+import { tagMessage } from '../../utils';
 
 export interface SharedValue<T> {
   value: T;
@@ -33,7 +34,9 @@ try {
     Reanimated.setGestureState = () => {
       'worklet';
       console.warn(
-        'Please use newer version of react-native-reanimated in order to control state of the gestures.'
+        tagMessage(
+          'Please use newer version of react-native-reanimated in order to control state of the gestures.'
+        )
       );
     };
   }

package/src/handlers/handlersRegistry.ts

@@ -1,7 +1,11 @@
+import { isJestEnv } from '../utils';
 import { GestureType } from './gestures/gesture';
+import { GestureEvent, HandlerStateChangeEvent } from './gestureHandlerCommon';
 
 export const handlerIDToTag: Record<string, number> = {};
-const handlers = new Map<number, GestureType>();
+const gestures = new Map<number, GestureType>();
+const oldHandlers = new Map<number, GestureHandlerCallbacks>();
+const testIDs = new Map<string, number>();
 
 let handlerTag = 1;
 
@@ -9,14 +13,48 @@ export function getNextHandlerTag(): number {
   return handlerTag++;
 }
 
-export function registerHandler(handlerTag: number, handler: GestureType) {
-  handlers.set(handlerTag, handler);
+export function registerHandler(
+  handlerTag: number,
+  handler: GestureType,
+  testID?: string
+) {
+  gestures.set(handlerTag, handler);
+  if (isJestEnv() && testID) {
+    testIDs.set(testID, handlerTag);
+  }
 }
 
-export function unregisterHandler(handlerTag: number) {
-  handlers.delete(handlerTag);
+export function registerOldGestureHandler(
+  handlerTag: number,
+  handler: GestureHandlerCallbacks
+) {
+  oldHandlers.set(handlerTag, handler);
+}
+
+export function unregisterHandler(handlerTag: number, testID?: string) {
+  gestures.delete(handlerTag);
+  if (isJestEnv() && testID) {
+    testIDs.delete(testID);
+  }
 }
 
 export function findHandler(handlerTag: number) {
-  return handlers.get(handlerTag);
+  return gestures.get(handlerTag);
+}
+
+export function findOldGestureHandler(handlerTag: number) {
+  return oldHandlers.get(handlerTag);
+}
+
+export function findHandlerByTestID(testID: string) {
+  const handlerTag = testIDs.get(testID);
+  if (handlerTag !== undefined) {
+    return findHandler(handlerTag) ?? null;
+  }
+  return null;
+}
+
+export interface GestureHandlerCallbacks {
+  onGestureEvent: (event: GestureEvent<any>) => void;
+  onGestureStateChange: (event: HandlerStateChangeEvent<any>) => void;
 }

package/src/index.ts

@@ -2,6 +2,7 @@ import { initialize } from './init';
 
 export { Directions } from './Directions';
 export { State } from './State';
+export { getByGestureTestId, fireGestureHandler } from './jestUtils';
 export { default as gestureHandlerRootHOC } from './gestureHandlerRootHOC';
 export { default as GestureHandlerRootView } from './GestureHandlerRootView';
 export type {
@@ -27,6 +28,7 @@ export type {
   ForceTouchGestureHandlerEventPayload,
   ForceTouchGestureHandlerProps,
 } from './handlers/ForceTouchGestureHandler';
+export type { ForceTouchGestureChangeEventPayload } from './handlers/gestures/forceTouchGesture';
 export type {
   LongPressGestureHandlerEventPayload,
   LongPressGestureHandlerProps,
@@ -35,10 +37,12 @@ export type {
   PanGestureHandlerEventPayload,
   PanGestureHandlerProps,
 } from './handlers/PanGestureHandler';
+export type { PanGestureChangeEventPayload } from './handlers/gestures/panGesture';
 export type {
   PinchGestureHandlerEventPayload,
   PinchGestureHandlerProps,
 } from './handlers/PinchGestureHandler';
+export type { PinchGestureChangeEventPayload } from './handlers/gestures/pinchGesture';
 export type {
   RotationGestureHandlerEventPayload,
   RotationGestureHandlerProps,

package/src/init.ts

@@ -1,5 +1,11 @@
 import { startListening } from './handlers/gestures/eventReceiver';
+import RNGestureHandlerModule from './RNGestureHandlerModule';
+import { isFabric } from './utils';
 
 export function initialize() {
   startListening();
+
+  if (isFabric()) {
+    RNGestureHandlerModule.install();
+  }
 }