react-native-gesture-handler 2.21.2 → 2.22.0-rc.1

package/lib/typescript/handlers/utils.d.ts

@@ -2,5 +2,6 @@ import * as React from 'react';
 export declare function filterConfig(props: Record<string, unknown>, validProps: string[], defaults?: Record<string, unknown>): {
     [x: string]: unknown;
 };
+export declare function transformIntoHandlerTags(handlerIDs: any): any;
 export declare function findNodeHandle(node: null | number | React.Component<any, any> | React.ComponentClass<any>): null | number | React.Component<any, any> | React.ComponentClass<any>;
 export declare function scheduleFlushOperations(): void;

package/lib/typescript/index.d.ts

@@ -46,6 +46,7 @@ export { RawButton, BaseButton, RectButton, BorderlessButton, PureNativeButton,
 export type { TouchableHighlightProps, TouchableOpacityProps, TouchableWithoutFeedbackProps, } from './components/touchables';
 export { TouchableHighlight, TouchableNativeFeedback, TouchableOpacity, TouchableWithoutFeedback, } from './components/touchables';
 export { ScrollView, Switch, TextInput, DrawerLayoutAndroid, FlatList, RefreshControl, } from './components/GestureComponents';
+export { Text } from './components/Text';
 export { HoverEffect } from './handlers/gestures/hoverGesture';
 export type { GestureHandlerGestureEvent, GestureHandlerStateChangeEvent, GestureHandlerGestureEventNativeEvent, GestureHandlerStateChangeNativeEvent, NativeViewGestureHandlerGestureEvent, NativeViewGestureHandlerStateChangeEvent, TapGestureHandlerGestureEvent, TapGestureHandlerStateChangeEvent, ForceTouchGestureHandlerGestureEvent, ForceTouchGestureHandlerStateChangeEvent, LongPressGestureHandlerGestureEvent, LongPressGestureHandlerStateChangeEvent, PanGestureHandlerGestureEvent, PanGestureHandlerStateChangeEvent, PinchGestureHandlerGestureEvent, PinchGestureHandlerStateChangeEvent, RotationGestureHandlerGestureEvent, RotationGestureHandlerStateChangeEvent, FlingGestureHandlerGestureEvent, FlingGestureHandlerStateChangeEvent, NativeViewGestureHandlerProperties, TapGestureHandlerProperties, LongPressGestureHandlerProperties, PanGestureHandlerProperties, PinchGestureHandlerProperties, RotationGestureHandlerProperties, FlingGestureHandlerProperties, ForceTouchGestureHandlerProperties, RawButtonProperties, BaseButtonProperties, RectButtonProperties, BorderlessButtonProperties, } from './handlers/gestureHandlerTypesCompat';
 export type { SwipeableProps } from './components/Swipeable';

package/lib/typescript/mocks.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { TouchableHighlight, TouchableNativeFeedback, TouchableOpacity, TouchableWithoutFeedback, ScrollView, FlatList, Switch, TextInput, DrawerLayoutAndroid, View } from 'react-native';
+import { TouchableNativeFeedback, TouchableWithoutFeedback, ScrollView, FlatList, Switch, TextInput, DrawerLayoutAndroid, View } from 'react-native';
 declare const _default: {
-    readonly TouchableHighlight: typeof TouchableHighlight;
+    readonly TouchableHighlight: React.ForwardRefExoticComponent<import("react-native").TouchableHighlightProps & React.RefAttributes<View>>;
     readonly TouchableNativeFeedback: typeof TouchableNativeFeedback;
-    readonly TouchableOpacity: typeof TouchableOpacity;
+    readonly TouchableOpacity: React.ForwardRefExoticComponent<import("react-native").TouchableOpacityProps & React.RefAttributes<View>>;
     readonly TouchableWithoutFeedback: typeof TouchableWithoutFeedback;
     readonly ScrollView: typeof ScrollView;
     readonly FlatList: typeof FlatList;

package/lib/typescript/mountRegistry.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { GestureType } from './handlers/gestures/gesture';
+interface ReactComponentWithHandlerTag extends React.Component {
+    handlerTag: number;
+}
+export type GestureMountListener = (gesture: GestureType | ReactComponentWithHandlerTag) => void;
+export declare class MountRegistry {
+    private static mountListeners;
+    private static unmountListeners;
+    static addMountListener(listener: GestureMountListener): () => void;
+    static addUnmountListener(listener: GestureMountListener): () => void;
+    static gestureHandlerWillMount(handler: React.Component): void;
+    static gestureHandlerWillUnmount(handler: React.Component): void;
+    static gestureWillMount(gesture: GestureType): void;
+    static gestureWillUnmount(gesture: GestureType): void;
+}
+export {};

package/lib/typescript/web/handlers/FlingGestureHandler.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AdaptedEvent, Config } from '../interfaces';
 import GestureHandler from './GestureHandler';
 export default class FlingGestureHandler extends GestureHandler {
@@ -9,7 +8,6 @@ export default class FlingGestureHandler extends GestureHandler {
     private delayTimeout;
     private maxNumberOfPointersSimultaneously;
     private keyPointer;
-    init(ref: number, propsRef: React.RefObject<unknown>): void;
     updateGestureConfig({ enabled, ...props }: Config): void;
     private startFling;
     private tryEndFling;

package/lib/typescript/web/handlers/HoverGestureHandler.d.ts

@@ -1,11 +1,8 @@
-/// <reference types="react" />
-import { AdaptedEvent, Config } from '../interfaces';
+import { AdaptedEvent } from '../interfaces';
 import GestureHandler from './GestureHandler';
 export default class HoverGestureHandler extends GestureHandler {
     private stylusData;
-    init(ref: number, propsRef: React.RefObject<unknown>): void;
     protected transformNativeEvent(): Record<string, unknown>;
-    updateGestureConfig({ enabled, ...props }: Config): void;
     protected onPointerMoveOver(event: AdaptedEvent): void;
     protected onPointerMoveOut(event: AdaptedEvent): void;
     protected onPointerMove(event: AdaptedEvent): void;

package/lib/typescript/web/handlers/ManualGestureHandler.d.ts

@@ -1,9 +1,6 @@
-/// <reference types="react" />
-import { AdaptedEvent, Config } from '../interfaces';
+import { AdaptedEvent } from '../interfaces';
 import GestureHandler from './GestureHandler';
 export default class ManualGestureHandler extends GestureHandler {
-    init(ref: number, propsRef: React.RefObject<unknown>): void;
-    updateGestureConfig({ enabled, ...props }: Config): void;
     protected onPointerDown(event: AdaptedEvent): void;
     protected onPointerAdd(event: AdaptedEvent): void;
     protected onPointerMove(event: AdaptedEvent): void;

package/lib/typescript/web/handlers/NativeViewGestureHandler.d.ts

@@ -11,7 +11,6 @@ export default class NativeViewGestureHandler extends GestureHandler {
     init(ref: number, propsRef: React.RefObject<unknown>): void;
     updateGestureConfig({ enabled, ...props }: Config): void;
     private restoreViewStyles;
-    protected resetConfig(): void;
     protected onPointerDown(event: AdaptedEvent): void;
     protected onPointerAdd(event: AdaptedEvent): void;
     private newPointerAction;

package/lib/typescript/web/handlers/PanGestureHandler.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AdaptedEvent, Config, StylusData } from '../interfaces';
 import GestureHandler from './GestureHandler';
 export default class PanGestureHandler extends GestureHandler {
@@ -31,7 +30,6 @@ export default class PanGestureHandler extends GestureHandler {
     private enableTrackpadTwoFingerGesture;
     private endWheelTimeout;
     private wheelDevice;
-    init(ref: number, propsRef: React.RefObject<unknown>): void;
     updateGestureConfig({ enabled, ...props }: Config): void;
     protected resetConfig(): void;
     protected transformNativeEvent(): {

package/lib/typescript/web/handlers/PinchGestureHandler.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AdaptedEvent, Config } from '../interfaces';
+import { AdaptedEvent } from '../interfaces';
 import GestureHandler from './GestureHandler';
 export default class PinchGestureHandler extends GestureHandler {
     private scale;
@@ -9,7 +9,6 @@ export default class PinchGestureHandler extends GestureHandler {
     private scaleDetectorListener;
     private scaleGestureDetector;
     init(ref: number, propsRef: React.RefObject<unknown>): void;
-    updateGestureConfig({ enabled, ...props }: Config): void;
     protected transformNativeEvent(): {
         focalX: number;
         focalY: number;

package/lib/typescript/web/handlers/RotationGestureHandler.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AdaptedEvent, Config } from '../interfaces';
+import { AdaptedEvent } from '../interfaces';
 import GestureHandler from './GestureHandler';
 export default class RotationGestureHandler extends GestureHandler {
     private rotation;
@@ -9,7 +9,6 @@ export default class RotationGestureHandler extends GestureHandler {
     private rotationGestureListener;
     private rotationGestureDetector;
     init(ref: number, propsRef: React.RefObject<unknown>): void;
-    updateGestureConfig({ enabled, ...props }: Config): void;
     protected transformNativeEvent(): {
         rotation: number;
         anchorX: number;
@@ -25,6 +24,5 @@ export default class RotationGestureHandler extends GestureHandler {
     protected onPointerUp(event: AdaptedEvent): void;
     protected onPointerRemove(event: AdaptedEvent): void;
     protected tryBegin(): void;
-    activate(_force?: boolean): void;
     protected onReset(): void;
 }

package/lib/typescript/web/handlers/TapGestureHandler.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AdaptedEvent, Config } from '../interfaces';
 import GestureHandler from './GestureHandler';
 export default class TapGestureHandler extends GestureHandler {
@@ -19,7 +18,6 @@ export default class TapGestureHandler extends GestureHandler {
     private waitTimeout;
     private delayTimeout;
     private tapsSoFar;
-    init(ref: number, propsRef: React.RefObject<unknown>): void;
     updateGestureConfig({ enabled, ...props }: Config): void;
     protected resetConfig(): void;
     private clearTimeouts;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.21.2",
+  "version": "2.22.0-rc.1",
   "description": "Declarative API exposing native platform touch and gesture system to React Native",
   "scripts": {
     "prepare": "bob build && husky install",
@@ -66,44 +66,38 @@
   "dependencies": {
     "@egjs/hammerjs": "^2.0.17",
     "hoist-non-react-statics": "^3.3.0",
-    "invariant": "^2.2.4",
-    "prop-types": "^15.7.2"
+    "invariant": "^2.2.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/preset-env": "^7.12.11",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
     "@babel/preset-typescript": "^7.12.7",
-    "@babel/runtime": "^7.12.5",
-    "@react-native/babel-preset": "^0.74.85",
-    "@testing-library/jest-native": "^5.4.3",
+    "@react-native/babel-preset": "0.77.0-rc.3",
     "@testing-library/react-native": "^12.5.1",
-    "@types/hammerjs": "^2.0.38",
     "@types/hoist-non-react-statics": "^3.3.1",
+    "@types/invariant": "^2.2.37",
     "@types/jest": "^27.0.3",
     "@types/react": "^18.2.6",
     "@types/react-test-renderer": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
-    "babel-jest": "^26.6.3",
+    "babel-plugin-module-resolver": "^5.0.2",
     "clang-format": "^1.8.0",
     "eslint": "^7.32.0",
     "eslint-config-satya164": "^3.1.8",
     "eslint-import-resolver-babel-module": "^5.2.0",
-    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^26.0.0",
+    "eslint-plugin-prettier": "^5.2.1",
     "expo": "^35.0.1",
     "husky": "^8.0.1",
     "jest": "^28.1.0",
     "lint-staged": "^12.3.2",
     "madge": "^6.1.0",
-    "prettier": "2.7.1",
-    "react": "18.2.0",
-    "react-dom": "^16.12.0",
-    "react-native": "0.74.3",
+    "prettier": "3.3.3",
+    "react": "18.3.1",
+    "react-native": "0.77.0-rc.3",
     "react-native-builder-bob": "^0.17.1",
     "react-native-reanimated": "^3.12.0",
-    "react-native-web": "^0.11.7",
     "react-test-renderer": "18.2.0",
     "release-it": "^13.6.5",
     "typescript": "5.0.4"
@@ -150,6 +144,11 @@
     "jsSrcsDir": "./src/specs",
     "android": {
       "javaPackageName": "com.swmansion.gesturehandler"
+    },
+    "ios": {
+      "componentProvider": {
+        "RNGestureHandlerButton": "RNGestureHandlerButtonComponentView"
+      }
     }
   },
   "packageManager": "yarn@1.22.22"

package/src/ActionType.ts

@@ -6,4 +6,4 @@ export const ActionType = {
 } as const;
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; it can be used as a type and as a value
-export type ActionType = typeof ActionType[keyof typeof ActionType];
+export type ActionType = (typeof ActionType)[keyof typeof ActionType];

package/src/Directions.ts

@@ -20,7 +20,7 @@ export const DiagonalDirections = {
 } as const;
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; it can be used as a type and as a value
-export type Directions = typeof Directions[keyof typeof Directions];
+export type Directions = (typeof Directions)[keyof typeof Directions];
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type DiagonalDirections =
-  typeof DiagonalDirections[keyof typeof DiagonalDirections];
+  (typeof DiagonalDirections)[keyof typeof DiagonalDirections];

package/src/EnableNewWebImplementation.ts

@@ -1,17 +1,35 @@
 import { Platform } from 'react-native';
+import { tagMessage } from './utils';
 
 let useNewWebImplementation = true;
 let getWasCalled = false;
 
+/**
+ * @deprecated new web implementation is enabled by default. This function will be removed in Gesture Handler 3
+ */
 export function enableExperimentalWebImplementation(
   _shouldEnable = true
 ): void {
   // NO-OP since the new implementation is now the default
+  console.warn(
+    tagMessage(
+      'New web implementation is enabled by default. This function will be removed in Gesture Handler 3.'
+    )
+  );
 }
 
+/**
+ * @deprecated legacy implementation is no longer supported. This function will be removed in Gesture Handler 3
+ */
 export function enableLegacyWebImplementation(
   shouldUseLegacyImplementation = true
 ): void {
+  console.warn(
+    tagMessage(
+      'Legacy web implementation is deprecated. This function will be removed in Gesture Handler 3.'
+    )
+  );
+
   if (
     Platform.OS !== 'web' ||
     useNewWebImplementation === !shouldUseLegacyImplementation

package/src/State.ts

@@ -10,4 +10,4 @@ export const State = {
 } as const;
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; it can be used as a type and as a value
-export type State = typeof State[keyof typeof State];
+export type State = (typeof State)[keyof typeof State];

package/src/TouchEventType.ts

@@ -7,4 +7,5 @@ export const TouchEventType = {
 } as const;
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; it can be used as a type and as a value
-export type TouchEventType = typeof TouchEventType[keyof typeof TouchEventType];
+export type TouchEventType =
+  (typeof TouchEventType)[keyof typeof TouchEventType];

package/src/components/GestureButtonsProps.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import { AccessibilityProps, StyleProp, ViewStyle } from 'react-native';
 import type { NativeViewGestureHandlerProps } from '../handlers/NativeViewGestureHandler';
 
-export interface RawButtonProps extends NativeViewGestureHandlerProps {
+export interface RawButtonProps
+  extends NativeViewGestureHandlerProps,
+    AccessibilityProps {
   /**
    * Defines if more than one button could be pressed simultaneously. By default
    * set true.

package/src/components/Pressable/Pressable.tsx

@@ -58,7 +58,7 @@ export default function Pressable(props: PressableProps) {
 
   const normalizedHitSlop: Insets = useMemo(
     () =>
-      typeof hitSlop === 'number' ? numberAsInset(hitSlop) : hitSlop ?? {},
+      typeof hitSlop === 'number' ? numberAsInset(hitSlop) : (hitSlop ?? {}),
     [hitSlop]
   );
 
@@ -66,7 +66,7 @@ export default function Pressable(props: PressableProps) {
     () =>
       typeof pressRetentionOffset === 'number'
         ? numberAsInset(pressRetentionOffset)
-        : pressRetentionOffset ?? {},
+        : (pressRetentionOffset ?? {}),
     [pressRetentionOffset]
   );
 
@@ -352,7 +352,7 @@ export default function Pressable(props: PressableProps) {
 
   const isPressableEnabled = disabled !== true;
 
-  const gestures = [pressAndTouchGesture, hoverGesture, buttonGesture];
+  const gestures = [buttonGesture, pressAndTouchGesture, hoverGesture];
 
   for (const gesture of gestures) {
     gesture.enabled(isPressableEnabled);

package/src/components/ReanimatedSwipeable.tsx

@@ -280,8 +280,8 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
         rowState.value === 1
           ? leftWidth.value
           : rowState.value === -1
-          ? -rightWidth.value
-          : 0;
+            ? -rightWidth.value
+            : 0;
 
       const offsetDrag = userDrag.value / friction + startOffset;
 
@@ -387,8 +387,8 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
               ? rightWidth.value
               : leftWidth.value
             : moveToRight
-            ? leftWidth.value
-            : rightWidth.value;
+              ? leftWidth.value
+              : rightWidth.value;
 
           const progressSpringConfig = {
             ...translationSpringConfig,
@@ -614,10 +614,10 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
                 rowState.value === -1
                   ? SwipeDirection.RIGHT
                   : rowState.value === 1
-                  ? SwipeDirection.LEFT
-                  : event.translationX > 0
-                  ? SwipeDirection.RIGHT
-                  : SwipeDirection.LEFT;
+                    ? SwipeDirection.LEFT
+                    : event.translationX > 0
+                      ? SwipeDirection.RIGHT
+                      : SwipeDirection.LEFT;
 
               if (!dragStarted.value) {
                 dragStarted.value = true;

package/src/components/Swipeable.tsx

@@ -362,10 +362,10 @@ export default class Swipeable extends Component<
         rowState === -1
           ? 'right'
           : rowState === 1
-          ? 'left'
-          : translationX > 0
-          ? 'left'
-          : 'right';
+            ? 'left'
+            : translationX > 0
+              ? 'left'
+              : 'right';
 
       if (rowState === 0) {
         this.props.onSwipeableOpenStartDrag?.(direction);

package/src/components/Text.tsx

@@ -0,0 +1,60 @@
+import React, {
+  ForwardedRef,
+  forwardRef,
+  RefObject,
+  useEffect,
+  useRef,
+} from 'react';
+import {
+  Platform,
+  Text as RNText,
+  TextProps as RNTextProps,
+} from 'react-native';
+
+import { Gesture, GestureDetector } from '../';
+
+export const Text = forwardRef(
+  (props: RNTextProps, ref: ForwardedRef<RNText>) => {
+    const { onPress, ...rest } = props;
+    const textRef = useRef<RNText | null>(null);
+    const native = Gesture.Native().runOnJS(true);
+
+    const refHandler = (node: any) => {
+      textRef.current = node;
+
+      if (ref === null) {
+        return;
+      }
+
+      if (typeof ref === 'function') {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    };
+
+    useEffect(() => {
+      if (Platform.OS !== 'web') {
+        return;
+      }
+
+      const textElement = ref
+        ? (ref as RefObject<RNText>).current
+        : textRef.current;
+
+      // At this point we are sure that textElement is div in HTML tree
+      (textElement as unknown as HTMLDivElement)?.setAttribute(
+        'rnghtext',
+        'true'
+      );
+    }, []);
+
+    return (
+      <GestureDetector gesture={native}>
+        <RNText onPress={onPress} ref={refHandler} {...rest} />
+      </GestureDetector>
+    );
+  }
+);
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export type Text = typeof Text & RNText;

package/src/components/touchables/GenericTouchable.tsx

@@ -26,7 +26,7 @@ export const TOUCHABLE_STATE = {
   MOVED_OUTSIDE: 2,
 } as const;
 
-type TouchableState = typeof TOUCHABLE_STATE[keyof typeof TOUCHABLE_STATE];
+type TouchableState = (typeof TOUCHABLE_STATE)[keyof typeof TOUCHABLE_STATE];
 
 interface InternalProps {
   extraButtonProps: TouchableNativeFeedbackExtraProps;

package/src/getShadowNodeFromRef.ts

@@ -11,10 +11,16 @@ export function getShadowNodeFromRef(ref: unknown) {
   // Load findHostInstance_DEPRECATED lazily because it may not be available before render
   if (findHostInstance_DEPRECATED === undefined) {
     try {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-assignment
+      const ReactFabric = require('react-native/Libraries/Renderer/shims/ReactFabric');
+      // Since RN 0.77 ReactFabric exports findHostInstance_DEPRECATED in default object so we're trying to
+      // access it first, then fallback on named export
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       findHostInstance_DEPRECATED =
-        // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-member-access
-        require('react-native/Libraries/Renderer/shims/ReactFabric').findHostInstance_DEPRECATED;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        ReactFabric?.default?.findHostInstance_DEPRECATED ||
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        ReactFabric?.findHostInstance_DEPRECATED;
     } catch (e) {
       findHostInstance_DEPRECATED = (_ref: unknown) => null;
     }

package/src/ghQueueMicrotask.ts

@@ -4,5 +4,5 @@ export const ghQueueMicrotask =
   typeof setImmediate === 'function'
     ? setImmediate.bind(null)
     : typeof requestAnimationFrame === 'function'
-    ? requestAnimationFrame.bind(null)
-    : queueMicrotask.bind(null);
+      ? requestAnimationFrame.bind(null)
+      : queueMicrotask.bind(null);

package/src/handlers/GestureHandlerEventPayload.ts

@@ -126,7 +126,7 @@ export type PanGestureHandlerEventPayload = {
   /**
    * Object containing additional stylus data.
    */
-  stylusData: StylusData | undefined;
+  stylusData?: StylusData;
 };
 
 export type PinchGestureHandlerEventPayload = {
@@ -222,5 +222,5 @@ export type HoverGestureHandlerEventPayload = {
   /**
    * Object containing additional stylus data.
    */
-  stylusData: StylusData | undefined;
+  stylusData?: StylusData;
 };

package/src/handlers/createHandler.tsx

@@ -24,6 +24,7 @@ import { ActionType } from '../ActionType';
 import { PressabilityDebugView } from './PressabilityDebugView';
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 import { ghQueueMicrotask } from '../ghQueueMicrotask';
+import { MountRegistry } from '../mountRegistry';
 
 const UIManagerAny = UIManager as any;
 
@@ -160,7 +161,7 @@ const UNRESOLVED_REFS_RETRY_LIMIT = 1;
 // TODO(TS) - make sure that BaseGestureHandlerProps doesn't need other generic parameter to work with custom properties.
 export default function createHandler<
   T extends BaseGestureHandlerProps<U>,
-  U extends Record<string, unknown>
+  U extends Record<string, unknown>,
 >({
   name,
   allowedProps = [],
@@ -234,6 +235,12 @@ export default function createHandler<
         )
       );
 
+      if (!this.viewNode) {
+        throw new Error(
+          `[Gesture Handler] Failed to obtain view for ${Handler.displayName}. Note that old API doesn't support functional components.`
+        );
+      }
+
       this.attachGestureHandler(findNodeHandle(this.viewNode) as number); // TODO(TS) - check if this can be null
     }
 
@@ -256,6 +263,8 @@ export default function createHandler<
         // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
         delete handlerIDToTag[handlerID];
       }
+
+      MountRegistry.gestureHandlerWillUnmount(this);
     }
 
     private onGestureHandlerEvent = (event: GestureEvent<U>) => {
@@ -367,6 +376,10 @@ export default function createHandler<
       }
 
       scheduleFlushOperations();
+
+      ghQueueMicrotask(() => {
+        MountRegistry.gestureHandlerWillMount(this);
+      });
     };
 
     private updateGestureHandler = (

package/src/handlers/gestureHandlerCommon.ts

@@ -142,7 +142,7 @@ export interface GestureEvent<ExtraEventPayloadT = Record<string, unknown>> {
   nativeEvent: Readonly<GestureEventPayload & ExtraEventPayloadT>;
 }
 export interface HandlerStateChangeEvent<
-  ExtraEventPayloadT = Record<string, unknown>
+  ExtraEventPayloadT = Record<string, unknown>,
 > {
   nativeEvent: Readonly<HandlerStateChangeEventPayload & ExtraEventPayloadT>;
 }
@@ -169,7 +169,7 @@ export type GestureUpdateEvent<GestureEventPayloadT = Record<string, unknown>> =
   GestureEventPayload & GestureEventPayloadT;
 
 export type GestureStateChangeEvent<
-  GestureStateChangeEventPayloadT = Record<string, unknown>
+  GestureStateChangeEventPayloadT = Record<string, unknown>,
 > = HandlerStateChangeEventPayload & GestureStateChangeEventPayloadT;
 
 export type CommonGestureConfig = {
@@ -186,7 +186,7 @@ export type CommonGestureConfig = {
 // Events payloads are types instead of interfaces due to TS limitation.
 // See https://github.com/microsoft/TypeScript/issues/15300 for more info.
 export type BaseGestureHandlerProps<
-  ExtraEventPayloadT extends Record<string, unknown> = Record<string, unknown>
+  ExtraEventPayloadT extends Record<string, unknown> = Record<string, unknown>,
 > = CommonGestureConfig & {
   id?: string;
   waitFor?: React.Ref<unknown> | React.Ref<unknown>[];

package/src/handlers/gestures/GestureDetector/attachHandlers.ts

@@ -14,6 +14,7 @@ import {
   checkGestureCallbacksForWorklets,
   ALLOWED_PROPS,
 } from './utils';
+import { MountRegistry } from '../../../mountRegistry';
 
 interface AttachHandlersConfig {
   preparedGesture: AttachedGestureState;
@@ -93,6 +94,8 @@ export function attachHandlers({
         actionType
       );
     }
+
+    MountRegistry.gestureWillMount(gesture);
   }
 
   preparedGesture.attachedGestures = gesturesToAttach;

package/src/handlers/gestures/GestureDetector/dropHandlers.ts

@@ -2,12 +2,15 @@ import { unregisterHandler } from '../../handlersRegistry';
 import RNGestureHandlerModule from '../../../RNGestureHandlerModule';
 import { scheduleFlushOperations } from '../../utils';
 import { AttachedGestureState } from './types';
+import { MountRegistry } from '../../../mountRegistry';
 
 export function dropHandlers(preparedGesture: AttachedGestureState) {
   for (const handler of preparedGesture.attachedGestures) {
     RNGestureHandlerModule.dropGestureHandler(handler.handlerTag);
 
     unregisterHandler(handler.handlerTag, handler.config.testId);
+
+    MountRegistry.gestureWillUnmount(handler);
   }
 
   scheduleFlushOperations();