react-native-gesture-handler 2.32.0 → 2.33.0

package/lib/typescript/web/tools/WheelEventManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WheelEventManager.d.ts","sourceRoot":"","sources":["../../../../src/web/tools/WheelEventManager.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAc,MAAM,eAAe,CAAC;AAGzD,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,YAAY,CAAC,WAAW,CAAC;IACtE,OAAO,CAAC,UAAU,CAAkB;IAEpC,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,aAAa,CAMnB;IAEK,iBAAiB,IAAI,IAAI;IAKzB,mBAAmB,IAAI,IAAI;IAKlC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,UAAU,GAAG,YAAY;IAe5C,YAAY,IAAI,IAAI;CAG5B"}
+{"version":3,"file":"WheelEventManager.d.ts","sourceRoot":"","sources":["../../../../src/web/tools/WheelEventManager.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAc,MAAM,eAAe,CAAC;AAGzD,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,YAAY,CAAC,WAAW,CAAC;IACtE,OAAO,CAAC,UAAU,CAAkB;IAEpC,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,aAAa,CAMnB;IAEK,iBAAiB,IAAI,IAAI;IAKzB,mBAAmB,IAAI,IAAI;IAKlC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,UAAU,GAAG,YAAY;IAe5C,YAAY,IAAI,IAAI;CAI5B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.32.0",
+  "version": "2.33.0",
   "description": "Declarative API exposing native platform touch and gesture system to React Native",
   "scripts": {
     "test": "jest",
@@ -80,8 +80,8 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/preset-typescript": "^7.12.7",
-    "@react-native/babel-preset": "0.86.0",
-    "@react-native/jest-preset": "0.86.0",
+    "@react-native/babel-preset": "0.87.1",
+    "@react-native/jest-preset": "0.87.1",
     "@testing-library/react-native": "^12.5.1",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/invariant": "^2.2.37",
@@ -103,12 +103,12 @@
     "madge": "^6.1.0",
     "prettier": "3.3.3",
     "react": "19.2.3",
-    "react-native": "0.86.0",
+    "react-native": "0.87.1",
     "react-native-builder-bob": "^0.40.13",
-    "react-native-reanimated": "~4.4.1",
-    "react-native-worklets": "0.9.1",
+    "react-native-reanimated": "~4.6.0",
+    "react-native-worklets": "0.12.1",
     "react-test-renderer": "19.2.3",
-    "typescript": "~5.8.3"
+    "typescript": "~6.0.3"
   },
   "peerDependencies": {
     "react": "*",

package/src/components/GestureButtonsProps.ts

@@ -89,6 +89,20 @@ export interface RawButtonProps
    */
   // eslint-disable-next-line @typescript-eslint/ban-types
   testOnly_onLongPress?: Function | null | undefined;
+
+  /**
+   * Used for testing-library compatibility, not passed to the native component.
+   * @deprecated test-only props are deprecated and will be removed in the future.
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  testOnly_onHoverIn?: Function | null | undefined;
+
+  /**
+   * Used for testing-library compatibility, not passed to the native component.
+   * @deprecated test-only props are deprecated and will be removed in the future.
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  testOnly_onHoverOut?: Function | null | undefined;
 }
 interface ButtonWithRefProps {
   innerRef?: React.ForwardedRef<React.ComponentType<any>> | undefined;

package/src/components/GestureComponents.tsx

@@ -5,6 +5,8 @@ import {
   RefAttributes,
   ReactElement,
 } from 'react';
+// Type-only: the value export is a deprecation-warning getter on RN 0.87+ (see below).
+import type { DrawerLayoutAndroid as RNDrawerLayoutAndroid } from 'react-native';
 import {
   ScrollView as RNScrollView,
   ScrollViewProps as RNScrollViewProps,
@@ -12,7 +14,6 @@ import {
   SwitchProps as RNSwitchProps,
   TextInput as RNTextInput,
   TextInputProps as RNTextInputProps,
-  DrawerLayoutAndroid as RNDrawerLayoutAndroid,
   DrawerLayoutAndroidProps as RNDrawerLayoutAndroidProps,
   FlatList as RNFlatList,
   FlatListProps as RNFlatListProps,
@@ -43,7 +44,7 @@ const GHScrollView = createNativeWrapper<PropsWithChildren<RNScrollViewProps>>(
   }
 );
 export const ScrollView = React.forwardRef<
-  RNScrollView,
+  React.ComponentRef<typeof RNScrollView>,
   RNScrollViewProps & NativeViewGestureHandlerProps
 >((props, ref) => {
   const refreshControlGestureRef = React.useRef<RefreshControl>(null);
@@ -70,7 +71,8 @@ export const ScrollView = React.forwardRef<
 // Backward type compatibility with https://github.com/software-mansion/react-native-gesture-handler/blob/db78d3ca7d48e8ba57482d3fe9b0a15aa79d9932/react-native-gesture-handler.d.ts#L440-L457
 // include methods of wrapped components by creating an intersection type with the RN component instead of duplicating them.
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type ScrollView = typeof GHScrollView & RNScrollView;
+export type ScrollView = typeof GHScrollView &
+  React.ComponentRef<typeof RNScrollView>;
 
 export const Switch = createNativeWrapper<RNSwitchProps>(RNSwitch, {
   shouldCancelWhenOutside: false,
@@ -84,12 +86,41 @@ export const TextInput = createNativeWrapper<RNTextInputProps>(RNTextInput);
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type TextInput = typeof TextInput & RNTextInput;
 
-export const DrawerLayoutAndroid = createNativeWrapper<
-  PropsWithChildren<RNDrawerLayoutAndroidProps>
->(RNDrawerLayoutAndroid, { disallowInterruption: true });
+// RN's `DrawerLayoutAndroid` export is a getter that logs a deprecation
+// warning on access, so resolve it on first render instead of module load.
+// `require` is used on purpose: `import * as RN` would read every export
+// eagerly under Metro's `experimentalImportSupport`.
+let DrawerLayoutAndroidImpl: typeof RNDrawerLayoutAndroid | undefined;
+
+const LazyDrawerLayoutAndroid = (
+  props: PropsWithChildren<RNDrawerLayoutAndroidProps> & {
+    ref?: React.Ref<React.ComponentRef<typeof RNDrawerLayoutAndroid> | null>;
+  }
+) => {
+  if (!DrawerLayoutAndroidImpl) {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const { DrawerLayoutAndroid } = require('react-native') as {
+      DrawerLayoutAndroid: typeof RNDrawerLayoutAndroid;
+    };
+    DrawerLayoutAndroidImpl = DrawerLayoutAndroid;
+  }
+  return <DrawerLayoutAndroidImpl {...props} />;
+};
+LazyDrawerLayoutAndroid.displayName = 'DrawerLayoutAndroid';
+
+export const DrawerLayoutAndroid: React.ComponentType<
+  PropsWithChildren<RNDrawerLayoutAndroidProps> &
+    NativeViewGestureHandlerProps & {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ref?: React.Ref<React.ComponentType<any> | null>;
+    }
+> = createNativeWrapper<PropsWithChildren<RNDrawerLayoutAndroidProps>>(
+  LazyDrawerLayoutAndroid,
+  { disallowInterruption: true }
+);
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type DrawerLayoutAndroid = typeof DrawerLayoutAndroid &
-  RNDrawerLayoutAndroid;
+  React.ComponentRef<typeof RNDrawerLayoutAndroid>;
 
 export const FlatList = React.forwardRef((props, ref) => {
   const refreshControlGestureRef = React.useRef<RefreshControl>(null);

package/src/components/GestureHandlerButton.web.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { View } from 'react-native';
 
-export default React.forwardRef<React.ComponentRef<typeof View>>(
-  (props, ref) => <View ref={ref} accessibilityRole="button" {...props} />
-);
+const GestureHandlerButton: React.ForwardRefExoticComponent<
+  React.RefAttributes<React.ComponentRef<typeof View>>
+> = React.forwardRef<React.ComponentRef<typeof View>>((props, ref) => (
+  <View ref={ref} accessibilityRole="button" {...props} />
+));
+
+export default GestureHandlerButton;

package/src/components/Pressable/Pressable.tsx

@@ -69,6 +69,7 @@ const Pressable = (props: PressableProps) => {
     simultaneousWithExternalGesture,
     requireExternalGestureToFail,
     blocksExternalGesture,
+    ref,
     ...remainingProps
   } = props;
 
@@ -78,7 +79,7 @@ const Pressable = (props: PressableProps) => {
     blocksExternalGesture,
   };
 
-  const [pressedState, setPressedState] = useState(testOnly_pressed ?? false);
+  const [pressedState, setPressedState] = useState(false);
 
   const longPressTimeoutRef = useRef<number | null>(null);
   const pressDelayTimeoutRef = useRef<number | null>(null);
@@ -217,6 +218,24 @@ const Pressable = (props: PressableProps) => {
   const hoverInTimeout = useRef<number | null>(null);
   const hoverOutTimeout = useRef<number | null>(null);
 
+  useEffect(
+    () => () => {
+      if (longPressTimeoutRef.current) {
+        clearTimeout(longPressTimeoutRef.current);
+      }
+      if (pressDelayTimeoutRef.current) {
+        clearTimeout(pressDelayTimeoutRef.current);
+      }
+      if (hoverInTimeout.current) {
+        clearTimeout(hoverInTimeout.current);
+      }
+      if (hoverOutTimeout.current) {
+        clearTimeout(hoverOutTimeout.current);
+      }
+    },
+    []
+  );
+
   const hoverGesture = useMemo(
     () =>
       Gesture.Hover()
@@ -353,12 +372,17 @@ const Pressable = (props: PressableProps) => {
   const pointerStyle: StyleProp<ViewStyle> =
     Platform.OS === 'web' ? { cursor: 'pointer' } : {};
 
+  // `testOnly_pressed` forces the pressed state for snapshots/tests. Derive the
+  // displayed value from it each render, keeping the interactive `pressedState`
+  // independent (seeded to false) so clearing the prop doesn't leave it stuck.
+  const displayPressed = testOnly_pressed ?? pressedState;
+
   const styleProp =
-    typeof style === 'function' ? style({ pressed: pressedState }) : style;
+    typeof style === 'function' ? style({ pressed: displayPressed }) : style;
 
   const childrenProp =
     typeof children === 'function'
-      ? children({ pressed: pressedState })
+      ? children({ pressed: displayPressed })
       : children;
 
   const rippleColor = useMemo(() => {
@@ -385,6 +409,7 @@ const Pressable = (props: PressableProps) => {
     <GestureDetector gesture={gesture}>
       <NativeButton
         {...remainingProps}
+        ref={ref as React.Ref<React.ComponentRef<typeof NativeButton>>}
         onLayout={setDimensions}
         accessible={accessible !== false}
         hitSlop={appliedHitSlop}
@@ -392,11 +417,15 @@ const Pressable = (props: PressableProps) => {
         touchSoundDisabled={android_disableSound ?? undefined}
         rippleColor={rippleColor}
         rippleRadius={android_ripple?.radius ?? undefined}
+        borderless={android_ripple?.borderless ?? undefined}
+        foreground={android_ripple?.foreground ?? undefined}
         style={[pointerStyle, styleProp]}
         testOnly_onPress={IS_TEST_ENV ? onPress : undefined}
         testOnly_onPressIn={IS_TEST_ENV ? onPressIn : undefined}
         testOnly_onPressOut={IS_TEST_ENV ? onPressOut : undefined}
-        testOnly_onLongPress={IS_TEST_ENV ? onLongPress : undefined}>
+        testOnly_onLongPress={IS_TEST_ENV ? onLongPress : undefined}
+        testOnly_onHoverIn={IS_TEST_ENV ? onHoverIn : undefined}
+        testOnly_onHoverOut={IS_TEST_ENV ? onHoverOut : undefined}>
         {childrenProp}
         {__DEV__ ? (
           <PressabilityDebugView color="red" hitSlop={normalizedHitSlop} />

package/src/components/Pressable/PressableProps.tsx

@@ -66,7 +66,7 @@ export interface PressableProps
   /**
    * A reference to the pressable element.
    */
-  ref?: React.Ref<View>;
+  ref?: React.Ref<React.ComponentRef<typeof View>>;
 
   /**
    * Either children or a render prop that receives a boolean reflecting whether

package/src/components/Pressable/index.ts

@@ -1,4 +1,5 @@
 export type {
+  PressableEvent,
   PressableProps,
   PressableStateCallbackType,
 } from './PressableProps';

package/src/components/ReanimatedDrawerLayout.tsx

@@ -263,7 +263,9 @@ const defaultProps = {
 };
 
 // StatusBar.setHidden and Keyboard.dismiss cannot be directly referenced in worklets.
+// eslint-disable-next-line @typescript-eslint/unbound-method
 const setStatusBarHidden = StatusBar.setHidden;
+// eslint-disable-next-line @typescript-eslint/unbound-method
 const dismissKeyboard = Keyboard.dismiss;
 
 const DrawerLayout = forwardRef<DrawerLayoutMethods, DrawerLayoutProps>(
@@ -320,7 +322,7 @@ const DrawerLayout = forwardRef<DrawerLayoutMethods, DrawerLayoutProps>(
 
     useDerivedValue(() => {
       onDrawerSlide && runOnJS(onDrawerSlide)(openValue.value);
-    }, []);
+    });
 
     const isDrawerOpen = useSharedValue(false);
 
@@ -420,6 +422,7 @@ const DrawerLayout = forwardRef<DrawerLayoutMethods, DrawerLayoutProps>(
         );
       },
       [
+        animationSpeedProp,
         openValue,
         emitStateChanged,
         isDrawerOpen,

package/src/components/ReanimatedSwipeable/ReanimatedSwipeable.tsx

@@ -4,8 +4,15 @@ import {
   useImperativeHandle,
   ForwardedRef,
   useState,
+  useRef,
 } from 'react';
-import { LayoutChangeEvent, View, I18nManager, StyleSheet } from 'react-native';
+import {
+  LayoutChangeEvent,
+  View,
+  I18nManager,
+  Platform,
+  StyleSheet,
+} from 'react-native';
 import Animated, {
   useSharedValue,
   interpolate,
@@ -42,6 +49,21 @@ const DEFAULT_OVERSHOOT_FRICTION = 1;
 const DEFAULT_DRAG_OFFSET = 10;
 const DEFAULT_ENABLE_TRACKING_TWO_FINGER_GESTURE = false;
 
+function useEventCallback<Args extends unknown[]>(
+  callback: ((...args: Args) => void) | undefined
+): ((...args: Args) => void) | undefined {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+
+  const stableCallback = useCallback((...args: Args) => {
+    callbackRef.current?.(...args);
+  }, []);
+
+  // Keep a stable wrapper only while a user callback exists, so the existing
+  // truthiness checks can still skip `runOnJS` when the prop is absent.
+  return callback ? stableCallback : undefined;
+}
+
 const Swipeable = (props: SwipeableProps) => {
   const {
     ref,
@@ -60,12 +82,12 @@ const Swipeable = (props: SwipeableProps) => {
     dragOffsetFromRightEdge = DEFAULT_DRAG_OFFSET,
     friction = DEFAULT_FRICTION,
     overshootFriction = DEFAULT_OVERSHOOT_FRICTION,
-    onSwipeableOpenStartDrag,
-    onSwipeableCloseStartDrag,
-    onSwipeableWillOpen,
-    onSwipeableWillClose,
-    onSwipeableOpen,
-    onSwipeableClose,
+    onSwipeableOpenStartDrag: onSwipeableOpenStartDragProp,
+    onSwipeableCloseStartDrag: onSwipeableCloseStartDragProp,
+    onSwipeableWillOpen: onSwipeableWillOpenProp,
+    onSwipeableWillClose: onSwipeableWillCloseProp,
+    onSwipeableOpen: onSwipeableOpenProp,
+    onSwipeableClose: onSwipeableCloseProp,
     renderLeftActions,
     renderRightActions,
     simultaneousWithExternalGesture,
@@ -88,6 +110,17 @@ const Swipeable = (props: SwipeableProps) => {
     ]
   );
 
+  const onSwipeableOpenStartDrag = useEventCallback(
+    onSwipeableOpenStartDragProp
+  );
+  const onSwipeableCloseStartDrag = useEventCallback(
+    onSwipeableCloseStartDragProp
+  );
+  const onSwipeableWillOpen = useEventCallback(onSwipeableWillOpenProp);
+  const onSwipeableWillClose = useEventCallback(onSwipeableWillCloseProp);
+  const onSwipeableOpen = useEventCallback(onSwipeableOpenProp);
+  const onSwipeableClose = useEventCallback(onSwipeableCloseProp);
+
   const [shouldEnableTap, setShouldEnableTap] = useState(false);
   const rowState = useSharedValue<number>(0);
 
@@ -371,7 +404,10 @@ const Swipeable = (props: SwipeableProps) => {
 
   const leftActionAnimation = useAnimatedStyle(() => {
     return {
-      opacity: showLeftProgress.value === 0 ? 0 : 1,
+      // Both action containers use `absoluteFill` and overlap, so the
+      // inactive one must not intercept touches meant for the visible
+      // actions.
+      pointerEvents: showLeftProgress.value === 0 ? 'none' : 'auto',
     };
   });
 
@@ -401,7 +437,10 @@ const Swipeable = (props: SwipeableProps) => {
 
   const rightActionAnimation = useAnimatedStyle(() => {
     return {
-      opacity: showRightProgress.value === 0 ? 0 : 1,
+      // Both action containers use `absoluteFill` and overlap, so the
+      // inactive one must not intercept touches meant for the visible
+      // actions.
+      pointerEvents: showRightProgress.value === 0 ? 'none' : 'auto',
     };
   });
 
@@ -570,7 +609,7 @@ const Swipeable = (props: SwipeableProps) => {
       transform: [{ translateX: appliedTranslation.value }],
       pointerEvents: rowState.value === 0 ? 'auto' : 'box-only',
     }),
-    [appliedTranslation, rowState]
+    Platform.OS === 'web' ? [appliedTranslation, rowState] : undefined
   );
 
   const swipeableComponent = (

package/src/components/Swipeable.tsx

@@ -317,7 +317,9 @@ export default class Swipeable extends Component<
             outputRange: [0, 0, 1],
           })
         : new Animated.Value(0);
-    this.leftActionTranslate = this.showLeftAction.interpolate({
+    this.leftActionTranslate = (
+      this.showLeftAction as Animated.Value
+    ).interpolate({
       inputRange: [0, Number.MIN_VALUE],
       outputRange: [-10000, 0],
       extrapolate: 'clamp',
@@ -329,7 +331,9 @@ export default class Swipeable extends Component<
             outputRange: [1, 0, 0],
           })
         : new Animated.Value(0);
-    this.rightActionTranslate = this.showRightAction.interpolate({
+    this.rightActionTranslate = (
+      this.showRightAction as Animated.Value
+    ).interpolate({
       inputRange: [0, Number.MIN_VALUE],
       outputRange: [-10000, 0],
       extrapolate: 'clamp',

package/src/components/Text.tsx

@@ -11,16 +11,16 @@ import { GestureDetector } from '../handlers/gestures/GestureDetector';
 type TextProps = RNTextProps & {
   ref?: Ref<ComponentRef<typeof RNText> | null>;
 };
-type RNGHTextRef = Ref<RNText | null> & { rngh?: boolean };
+type RNGHTextRef = Ref<ComponentRef<typeof RNText> | null> & { rngh?: boolean };
 
 export const Text = (props: TextProps) => {
   const { onPress, onLongPress, ref, ...rest } = props;
 
-  const textRef = useRef<RNText | null>(null);
+  const textRef = useRef<ComponentRef<typeof RNText> | null>(null);
   const native = useMemo(() => Gesture.Native().runOnJS(true), []);
 
   const refHandler = useMemo(() => {
-    const handler: RNGHTextRef = (node: RNText | null) => {
+    const handler: RNGHTextRef = (node: ComponentRef<typeof RNText> | null) => {
       textRef.current = node;
 
       if (!ref) {

package/src/components/touchables/TouchableHighlight.tsx

@@ -3,11 +3,11 @@ import { Component } from 'react';
 import GenericTouchable, { TOUCHABLE_STATE } from './GenericTouchable';
 import type { GenericTouchableProps } from './GenericTouchableProps';
 import {
-  StyleSheet,
   View,
   TouchableHighlightProps as RNTouchableHighlightProps,
   ColorValue,
   ViewProps,
+  ViewStyle,
 } from 'react-native';
 
 interface State {
@@ -88,7 +88,9 @@ export default class TouchableHighlight extends Component<
       this.props.children
     ) as React.ReactElement<ViewProps>; // TODO: not sure if OK but fixes error
     return React.cloneElement(child, {
-      style: StyleSheet.compose(child.props.style, this.state.extraChildStyle),
+      style: this.state.extraChildStyle
+        ? [child.props.style, this.state.extraChildStyle as ViewStyle]
+        : child.props.style,
     });
   }
 

package/src/components/touchables/TouchableNativeFeedback.android.tsx

@@ -41,7 +41,12 @@ export default class TouchableNativeFeedback extends Component<TouchableNativeFe
     color: ColorValue,
     borderless: boolean,
     rippleRadius?: number
-  ) => ({
+  ): {
+    type: 'RippleAndroid';
+    color: ColorValue;
+    borderless: boolean;
+    rippleRadius: number | undefined;
+  } => ({
     type: 'RippleAndroid',
     color,
     borderless,
@@ -59,7 +64,8 @@ export default class TouchableNativeFeedback extends Component<TouchableNativeFe
       // TODO(TS): check if it works the same as previous implementation - looks like it works the same as RN component, so it should be ok
       if (background.type === 'RippleAndroid') {
         extraProps['borderless'] = background.borderless;
-        extraProps['rippleColor'] = background.color;
+        extraProps['rippleColor'] =
+          background.color as TouchableNativeFeedbackExtraProps['rippleColor'];
       } else if (background.type === 'ThemeAttrAndroid') {
         extraProps['borderless'] =
           background.attribute === 'selectableItemBackgroundBorderless';

package/src/components/touchables/TouchableOpacity.tsx

@@ -43,6 +43,7 @@ export default class TouchableOpacity extends Component<TouchableOpacityProps> {
     Animated.timing(this.opacity, {
       toValue: value,
       duration: duration,
+      // eslint-disable-next-line @typescript-eslint/unbound-method
       easing: Easing.inOut(Easing.quad),
       useNativeDriver: this.props.useNativeAnimations ?? true,
     }).start();

package/src/getShadowNodeFromRef.ts

@@ -1,3 +1,5 @@
+import { isHostInstance } from './hostInstance';
+
 // Used by GestureDetector (unsupported on web at the moment) to check whether the
 // attached view may get flattened on Fabric. This implementation causes errors
 // on web due to the static resolution of `require` statements by webpack breaking
@@ -8,8 +10,10 @@ let getInternalInstanceHandleFromPublicInstance: (ref: unknown) => {
 };
 
 export function getShadowNodeFromRef(ref: unknown) {
+  const isAlreadyHostInstance = isHostInstance(ref);
+
   // Load findHostInstance_DEPRECATED lazily because it may not be available before render
-  if (findHostInstance_DEPRECATED === undefined) {
+  if (!isAlreadyHostInstance && findHostInstance_DEPRECATED === undefined) {
     try {
       // eslint-disable-next-line @typescript-eslint/no-var-requires
       const ReactFabric = require('react-native/Libraries/Renderer/shims/ReactFabric');
@@ -43,8 +47,11 @@ export function getShadowNodeFromRef(ref: unknown) {
     }
   }
 
+  const hostInstance = isAlreadyHostInstance
+    ? ref
+    : findHostInstance_DEPRECATED(ref);
+
   // @ts-ignore Fabric
-  return getInternalInstanceHandleFromPublicInstance(
-    findHostInstance_DEPRECATED(ref)
-  ).stateNode.node;
+  return getInternalInstanceHandleFromPublicInstance(hostInstance).stateNode
+    .node;
 }

package/src/handlers/PanGestureHandler.ts

@@ -65,9 +65,24 @@ interface CommonPanProperties {
    */
   maxPointers?: number;
 
+  /**
+   * Minimum speed the pointer has to reach in order to activate the handler.
+   * Expressed in points per second.
+   */
   minVelocity?: number;
+
+  /**
+   * Minimum speed along X axis the pointer has to reach in order to activate
+   * the handler. Expressed in points per second.
+   */
   minVelocityX?: number;
+
+  /**
+   * Minimum speed along Y axis the pointer has to reach in order to activate
+   * the handler. Expressed in points per second.
+   */
   minVelocityY?: number;
+
   activateAfterLongPress?: number;
 }
 

package/src/handlers/gestures/GestureDetector/Wrap.tsx

@@ -1,4 +1,10 @@
 import React from 'react';
+import type { WrapRef } from '../../../hostInstance';
+import {
+  assignRef,
+  isHostInstance,
+  preferHostInstance,
+} from '../../../hostInstance';
 import { Reanimated } from '../reanimatedWrapper';
 import { tagMessage } from '../../../utils';
 
@@ -7,20 +13,69 @@ export class Wrap extends React.Component<{
   // Implicit `children` prop has been removed in @types/react^18.0.0
   children?: React.ReactNode;
 }> {
-  render() {
+  private childInstance: unknown = null;
+  private hostInstance: unknown = null;
+  private childRef: WrapRef = undefined;
+  private attachedChildRef: WrapRef = undefined;
+  private childRefCleanup: (() => void) | undefined = undefined;
+
+  // eslint-disable-next-line @eslint-react/no-unused-class-component-members
+  public getHostInstance() {
+    return this.hostInstance;
+  }
+
+  private detachChildRef() {
+    if (this.childRefCleanup !== undefined) {
+      this.childRefCleanup();
+    } else if (this.attachedChildRef) {
+      assignRef(this.attachedChildRef, null);
+    }
+
+    this.childRefCleanup = undefined;
+    this.attachedChildRef = undefined;
+  }
+
+  private attachChildRef(instance: unknown) {
+    this.attachedChildRef = this.childRef;
+
+    this.childRefCleanup = assignRef(this.attachedChildRef, instance);
+  }
+
+  private handleChildRef = (instance: unknown) => {
+    this.childInstance = instance;
+
+    const resolved = preferHostInstance(instance);
+    this.hostInstance = isHostInstance(resolved) ? resolved : null;
+
+    this.detachChildRef();
+
+    if (instance !== null && instance !== undefined) {
+      this.attachChildRef(instance);
+    }
+  };
+
+  override componentDidUpdate() {
+    if (
+      this.childRef === this.attachedChildRef ||
+      this.childInstance === null
+    ) {
+      return;
+    }
+
+    this.detachChildRef();
+    this.attachChildRef(this.childInstance);
+  }
+
+  override render() {
+    // I don't think that fighting with types over such a simple function is worth it
+    // The only thing it does is add 'collapsable: false' to the child component
+    // to make sure it is in the native view hierarchy so the detector can find
+    // correct viewTag to attach to.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let child: any;
+
     try {
-      // I don't think that fighting with types over such a simple function is worth it
-      // The only thing it does is add 'collapsable: false' to the child component
-      // to make sure it is in the native view hierarchy so the detector can find
-      // 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 },
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        child.props.children
-      );
+      child = React.Children.only(this.props.children);
     } catch (e) {
       throw new Error(
         tagMessage(
@@ -28,6 +83,16 @@ export class Wrap extends React.Component<{
         )
       );
     }
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    this.childRef = child.props.ref as WrapRef;
+
+    return React.cloneElement(
+      child,
+      { collapsable: false, ref: this.handleChildRef },
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      child.props.children
+    );
   }
 }