react-native-gesture-handler 2.23.0 → 2.24.0

package/lib/module/web_hammer/utils.js

@@ -1,7 +1,6 @@
 // TODO(TS) remove if not necessary after rewrite
-export const isnan = v => Number.isNaN(v);
+export const isnan = v => Number.isNaN(v); // TODO(TS) remove if not necessary after rewrite
 
-// TODO(TS) remove if not necessary after rewrite
 export const isValidNumber = v => typeof v === 'number' && !Number.isNaN(v);
 export const TEST_MIN_IF_NOT_NAN = (value, limit) => !isnan(limit) && (limit < 0 && value <= limit || limit >= 0 && value >= limit);
 export const VEC_LEN_SQ = ({
@@ -14,6 +13,7 @@ export function fireAfterInterval(method, interval) {
     method();
     return null;
   }
+
   return setTimeout(() => method(), interval);
 }
 //# sourceMappingURL=utils.js.map

package/lib/module/web_hammer/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["isnan","v","Number","isNaN","isValidNumber","TEST_MIN_IF_NOT_NAN","value","limit","VEC_LEN_SQ","x","y","TEST_MAX_IF_NOT_NAN","max","fireAfterInterval","method","interval","setTimeout"],"sources":["utils.ts"],"sourcesContent":["// TODO(TS) remove if not necessary after rewrite\nexport const isnan = (v: unknown) => Number.isNaN(v);\n\n// TODO(TS) remove if not necessary after rewrite\nexport const isValidNumber = (v: unknown) =>\n  typeof v === 'number' && !Number.isNaN(v);\n\nexport const TEST_MIN_IF_NOT_NAN = (value: number, limit: number): boolean =>\n  !isnan(limit) &&\n  ((limit < 0 && value <= limit) || (limit >= 0 && value >= limit));\nexport const VEC_LEN_SQ = ({ x = 0, y = 0 } = {}) => x * x + y * y;\nexport const TEST_MAX_IF_NOT_NAN = (value: number, max: number) =>\n  !isnan(max) && ((max < 0 && value < max) || (max >= 0 && value > max));\n\nexport function fireAfterInterval(\n  method: () => void,\n  interval?: number | boolean\n) {\n  if (!interval) {\n    method();\n    return null;\n  }\n  return setTimeout(() => method(), interval as number);\n}\n"],"mappings":"AAAA;AACA,OAAO,MAAMA,KAAK,GAAIC,CAAU,IAAKC,MAAM,CAACC,KAAK,CAACF,CAAC,CAAC;;AAEpD;AACA,OAAO,MAAMG,aAAa,GAAIH,CAAU,IACtC,OAAOA,CAAC,KAAK,QAAQ,IAAI,CAACC,MAAM,CAACC,KAAK,CAACF,CAAC,CAAC;AAE3C,OAAO,MAAMI,mBAAmB,GAAGA,CAACC,KAAa,EAAEC,KAAa,KAC9D,CAACP,KAAK,CAACO,KAAK,CAAC,KACXA,KAAK,GAAG,CAAC,IAAID,KAAK,IAAIC,KAAK,IAAMA,KAAK,IAAI,CAAC,IAAID,KAAK,IAAIC,KAAM,CAAC;AACnE,OAAO,MAAMC,UAAU,GAAGA,CAAC;EAAEC,CAAC,GAAG,CAAC;EAAEC,CAAC,GAAG;AAAE,CAAC,GAAG,CAAC,CAAC,KAAKD,CAAC,GAAGA,CAAC,GAAGC,CAAC,GAAGA,CAAC;AAClE,OAAO,MAAMC,mBAAmB,GAAGA,CAACL,KAAa,EAAEM,GAAW,KAC5D,CAACZ,KAAK,CAACY,GAAG,CAAC,KAAMA,GAAG,GAAG,CAAC,IAAIN,KAAK,GAAGM,GAAG,IAAMA,GAAG,IAAI,CAAC,IAAIN,KAAK,GAAGM,GAAI,CAAC;AAExE,OAAO,SAASC,iBAAiBA,CAC/BC,MAAkB,EAClBC,QAA2B,EAC3B;EACA,IAAI,CAACA,QAAQ,EAAE;IACbD,MAAM,CAAC,CAAC;IACR,OAAO,IAAI;EACb;EACA,OAAOE,UAAU,CAAC,MAAMF,MAAM,CAAC,CAAC,EAAEC,QAAkB,CAAC;AACvD","ignoreList":[]}
+{"version":3,"sources":["utils.ts"],"names":["isnan","v","Number","isNaN","isValidNumber","TEST_MIN_IF_NOT_NAN","value","limit","VEC_LEN_SQ","x","y","TEST_MAX_IF_NOT_NAN","max","fireAfterInterval","method","interval","setTimeout"],"mappings":"AAAA;AACA,OAAO,MAAMA,KAAK,GAAIC,CAAD,IAAgBC,MAAM,CAACC,KAAP,CAAaF,CAAb,CAA9B,C,CAEP;;AACA,OAAO,MAAMG,aAAa,GAAIH,CAAD,IAC3B,OAAOA,CAAP,KAAa,QAAb,IAAyB,CAACC,MAAM,CAACC,KAAP,CAAaF,CAAb,CADrB;AAGP,OAAO,MAAMI,mBAAmB,GAAG,CAACC,KAAD,EAAgBC,KAAhB,KACjC,CAACP,KAAK,CAACO,KAAD,CAAN,KACEA,KAAK,GAAG,CAAR,IAAaD,KAAK,IAAIC,KAAvB,IAAkCA,KAAK,IAAI,CAAT,IAAcD,KAAK,IAAIC,KAD1D,CADK;AAGP,OAAO,MAAMC,UAAU,GAAG,CAAC;AAAEC,EAAAA,CAAC,GAAG,CAAN;AAASC,EAAAA,CAAC,GAAG;AAAb,IAAmB,EAApB,KAA2BD,CAAC,GAAGA,CAAJ,GAAQC,CAAC,GAAGA,CAA1D;AACP,OAAO,MAAMC,mBAAmB,GAAG,CAACL,KAAD,EAAgBM,GAAhB,KACjC,CAACZ,KAAK,CAACY,GAAD,CAAN,KAAiBA,GAAG,GAAG,CAAN,IAAWN,KAAK,GAAGM,GAApB,IAA6BA,GAAG,IAAI,CAAP,IAAYN,KAAK,GAAGM,GAAjE,CADK;AAGP,OAAO,SAASC,iBAAT,CACLC,MADK,EAELC,QAFK,EAGL;AACA,MAAI,CAACA,QAAL,EAAe;AACbD,IAAAA,MAAM;AACN,WAAO,IAAP;AACD;;AACD,SAAOE,UAAU,CAAC,MAAMF,MAAM,EAAb,EAAiBC,QAAjB,CAAjB;AACD","sourcesContent":["// TODO(TS) remove if not necessary after rewrite\nexport const isnan = (v: unknown) => Number.isNaN(v);\n\n// TODO(TS) remove if not necessary after rewrite\nexport const isValidNumber = (v: unknown) =>\n  typeof v === 'number' && !Number.isNaN(v);\n\nexport const TEST_MIN_IF_NOT_NAN = (value: number, limit: number): boolean =>\n  !isnan(limit) &&\n  ((limit < 0 && value <= limit) || (limit >= 0 && value >= limit));\nexport const VEC_LEN_SQ = ({ x = 0, y = 0 } = {}) => x * x + y * y;\nexport const TEST_MAX_IF_NOT_NAN = (value: number, max: number) =>\n  !isnan(max) && ((max < 0 && value < max) || (max >= 0 && value > max));\n\nexport function fireAfterInterval(\n  method: () => void,\n  interval?: number | boolean\n) {\n  if (!interval) {\n    method();\n    return null;\n  }\n  return setTimeout(() => method(), interval as number);\n}\n"]}

package/lib/typescript/components/GestureComponents.d.ts

@@ -17,6 +17,6 @@ export declare const DrawerLayoutAndroid: React.ForwardRefExoticComponent<RNDraw
     children?: React.ReactNode;
 } & NativeViewGestureHandlerProps & React.RefAttributes<React.ComponentType<any>>>;
 export type DrawerLayoutAndroid = typeof DrawerLayoutAndroid & RNDrawerLayoutAndroid;
-export declare const FlatList: <ItemT = any>(props: React.PropsWithChildren<Omit<RNFlatListProps<ItemT>, "renderScrollComponent"> & React.RefAttributes<FlatList<ItemT>> & NativeViewGestureHandlerProps>, ref: React.ForwardedRef<FlatList<ItemT>>) => ReactElement | null;
+export declare const FlatList: <ItemT = any>(props: React.PropsWithChildren<Omit<RNFlatListProps<ItemT>, "renderScrollComponent"> & React.RefAttributes<FlatList<ItemT>> & NativeViewGestureHandlerProps>, ref?: React.ForwardedRef<FlatList<ItemT>> | undefined) => ReactElement | null;
 export type FlatList<ItemT = any> = typeof FlatList & RNFlatList<ItemT>;
 export {};

package/lib/typescript/components/ReanimatedDrawerLayout.d.ts

@@ -76,6 +76,11 @@ export interface DrawerLayoutProps {
      * Type of animation that will play when opening the drawer.
      */
     drawerType?: DrawerType;
+    /**
+     * Speed of animation that will play when letting go, or dismissing the drawer.
+     * This will also be the default animation speed for programatic controlls.
+     */
+    animationSpeed?: number;
     /**
      * Defines how far from the edge of the content view the gesture should
      * activate.

package/lib/typescript/components/touchables/ExtraButtonProps.d.ts

@@ -0,0 +1,7 @@
+export type ExtraButtonProps = {
+    borderless?: boolean;
+    rippleColor?: number | string | null;
+    rippleRadius?: number | null;
+    foreground?: boolean;
+    exclusive?: boolean;
+};

package/lib/typescript/components/touchables/GenericTouchable.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Component } from 'react';
 import { GestureEvent, HandlerStateChangeEvent } from '../../handlers/gestureHandlerCommon';
 import type { NativeViewGestureHandlerPayload } from '../../handlers/GestureHandlerEventPayload';
-import type { TouchableNativeFeedbackExtraProps } from './TouchableNativeFeedbackProps';
 import type { GenericTouchableProps } from './GenericTouchableProps';
 /**
  * Each touchable is a states' machine which preforms transitions.
@@ -18,7 +17,6 @@ export declare const TOUCHABLE_STATE: {
 };
 type TouchableState = (typeof TOUCHABLE_STATE)[keyof typeof TOUCHABLE_STATE];
 interface InternalProps {
-    extraButtonProps: TouchableNativeFeedbackExtraProps;
     onStateChange?: (oldState: TouchableState, newState: TouchableState) => void;
 }
 type Timeout = ReturnType<typeof setTimeout> | null | undefined;

package/lib/typescript/components/touchables/GenericTouchableProps.d.ts

@@ -1,5 +1,6 @@
 import type { StyleProp, ViewStyle, TouchableWithoutFeedbackProps, Insets } from 'react-native';
 import type { UserSelect } from '../../handlers/gestureHandlerCommon';
+import { ExtraButtonProps } from './ExtraButtonProps';
 export interface GenericTouchableProps extends Omit<TouchableWithoutFeedbackProps, 'hitSlop'> {
     onPress?: () => void;
     onPressIn?: () => void;
@@ -11,4 +12,5 @@ export interface GenericTouchableProps extends Omit<TouchableWithoutFeedbackProp
     containerStyle?: StyleProp<ViewStyle>;
     hitSlop?: Insets | number;
     userSelect?: UserSelect;
+    extraButtonProps?: ExtraButtonProps;
 }

package/lib/typescript/components/touchables/TouchableHighlight.d.ts

@@ -11,11 +11,11 @@ interface State {
     };
 }
 /**
- * @deprecated TouchableHighlight will be removed in the future version of Gesture Handler.
+ * @deprecated TouchableHighlight will be removed in the future version of Gesture Handler. Use Pressable instead.
  */
 export type TouchableHighlightProps = RNTouchableHighlightProps & GenericTouchableProps;
 /**
- * @deprecated TouchableHighlight will be removed in the future version of Gesture Handler.
+ * @deprecated TouchableHighlight will be removed in the future version of Gesture Handler. Use Pressable instead.
  *
  * TouchableHighlight follows RN's implementation
  */

package/lib/typescript/components/touchables/TouchableNativeFeedback.android.d.ts

@@ -1,9 +1,9 @@
 import { ColorValue } from 'react-native';
 import * as React from 'react';
 import { Component } from 'react';
-import { TouchableNativeFeedbackProps, TouchableNativeFeedbackExtraProps } from './TouchableNativeFeedbackProps';
+import { TouchableNativeFeedbackProps } from './TouchableNativeFeedbackProps';
 /**
- * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler.
+ * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
  *
  * TouchableNativeFeedback behaves slightly different than RN's TouchableNativeFeedback.
  * There's small difference with handling long press ripple since RN's implementation calls
@@ -35,6 +35,6 @@ export default class TouchableNativeFeedback extends Component<TouchableNativeFe
         rippleRadius: number | undefined;
     };
     static canUseNativeForeground: () => boolean;
-    getExtraButtonProps(): TouchableNativeFeedbackExtraProps;
+    getExtraButtonProps(): import("./ExtraButtonProps").ExtraButtonProps;
     render(): React.JSX.Element;
 }

package/lib/typescript/components/touchables/TouchableNativeFeedback.d.ts

@@ -1,6 +1,6 @@
 import { TouchableNativeFeedback as RNTouchableNativeFeedback } from 'react-native';
 /**
- * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler.
+ * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
  */
 declare const TouchableNativeFeedback: typeof RNTouchableNativeFeedback;
 export default TouchableNativeFeedback;

package/lib/typescript/components/touchables/TouchableNativeFeedbackProps.d.ts

@@ -1,12 +1,8 @@
 import type { TouchableNativeFeedbackProps as RNTouchableNativeFeedbackProps } from 'react-native';
 import type { GenericTouchableProps } from './GenericTouchableProps';
-export type TouchableNativeFeedbackExtraProps = {
-    borderless?: boolean;
-    rippleColor?: number | null;
-    rippleRadius?: number | null;
-    foreground?: boolean;
-};
+import { ExtraButtonProps } from './ExtraButtonProps';
+export type TouchableNativeFeedbackExtraProps = ExtraButtonProps;
 /**
- * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler.
+ * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
  */
 export type TouchableNativeFeedbackProps = RNTouchableNativeFeedbackProps & GenericTouchableProps;

package/lib/typescript/components/touchables/TouchableOpacity.d.ts

@@ -3,13 +3,13 @@ import type { GenericTouchableProps } from './GenericTouchableProps';
 import * as React from 'react';
 import { Component } from 'react';
 /**
- * @deprecated TouchableOpacity will be removed in the future version of Gesture Handler.
+ * @deprecated TouchableOpacity will be removed in the future version of Gesture Handler. Use Pressable instead.
  */
 export type TouchableOpacityProps = RNTouchableOpacityProps & GenericTouchableProps & {
     useNativeAnimations?: boolean;
 };
 /**
- * @deprecated TouchableOpacity will be removed in the future version of Gesture Handler.
+ * @deprecated TouchableOpacity will be removed in the future version of Gesture Handler. Use Pressable instead.
  *
  * TouchableOpacity bases on timing animation which has been used in RN's core
  */

package/lib/typescript/components/touchables/TouchableWithoutFeedback.d.ts

@@ -2,11 +2,11 @@ import * as React from 'react';
 import GenericTouchable from './GenericTouchable';
 import type { GenericTouchableProps } from './GenericTouchableProps';
 /**
- * @deprecated TouchableWithoutFeedback will be removed in the future version of Gesture Handler.
+ * @deprecated TouchableWithoutFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
  */
 export type TouchableWithoutFeedbackProps = GenericTouchableProps;
 /**
- * @deprecated TouchableWithoutFeedback will be removed in the future version of Gesture Handler.
+ * @deprecated TouchableWithoutFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
  */
 declare const TouchableWithoutFeedback: React.ForwardRefExoticComponent<GenericTouchableProps & {
     children?: React.ReactNode;

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

@@ -10,4 +10,4 @@ export declare function extractGestureRelations(gesture: GestureType): {
 export declare function checkGestureCallbacksForWorklets(gesture: GestureType): void;
 export declare function validateDetectorChildren(ref: any): void;
 export declare function useForceRender(): () => void;
-export declare function useWebEventHandlers(): import("react").MutableRefObject<WebEventHandler>;
+export declare function useWebEventHandlers(): import("react").RefObject<WebEventHandler>;

package/lib/typescript/utils.d.ts

@@ -5,6 +5,7 @@ export declare function hasProperty(object: object, key: string): boolean;
 export declare function isTestEnv(): boolean;
 export declare function tagMessage(msg: string): string;
 export declare function isFabric(): boolean;
+export declare function isReact19(): boolean;
 export declare function isRemoteDebuggingEnabled(): boolean;
 /**
  * Recursively compares two objects for deep equality.

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

@@ -9,4 +9,6 @@ export declare function calculateViewScale(view: HTMLElement): {
     scaleY: number;
 };
 export declare function tryExtractStylusData(event: PointerEvent): StylusData | undefined;
+export declare const RNSVGElements: Set<string>;
 export declare function isRNSVGElement(viewRef: SVGRef | GestureHandlerRef): boolean;
+export declare function isRNSVGNode(node: any): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.23.0",
+  "version": "2.24.0",
   "description": "Declarative API exposing native platform touch and gesture system to React Native",
   "scripts": {
     "prepare": "bob build && husky install",
@@ -36,6 +36,7 @@
     "android/src/main/jni/",
     "android/fabric/src/main/java",
     "android/paper/src/main/java",
+    "android/paper77/src/main/java",
     "android/common/src/main/java/",
     "android/reanimated/src/main/java/",
     "android/noreanimated/src/main/java/",
@@ -74,13 +75,13 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/preset-typescript": "^7.12.7",
-    "@react-native/babel-preset": "0.77.0-rc.3",
+    "@react-native/babel-preset": "0.78.0",
     "@testing-library/react-native": "^12.5.1",
     "@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",
+    "@types/react": "^19.0.0",
+    "@types/react-test-renderer": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "babel-plugin-module-resolver": "^5.0.2",
@@ -96,11 +97,11 @@
     "lint-staged": "^12.3.2",
     "madge": "^6.1.0",
     "prettier": "3.3.3",
-    "react": "18.3.1",
-    "react-native": "0.77.0-rc.3",
+    "react": "19.0.0",
+    "react-native": "0.78.0",
     "react-native-builder-bob": "^0.17.1",
-    "react-native-reanimated": "^3.16.3",
-    "react-test-renderer": "18.2.0",
+    "react-native-reanimated": "^3.12.0",
+    "react-test-renderer": "19.0.0",
     "release-it": "^13.6.5",
     "typescript": "5.0.4"
   },

package/src/components/GestureComponents.tsx

@@ -142,7 +142,7 @@ export const FlatList = React.forwardRef((props, ref) => {
       RefAttributes<FlatList<ItemT>> &
       NativeViewGestureHandlerProps
   >,
-  ref: ForwardedRef<FlatList<ItemT>>
+  ref?: ForwardedRef<FlatList<ItemT>>
 ) => ReactElement | null;
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type FlatList<ItemT = any> = typeof FlatList & RNFlatList<ItemT>;

package/src/components/ReanimatedDrawerLayout.tsx

@@ -143,6 +143,12 @@ export interface DrawerLayoutProps {
    */
   drawerType?: DrawerType;
 
+  /**
+   * Speed of animation that will play when letting go, or dismissing the drawer.
+   * This will also be the default animation speed for programatic controlls.
+   */
+  animationSpeed?: number;
+
   /**
    * Defines how far from the edge of the content view the gesture should
    * activate.
@@ -256,6 +262,10 @@ const defaultProps = {
   statusBarAnimation: 'slide' as StatusBarAnimation,
 };
 
+// StatusBar.setHidden and Keyboard.dismiss cannot be directly referenced in worklets.
+const setStatusBarHidden = StatusBar.setHidden;
+const dismissKeyboard = Keyboard.dismiss;
+
 const DrawerLayout = forwardRef<DrawerLayoutMethods, DrawerLayoutProps>(
   function DrawerLayout(props: DrawerLayoutProps, ref) {
     const [containerWidth, setContainerWidth] = useState(0);
@@ -288,6 +298,7 @@ const DrawerLayout = forwardRef<DrawerLayoutMethods, DrawerLayoutProps>(
       onDrawerClose,
       onDrawerOpen,
       onDrawerStateChanged,
+      animationSpeed: animationSpeedProp,
     } = props;
 
     const isFromLeft = drawerPosition === DrawerPosition.LEFT;
@@ -366,7 +377,7 @@ const DrawerLayout = forwardRef<DrawerLayoutMethods, DrawerLayoutProps>(
         runOnJS(setDrawerState)(DrawerState.SETTLING);
 
         if (hideStatusBar) {
-          runOnJS(StatusBar.setHidden)(willShow, statusBarAnimation);
+          runOnJS(setStatusBarHidden)(willShow, statusBarAnimation);
         }
 
         const normalizedToValue = interpolate(
@@ -388,7 +399,9 @@ const DrawerLayout = forwardRef<DrawerLayoutMethods, DrawerLayoutProps>(
           {
             overshootClamping: true,
             velocity: normalizedInitialVelocity,
-            mass: animationSpeed ? 1 / animationSpeed : 1,
+            mass: animationSpeed
+              ? 1 / animationSpeed
+              : 1 / (animationSpeedProp ?? 1),
             damping: 40,
             stiffness: 500,
           },
@@ -529,10 +542,10 @@ const DrawerLayout = forwardRef<DrawerLayoutMethods, DrawerLayoutProps>(
           emitStateChanged(DrawerState.DRAGGING, false);
           runOnJS(setDrawerState)(DrawerState.DRAGGING);
           if (keyboardDismissMode === DrawerKeyboardDismissMode.ON_DRAG) {
-            runOnJS(Keyboard.dismiss)();
+            runOnJS(dismissKeyboard)();
           }
           if (hideStatusBar) {
-            runOnJS(StatusBar.setHidden)(true, statusBarAnimation);
+            runOnJS(setStatusBarHidden)(true, statusBarAnimation);
           }
         })
         .onUpdate((event) => {

package/src/components/Text.tsx

@@ -35,6 +35,11 @@ export const Text = forwardRef(
       }
     };
 
+    // This is a special case for `Text` component. After https://github.com/software-mansion/react-native-gesture-handler/pull/3379 we check for
+    // `displayName` field. However, `Text` from RN has this field set to `Text`, but is also present in `RNSVGElements` set.
+    // We don't want to treat our `Text` as the one from `SVG`, therefore we add special field to ref.
+    refHandler.rngh = true;
+
     useEffect(() => {
       if (Platform.OS !== 'web') {
         return;

package/src/components/touchables/ExtraButtonProps.ts

@@ -0,0 +1,7 @@
+export type ExtraButtonProps = {
+  borderless?: boolean;
+  rippleColor?: number | string | null;
+  rippleRadius?: number | null;
+  foreground?: boolean;
+  exclusive?: boolean;
+};

package/src/components/touchables/GenericTouchable.tsx

@@ -10,7 +10,6 @@ import {
   HandlerStateChangeEvent,
 } from '../../handlers/gestureHandlerCommon';
 import type { NativeViewGestureHandlerPayload } from '../../handlers/GestureHandlerEventPayload';
-import type { TouchableNativeFeedbackExtraProps } from './TouchableNativeFeedbackProps';
 import type { GenericTouchableProps } from './GenericTouchableProps';
 
 /**
@@ -29,7 +28,6 @@ export const TOUCHABLE_STATE = {
 type TouchableState = (typeof TOUCHABLE_STATE)[keyof typeof TOUCHABLE_STATE];
 
 interface InternalProps {
-  extraButtonProps: TouchableNativeFeedbackExtraProps;
   onStateChange?: (oldState: TouchableState, newState: TouchableState) => void;
 }
 

package/src/components/touchables/GenericTouchableProps.ts

@@ -5,6 +5,7 @@ import type {
   Insets,
 } from 'react-native';
 import type { UserSelect } from '../../handlers/gestureHandlerCommon';
+import { ExtraButtonProps } from './ExtraButtonProps';
 
 export interface GenericTouchableProps
   extends Omit<TouchableWithoutFeedbackProps, 'hitSlop'> {
@@ -23,4 +24,5 @@ export interface GenericTouchableProps
   containerStyle?: StyleProp<ViewStyle>;
   hitSlop?: Insets | number;
   userSelect?: UserSelect;
+  extraButtonProps?: ExtraButtonProps;
 }

package/src/components/touchables/TouchableHighlight.tsx

@@ -20,13 +20,13 @@ interface State {
 }
 
 /**
- * @deprecated TouchableHighlight will be removed in the future version of Gesture Handler.
+ * @deprecated TouchableHighlight will be removed in the future version of Gesture Handler. Use Pressable instead.
  */
 export type TouchableHighlightProps = RNTouchableHighlightProps &
   GenericTouchableProps;
 
 /**
- * @deprecated TouchableHighlight will be removed in the future version of Gesture Handler.
+ * @deprecated TouchableHighlight will be removed in the future version of Gesture Handler. Use Pressable instead.
  *
  * TouchableHighlight follows RN's implementation
  */

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

@@ -8,7 +8,7 @@ import {
 } from './TouchableNativeFeedbackProps';
 
 /**
- * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler.
+ * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
  *
  * TouchableNativeFeedback behaves slightly different than RN's TouchableNativeFeedback.
  * There's small difference with handling long press ripple since RN's implementation calls

package/src/components/touchables/TouchableNativeFeedback.tsx

@@ -1,7 +1,7 @@
 import { TouchableNativeFeedback as RNTouchableNativeFeedback } from 'react-native';
 
 /**
- * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler.
+ * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
  */
 const TouchableNativeFeedback = RNTouchableNativeFeedback;
 

package/src/components/touchables/TouchableNativeFeedbackProps.tsx

@@ -1,15 +1,10 @@
 import type { TouchableNativeFeedbackProps as RNTouchableNativeFeedbackProps } from 'react-native';
 import type { GenericTouchableProps } from './GenericTouchableProps';
+import { ExtraButtonProps } from './ExtraButtonProps';
 
-export type TouchableNativeFeedbackExtraProps = {
-  borderless?: boolean;
-  rippleColor?: number | null;
-  rippleRadius?: number | null;
-  foreground?: boolean;
-};
-
+export type TouchableNativeFeedbackExtraProps = ExtraButtonProps;
 /**
- * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler.
+ * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
  */
 export type TouchableNativeFeedbackProps = RNTouchableNativeFeedbackProps &
   GenericTouchableProps;

package/src/components/touchables/TouchableOpacity.tsx

@@ -11,7 +11,7 @@ import * as React from 'react';
 import { Component } from 'react';
 
 /**
- * @deprecated TouchableOpacity will be removed in the future version of Gesture Handler.
+ * @deprecated TouchableOpacity will be removed in the future version of Gesture Handler. Use Pressable instead.
  */
 export type TouchableOpacityProps = RNTouchableOpacityProps &
   GenericTouchableProps & {
@@ -19,7 +19,7 @@ export type TouchableOpacityProps = RNTouchableOpacityProps &
   };
 
 /**
- * @deprecated TouchableOpacity will be removed in the future version of Gesture Handler.
+ * @deprecated TouchableOpacity will be removed in the future version of Gesture Handler. Use Pressable instead.
  *
  * TouchableOpacity bases on timing animation which has been used in RN's core
  */

package/src/components/touchables/TouchableWithoutFeedback.tsx

@@ -4,18 +4,36 @@ import GenericTouchable from './GenericTouchable';
 import type { GenericTouchableProps } from './GenericTouchableProps';
 
 /**
- * @deprecated TouchableWithoutFeedback will be removed in the future version of Gesture Handler.
+ * @deprecated TouchableWithoutFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
  */
 export type TouchableWithoutFeedbackProps = GenericTouchableProps;
 
 /**
- * @deprecated TouchableWithoutFeedback will be removed in the future version of Gesture Handler.
+ * @deprecated TouchableWithoutFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
  */
 const TouchableWithoutFeedback = React.forwardRef<
   GenericTouchable,
   PropsWithChildren<TouchableWithoutFeedbackProps>
->((props, ref) => <GenericTouchable ref={ref} {...props} />);
+>(
+  (
+    {
+      delayLongPress = 600,
+      extraButtonProps = {
+        rippleColor: 'transparent',
+        exclusive: true,
+      },
+      ...rest
+    },
 
-TouchableWithoutFeedback.defaultProps = GenericTouchable.defaultProps;
+    ref
+  ) => (
+    <GenericTouchable
+      ref={ref}
+      delayLongPress={delayLongPress}
+      extraButtonProps={extraButtonProps}
+      {...rest}
+    />
+  )
+);
 
 export default TouchableWithoutFeedback;

package/src/handlers/createHandler.tsx

@@ -23,12 +23,19 @@ import {
 import { filterConfig, scheduleFlushOperations } from './utils';
 import findNodeHandle from '../findNodeHandle';
 import { ValueOf } from '../typeUtils';
-import { deepEqual, isFabric, isTestEnv, tagMessage } from '../utils';
+import {
+  deepEqual,
+  isFabric,
+  isReact19,
+  isTestEnv,
+  tagMessage,
+} from '../utils';
 import { ActionType } from '../ActionType';
 import { PressabilityDebugView } from './PressabilityDebugView';
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 import { ghQueueMicrotask } from '../ghQueueMicrotask';
 import { MountRegistry } from '../mountRegistry';
+import { ReactElement } from 'react';
 
 const UIManagerAny = UIManager as any;
 
@@ -308,14 +315,18 @@ export default function createHandler<
       this.viewNode = node;
 
       const child = React.Children.only(this.props.children);
-      // TODO(TS) fix ref type
-      const { ref }: any = child;
-      if (ref !== null) {
-        if (typeof ref === 'function') {
-          ref(node);
-        } else {
-          ref.current = node;
-        }
+      // @ts-ignore Since React 19 ref is accessible as standard prop
+      // https://react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-element-ref
+      const ref = isReact19() ? (child as ReactElement).props?.ref : child?.ref;
+
+      if (!ref) {
+        return;
+      }
+
+      if (typeof ref === 'function') {
+        ref(node);
+      } else {
+        ref.current = node;
       }
     };
 

package/src/handlers/createNativeWrapper.tsx

@@ -44,11 +44,15 @@ export default function createNativeWrapper<P>(
       },
       {
         gestureHandlerProps: { ...config }, // Watch out not to modify config
-        childProps: { enabled: props.enabled } as P,
+        childProps: {
+          enabled: props.enabled,
+          hitSlop: props.hitSlop,
+          testID: props.testID,
+        } as P,
       }
     );
-    const _ref = useRef<React.ComponentType<P>>();
-    const _gestureHandlerRef = useRef<React.ComponentType<P>>();
+    const _ref = useRef<React.ComponentType<P>>(null);
+    const _gestureHandlerRef = useRef<React.ComponentType<P>>(null);
     useImperativeHandle(
       ref,
       // @ts-ignore TODO(TS) decide how nulls work in this context

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

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
 import type { LegacyRef, PropsWithChildren } from 'react';
 import { tagMessage } from '../../../utils';
+import { isRNSVGNode } from '../../../web/utils';
 
 export const Wrap = forwardRef<HTMLDivElement, PropsWithChildren<{}>>(
   ({ children }, ref) => {
@@ -8,10 +9,7 @@ export const Wrap = forwardRef<HTMLDivElement, PropsWithChildren<{}>>(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const child: any = React.Children.only(children);
 
-      const isRNSVGNode =
-        Object.getPrototypeOf(child?.type)?.name === 'WebShape';
-
-      if (isRNSVGNode) {
+      if (isRNSVGNode(child)) {
         const clone = React.cloneElement(
           child,
           { ref },

package/src/utils.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export function toArray<T>(object: T | T[]): T[] {
   if (!Array.isArray(object)) {
     return [object];
@@ -50,6 +52,10 @@ export function isFabric(): boolean {
   return !!global?.nativeFabricUIManager;
 }
 
+export function isReact19() {
+  return React.version.startsWith('19.');
+}
+
 export function isRemoteDebuggingEnabled(): boolean {
   // react-native-reanimated checks if in remote debugging in the same way
   // @ts-ignore global is available but node types are not included