react-native-gesture-handler 2.1.3 → 2.3.1

package/src/handlers/gestures/GestureDetector.tsx

@@ -32,6 +32,13 @@ import { tapGestureHandlerProps } from '../TapGestureHandler';
 import { State } from '../../State';
 import { EventType } from '../../EventType';
 import { ComposedGesture } from './gestureComposition';
+import { ActionType } from '../../ActionType';
+import { isFabric, tagMessage } from '../../utils';
+import { getShadowNodeFromRef } from '../../getShadowNodeFromRef';
+
+declare global {
+  function isFormsStackingContext(node: unknown): boolean | null; // JSI function
+}
 
 const ALLOWED_PROPS = [
   ...baseGestureHandlerWithMonitorProps,
@@ -50,7 +57,7 @@ export type GestureConfigReference = {
     HandlerCallbacks<Record<string, unknown>>[] | null
   > | null;
   firstExecution: boolean;
-  useAnimated: boolean;
+  useReanimatedHook: boolean;
 };
 
 function convertToHandlerTag(ref: GestureRef): number {
@@ -75,7 +82,28 @@ function dropHandlers(preparedGesture: GestureConfigReference) {
   for (const handler of preparedGesture.config) {
     RNGestureHandlerModule.dropGestureHandler(handler.handlerTag);
 
-    unregisterHandler(handler.handlerTag);
+    unregisterHandler(handler.handlerTag, handler.config.testId);
+  }
+}
+
+function checkGestureCallbacksForWorklets(gesture: GestureType) {
+  // if a gesture is explicitly marked to run on the JS thread there is no need to check
+  // if callbacks are worklets as the user is aware they will be ran on the JS thread
+  if (gesture.config.runOnJS) {
+    return;
+  }
+
+  const areSomeNotWorklets = gesture.handlers.isWorklet.includes(false);
+  const areSomeWorklets = gesture.handlers.isWorklet.includes(true);
+
+  // if some of the callbacks are worklets and some are not, and the gesture is not
+  // explicitly marked with `.runOnJS(true)` show an error
+  if (areSomeNotWorklets && areSomeWorklets) {
+    console.error(
+      tagMessage(
+        `Some of the callbacks in the gesture are worklets and some are not. Either make sure that all calbacks are marked as 'worklet' if you wish to run them on the UI thread or use '.runOnJS(true)' modifier on the gesture explicitly to run all callbacks on the JS thread.`
+      )
+    );
   }
 }
 
@@ -84,7 +112,6 @@ interface AttachHandlersConfig {
   gestureConfig: ComposedGesture | GestureType | undefined;
   gesture: GestureType[];
   viewTag: number;
-  useAnimated: boolean;
 }
 
 function attachHandlers({
@@ -92,7 +119,6 @@ function attachHandlers({
   gestureConfig,
   gesture,
   viewTag,
-  useAnimated,
 }: AttachHandlersConfig) {
   if (!preparedGesture.firstExecution) {
     gestureConfig?.initialize();
@@ -107,13 +133,15 @@ function attachHandlers({
   });
 
   for (const handler of gesture) {
+    checkGestureCallbacksForWorklets(handler);
+
     RNGestureHandlerModule.createGestureHandler(
       handler.handlerName,
       handler.handlerTag,
       filterConfig(handler.config, ALLOWED_PROPS)
     );
 
-    registerHandler(handler.handlerTag, handler);
+    registerHandler(handler.handlerTag, handler, handler.config.testId);
 
     // use setImmediate to extract handlerTags, because all refs should be initialized
     // when it's ran
@@ -142,17 +170,25 @@ function attachHandlers({
   preparedGesture.config = gesture;
 
   for (const gesture of preparedGesture.config) {
+    const actionType = gesture.shouldUseReanimated
+      ? ActionType.REANIMATED_WORKLET
+      : ActionType.JS_FUNCTION_NEW_API;
+
     RNGestureHandlerModule.attachGestureHandler(
       gesture.handlerTag,
       viewTag,
-      !useAnimated // send direct events when using animatedGesture, device events otherwise
+      actionType
     );
   }
 
   if (preparedGesture.animatedHandlers) {
-    preparedGesture.animatedHandlers.value = (gesture.map(
-      (g) => g.handlers
-    ) as unknown) as HandlerCallbacks<Record<string, unknown>>[];
+    const isAnimatedGesture = (g: GestureType) => g.shouldUseReanimated;
+
+    preparedGesture.animatedHandlers.value = (gesture
+      .filter(isAnimatedGesture)
+      .map((g) => g.handlers) as unknown) as HandlerCallbacks<
+      Record<string, unknown>
+    >[];
   }
 }
 
@@ -165,9 +201,14 @@ function updateHandlers(
 
   for (let i = 0; i < gesture.length; i++) {
     const handler = preparedGesture.config[i];
+    checkGestureCallbacksForWorklets(handler);
 
-    gesture[i].handlerTag = handler.handlerTag;
-    gesture[i].handlers.handlerTag = handler.handlerTag;
+    // only update handlerTag when it's actually different, it may be the same
+    // if gesture config object is wrapped with useMemo
+    if (gesture[i].handlerTag !== handler.handlerTag) {
+      gesture[i].handlerTag = handler.handlerTag;
+      gesture[i].handlers.handlerTag = handler.handlerTag;
+    }
   }
 
   // use setImmediate to extract handlerTags, because when it's ran, all refs should be updated
@@ -179,7 +220,6 @@ function updateHandlers(
 
       handler.config = gesture[i].config;
       handler.handlers = gesture[i].handlers;
-      handler.handlers.handlerTag = handler.handlerTag;
 
       const requireToFail = extractValidHandlerTags(
         handler.config.requireToFail
@@ -197,13 +237,15 @@ function updateHandlers(
         })
       );
 
-      registerHandler(handler.handlerTag, handler);
+      registerHandler(handler.handlerTag, handler, handler.config.testId);
     }
 
     if (preparedGesture.animatedHandlers) {
-      preparedGesture.animatedHandlers.value = (preparedGesture.config.map(
-        (g) => g.handlers
-      ) as unknown) as HandlerCallbacks<Record<string, unknown>>[];
+      preparedGesture.animatedHandlers.value = (preparedGesture.config
+        .filter((g) => g.shouldUseReanimated) // ignore gestures that shouldn't run on UI
+        .map((g) => g.handlers) as unknown) as HandlerCallbacks<
+        Record<string, unknown>
+      >[];
     }
   });
 }
@@ -216,7 +258,11 @@ function needsToReattach(
     return true;
   }
   for (let i = 0; i < gesture.length; i++) {
-    if (gesture[i].handlerName !== preparedGesture.config[i].handlerName) {
+    if (
+      gesture[i].handlerName !== preparedGesture.config[i].handlerName ||
+      gesture[i].shouldUseReanimated !==
+        preparedGesture.config[i].shouldUseReanimated
+    ) {
       return true;
     }
   }
@@ -224,7 +270,10 @@ function needsToReattach(
   return false;
 }
 
-function useAnimatedGesture(preparedGesture: GestureConfigReference) {
+function useAnimatedGesture(
+  preparedGesture: GestureConfigReference,
+  needsRebuild: boolean
+) {
   if (!Reanimated) {
     return;
   }
@@ -301,7 +350,7 @@ function useAnimatedGesture(preparedGesture: GestureConfigReference) {
       // correct handler.
       handler?.(event, ...args);
     } else if (handler) {
-      console.warn('Animated gesture callback must be a worklet');
+      console.warn(tagMessage('Animated gesture callback must be a worklet'));
     }
   }
 
@@ -401,7 +450,7 @@ function useAnimatedGesture(preparedGesture: GestureConfigReference) {
   const event = Reanimated.useEvent(
     callback,
     ['onGestureHandlerStateChange', 'onGestureHandlerEvent'],
-    true
+    needsRebuild
   );
 
   preparedGesture.animatedEventHandler = event;
@@ -416,10 +465,7 @@ export const GestureDetector: React.FunctionComponent<GestureDetectorProps> = (
 ) => {
   const gestureConfig = props.gesture;
   const gesture = gestureConfig?.toGestureArray?.() ?? [];
-  const useAnimated =
-    gesture.find((gesture) =>
-      gesture.handlers.isWorklet.reduce((prev, current) => prev || current)
-    ) != null;
+  const useReanimatedHook = gesture.some((g) => g.shouldUseReanimated);
   const viewRef = useRef(null);
   const firstRenderRef = useRef(true);
 
@@ -428,24 +474,30 @@ export const GestureDetector: React.FunctionComponent<GestureDetectorProps> = (
     animatedEventHandler: null,
     animatedHandlers: null,
     firstExecution: true,
-    useAnimated: useAnimated,
+    useReanimatedHook: useReanimatedHook,
   }).current;
 
-  if (useAnimated !== preparedGesture.useAnimated) {
+  if (useReanimatedHook !== preparedGesture.useReanimatedHook) {
     throw new Error(
-      'You cannot change whether you are using gesture or animatedGesture while the app is running'
+      tagMessage(
+        'You cannot change the thread the callbacks are ran on while the app is running'
+      )
     );
   }
 
+  // Reanimated event should be rebuilt only when gestures are reattached, otherwise
+  // config update will be enough as all necessary items are stored in shared values anyway
+  const needsToRebuildReanimatedEvent =
+    preparedGesture.firstExecution || needsToReattach(preparedGesture, gesture);
+
   if (preparedGesture.firstExecution) {
     gestureConfig?.initialize?.();
   }
 
-  if (useAnimated) {
-    // Whether animatedGesture or gesture is used shouldn't change
-    // during while an app is running
+  if (useReanimatedHook) {
+    // Whether animatedGesture or gesture is used shouldn't change while the app is running
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useAnimatedGesture(preparedGesture);
+    useAnimatedGesture(preparedGesture, needsToRebuildReanimatedEvent);
   }
 
   useEffect(() => {
@@ -456,7 +508,6 @@ export const GestureDetector: React.FunctionComponent<GestureDetectorProps> = (
       gestureConfig,
       gesture,
       viewTag,
-      useAnimated,
     });
 
     return () => {
@@ -475,7 +526,6 @@ export const GestureDetector: React.FunctionComponent<GestureDetectorProps> = (
           gestureConfig,
           gesture,
           viewTag,
-          useAnimated,
         });
       } else {
         updateHandlers(preparedGesture, gestureConfig, gesture);
@@ -485,16 +535,40 @@ export const GestureDetector: React.FunctionComponent<GestureDetectorProps> = (
     }
   }, [props]);
 
-  if (useAnimated) {
+  const refFunction = (ref: unknown) => {
+    if (ref !== null) {
+      //@ts-ignore Just setting the ref
+      viewRef.current = ref;
+
+      if (isFabric()) {
+        const node = getShadowNodeFromRef(ref);
+        if (global.isFormsStackingContext(node) === false) {
+          setImmediate(() => {
+            // For some weird reason, console.error on iOS delays
+            // the execution of RNGestureHandlerModule.attachGestureHandler,
+            // so that's why we use setImmediate here.
+            console.error(
+              tagMessage(
+                'GestureDetector has received a child that may get view-flattened. ' +
+                  '\nTo prevent it from misbehaving you need to wrap the child with a `<View collapsable={false}>`.'
+              )
+            );
+          });
+        }
+      }
+    }
+  };
+
+  if (useReanimatedHook) {
     return (
       <AnimatedWrap
-        ref={viewRef}
+        ref={refFunction}
         onGestureHandlerEvent={preparedGesture.animatedEventHandler}>
         {props.children}
       </AnimatedWrap>
     );
   } else {
-    return <Wrap ref={viewRef}>{props.children}</Wrap>;
+    return <Wrap ref={refFunction}>{props.children}</Wrap>;
   }
 };
 
@@ -506,7 +580,6 @@ class Wrap extends React.Component<{ onGestureHandlerEvent?: unknown }> {
     // correct viewTag to attach to.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const child: any = React.Children.only(this.props.children);
-
     return React.cloneElement(
       child,
       { collapsable: false },

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();
+  }
 }