react-native-gesture-handler 2.2.0 → 2.3.0

package/src/getShadowNodeFromRef.web.ts

@@ -0,0 +1,7 @@
+// Used by GestureDetector (unsupported on web at the moment) to check whether the
+// attached view may get flattened on Fabric. Original implementation causes errors
+// on web due to the static resolution of `require` statements by webpack breaking
+// the conditional importing.
+export function getShadowNodeFromRef(_ref: any) {
+  return null;
+}

package/src/handlers/FlingGestureHandler.ts

@@ -42,13 +42,15 @@ export interface FlingGestureHandlerProps
   extends BaseGestureHandlerProps<FlingGestureHandlerEventPayload>,
     FlingGestureConfig {}
 
+export const flingHandlerName = 'FlingGestureHandler';
+
 export type FlingGestureHandler = typeof FlingGestureHandler;
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const FlingGestureHandler = createHandler<
   FlingGestureHandlerProps,
   FlingGestureHandlerEventPayload
 >({
-  name: 'FlingGestureHandler',
+  name: flingHandlerName,
   allowedProps: [
     ...baseGestureHandlerProps,
     ...flingGestureHandlerProps,

package/src/handlers/ForceTouchGestureHandler.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { tagMessage } from '../utils';
 import PlatformConstants from '../PlatformConstants';
 import createHandler from './createHandler';
 import {
@@ -16,7 +17,9 @@ class ForceTouchFallback extends React.Component {
   static forceTouchAvailable = false;
   componentDidMount() {
     console.warn(
-      'ForceTouchGestureHandler is not available on this platform. Please use ForceTouchGestureHandler.forceTouchAvailable to conditionally render other components that would provide a fallback behavior specific to your usecase'
+      tagMessage(
+        'ForceTouchGestureHandler is not available on this platform. Please use ForceTouchGestureHandler.forceTouchAvailable to conditionally render other components that would provide a fallback behavior specific to your usecase'
+      )
     );
   }
   render() {
@@ -64,13 +67,16 @@ export interface ForceTouchGestureHandlerProps
 export type ForceTouchGestureHandler = typeof ForceTouchGestureHandler & {
   forceTouchAvailable: boolean;
 };
+
+export const forceTouchHandlerName = 'ForceTouchGestureHandler';
+
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const ForceTouchGestureHandler = PlatformConstants?.forceTouchAvailable
   ? createHandler<
       ForceTouchGestureHandlerProps,
       ForceTouchGestureHandlerEventPayload
     >({
-      name: 'ForceTouchGestureHandler',
+      name: forceTouchHandlerName,
       allowedProps: [
         ...baseGestureHandlerProps,
         ...forceTouchGestureHandlerProps,

package/src/handlers/LongPressGestureHandler.ts

@@ -69,13 +69,15 @@ export interface LongPressGestureHandlerProps
   extends BaseGestureHandlerProps<LongPressGestureHandlerEventPayload>,
     LongPressGestureConfig {}
 
+export const longPressHandlerName = 'LongPressGestureHandler';
+
 export type LongPressGestureHandler = typeof LongPressGestureHandler;
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const LongPressGestureHandler = createHandler<
   LongPressGestureHandlerProps,
   LongPressGestureHandlerEventPayload
 >({
-  name: 'LongPressGestureHandler',
+  name: longPressHandlerName,
   allowedProps: [
     ...baseGestureHandlerProps,
     ...longPressGestureHandlerProps,

package/src/handlers/NativeViewGestureHandler.ts

@@ -41,13 +41,15 @@ export const nativeViewProps = [
   ...nativeViewGestureHandlerProps,
 ] as const;
 
+export const nativeViewHandlerName = 'NativeViewGestureHandler';
+
 export type NativeViewGestureHandler = typeof NativeViewGestureHandler;
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const NativeViewGestureHandler = createHandler<
   NativeViewGestureHandlerProps,
   NativeViewGestureHandlerPayload
 >({
-  name: 'NativeViewGestureHandler',
+  name: nativeViewHandlerName,
   allowedProps: nativeViewProps,
   config: {},
 });

package/src/handlers/PanGestureHandler.ts

@@ -181,13 +181,15 @@ export interface PanGestureHandlerProps
   failOffsetX?: number | number[];
 }
 
+export const panHandlerName = 'PanGestureHandler';
+
 export type PanGestureHandler = typeof PanGestureHandler;
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const PanGestureHandler = createHandler<
   PanGestureHandlerProps,
   PanGestureHandlerEventPayload
 >({
-  name: 'PanGestureHandler',
+  name: panHandlerName,
   allowedProps: [
     ...baseGestureHandlerProps,
     ...panGestureHandlerProps,

package/src/handlers/PinchGestureHandler.ts

@@ -34,13 +34,15 @@ export type PinchGestureHandlerEventPayload = {
 export interface PinchGestureHandlerProps
   extends BaseGestureHandlerProps<PinchGestureHandlerEventPayload> {}
 
+export const pinchHandlerName = 'PinchGestureHandler';
+
 export type PinchGestureHandler = typeof PinchGestureHandler;
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const PinchGestureHandler = createHandler<
   PinchGestureHandlerProps,
   PinchGestureHandlerEventPayload
 >({
-  name: 'PinchGestureHandler',
+  name: pinchHandlerName,
   allowedProps: baseGestureHandlerProps,
   config: {},
 });

package/src/handlers/RotationGestureHandler.ts

@@ -34,13 +34,15 @@ export type RotationGestureHandlerEventPayload = {
 export interface RotationGestureHandlerProps
   extends BaseGestureHandlerProps<RotationGestureHandlerEventPayload> {}
 
+export const rotationHandlerName = 'RotationGestureHandler';
+
 export type RotationGestureHandler = typeof RotationGestureHandler;
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const RotationGestureHandler = createHandler<
   RotationGestureHandlerProps,
   RotationGestureHandlerEventPayload
 >({
-  name: 'RotationGestureHandler',
+  name: rotationHandlerName,
   allowedProps: baseGestureHandlerProps,
   config: {},
 });

package/src/handlers/TapGestureHandler.ts

@@ -75,13 +75,15 @@ export interface TapGestureHandlerProps
   extends BaseGestureHandlerProps<TapGestureHandlerEventPayload>,
     TapGestureConfig {}
 
+export const tapHandlerName = 'TapGestureHandler';
+
 export type TapGestureHandler = typeof TapGestureHandler;
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const TapGestureHandler = createHandler<
   TapGestureHandlerProps,
   TapGestureHandlerEventPayload
 >({
-  name: 'TapGestureHandler',
+  name: tapHandlerName,
   allowedProps: [
     ...baseGestureHandlerProps,
     ...tapGestureHandlerProps,

package/src/handlers/createHandler.ts

@@ -11,7 +11,11 @@ import deepEqual from 'lodash/isEqual';
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
 import type RNGestureHandlerModuleWeb from '../RNGestureHandlerModule.web';
 import { State } from '../State';
-import { handlerIDToTag, getNextHandlerTag } from './handlersRegistry';
+import {
+  handlerIDToTag,
+  getNextHandlerTag,
+  registerOldGestureHandler,
+} from './handlersRegistry';
 
 import {
   BaseGestureHandlerProps,
@@ -21,14 +25,35 @@ import {
   findNodeHandle,
 } from './gestureHandlerCommon';
 import { ValueOf } from '../typeUtils';
+import { isFabric, isJestEnv, tagMessage } from '../utils';
+import { ActionType } from '../ActionType';
 
 const UIManagerAny = UIManager as any;
 
+const customGHEventsConfigFabricAndroid = {
+  topOnGestureHandlerEvent: { registrationName: 'onGestureHandlerEvent' },
+  topOnGestureHandlerStateChange: {
+    registrationName: 'onGestureHandlerStateChange',
+  },
+};
+
 const customGHEventsConfig = {
   onGestureHandlerEvent: { registrationName: 'onGestureHandlerEvent' },
   onGestureHandlerStateChange: {
     registrationName: 'onGestureHandlerStateChange',
   },
+
+  // When using React Native Gesture Handler for Animated.event with useNativeDriver: true
+  // on Android with Fabric enabled, the native part still sends the native events to JS
+  // but prefixed with "top". We cannot simply rename the events above so they are prefixed
+  // with "top" instead of "on" because in such case Animated.events would not be registered.
+  // That's why we need to register another pair of event names.
+  // The incoming events will be queued but never handled.
+  // Without this piece of code below, you'll get the following JS error:
+  // Unsupported top level event type "topOnGestureHandlerEvent" dispatched
+  ...(isFabric() &&
+    Platform.OS === 'android' &&
+    customGHEventsConfigFabricAndroid),
 };
 
 // Add gesture specific events to genericDirectEventTypes object exported from UIManager
@@ -126,7 +151,9 @@ let showedRngh2Notice = false;
 function showRngh2NoticeIfNeeded() {
   if (!showedRngh2Notice) {
     console.warn(
-      "[react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system!"
+      tagMessage(
+        "Seems like you're using an old API with gesture components, check out new Gestures system!"
+      )
     );
     showedRngh2Notice = true;
   }
@@ -172,7 +199,7 @@ export default function createHandler<
         }
         handlerIDToTag[props.id] = this.handlerTag;
       }
-      if (__DEV__) {
+      if (__DEV__ && !isJestEnv()) {
         showRngh2NoticeIfNeeded();
       }
     }
@@ -237,7 +264,9 @@ export default function createHandler<
 
     private onGestureHandlerEvent = (event: GestureEvent<U>) => {
       if (event.nativeEvent.handlerTag === this.handlerTag) {
-        this.props.onGestureEvent?.(event);
+        if (typeof this.props.onGestureEvent === 'function') {
+          this.props.onGestureEvent?.(event);
+        }
       } else {
         this.props.onGestureHandlerEvent?.(event);
       }
@@ -248,7 +277,9 @@ export default function createHandler<
       event: HandlerStateChangeEvent<U>
     ) => {
       if (event.nativeEvent.handlerTag === this.handlerTag) {
-        this.props.onHandlerStateChange?.(event);
+        if (typeof this.props.onHandlerStateChange === 'function') {
+          this.props.onHandlerStateChange?.(event);
+        }
 
         const state: ValueOf<typeof State> = event.nativeEvent.state;
         const stateEventName = stateToPropMappings[state];
@@ -296,14 +327,38 @@ export default function createHandler<
         (RNGestureHandlerModule.attachGestureHandler as typeof RNGestureHandlerModuleWeb.attachGestureHandler)(
           this.handlerTag,
           newViewTag,
-          false,
+          ActionType.JS_FUNCTION_OLD_API, // ignored on web
           this.propsRef
         );
       } else {
+        registerOldGestureHandler(this.handlerTag, {
+          onGestureEvent: this.onGestureHandlerEvent,
+          onGestureStateChange: this.onGestureHandlerStateChange,
+        });
+
+        const actionType = (() => {
+          if (
+            this.props?.onGestureEvent &&
+            'current' in this.props.onGestureEvent
+          ) {
+            // Reanimated worklet
+            return ActionType.REANIMATED_WORKLET;
+          } else if (
+            this.props?.onGestureEvent &&
+            '__isNative' in this.props.onGestureEvent
+          ) {
+            // Animated.event with useNativeDriver: true
+            return ActionType.NATIVE_ANIMATED_EVENT;
+          } else {
+            // JS callback or Animated.event with useNativeDriver: false
+            return ActionType.JS_FUNCTION_OLD_API;
+          }
+        })();
+
         RNGestureHandlerModule.attachGestureHandler(
           this.handlerTag,
           newViewTag,
-          false
+          actionType
         );
       }
     };
@@ -433,6 +488,13 @@ export default function createHandler<
         {
           ref: this.refHandler,
           collapsable: false,
+          ...(isJestEnv()
+            ? {
+                handlerType: name,
+                handlerTag: this.handlerTag,
+              }
+            : {}),
+          testID: this.props.testID,
           ...events,
         },
         grandChildren

package/src/handlers/createNativeWrapper.tsx

@@ -68,7 +68,13 @@ export default function createNativeWrapper<P>(
     );
   });
 
-  ComponentWrapper.displayName = Component.displayName || 'ComponentWrapper';
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  ComponentWrapper.displayName =
+    Component?.displayName ||
+    // @ts-ignore if render doesn't exist it will return undefined and go further
+    Component?.render?.name ||
+    (typeof Component === 'string' && Component) ||
+    'ComponentWrapper';
 
   return ComponentWrapper;
 }

package/src/handlers/gestureHandlerCommon.ts

@@ -43,11 +43,7 @@ export interface GestureEventPayload {
   numberOfPointers: number;
   state: ValueOf<typeof State>;
 }
-
-export interface HandlerStateChangeEventPayload {
-  handlerTag: number;
-  numberOfPointers: number;
-  state: ValueOf<typeof State>;
+export interface HandlerStateChangeEventPayload extends GestureEventPayload {
   oldState: ValueOf<typeof State>;
 }
 
@@ -114,6 +110,7 @@ export type BaseGestureHandlerProps<
   id?: string;
   waitFor?: React.Ref<unknown> | React.Ref<unknown>[];
   simultaneousHandlers?: React.Ref<unknown> | React.Ref<unknown>[];
+  testID?: string;
   // TODO(TS) - fix event types
   onBegan?: (event: HandlerStateChangeEvent) => void;
   onFailed?: (event: HandlerStateChangeEvent) => void;

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 },