react-native-gesture-handler 2.23.1 → 2.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.23.1",
+  "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/TouchableNativeFeedbackProps.tsx

@@ -1,13 +1,8 @@
 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. Use Pressable instead.
  */

package/src/components/touchables/TouchableWithoutFeedback.tsx

@@ -14,8 +14,26 @@ export type TouchableWithoutFeedbackProps = GenericTouchableProps;
 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

package/src/web/utils.ts

@@ -233,7 +233,7 @@ function spherical2tilt(altitudeAngle: number, azimuthAngle: number) {
   return { tiltX, tiltY };
 }
 
-const RNSVGElements = [
+export const RNSVGElements = new Set([
   'Circle',
   'ClipPath',
   'Ellipse',
@@ -254,7 +254,7 @@ const RNSVGElements = [
   'Text',
   'TextPath',
   'Use',
-];
+]);
 
 // This function helps us determine whether given node is SVGElement or not. In our implementation of
 // findNodeHandle, we can encounter such element in 2 forms - SVG tag or ref to SVG Element. Since Gesture Handler
@@ -269,7 +269,25 @@ export function isRNSVGElement(viewRef: SVGRef | GestureHandlerRef) {
   const componentClassName = Object.getPrototypeOf(viewRef).constructor.name;
 
   return (
-    RNSVGElements.indexOf(componentClassName) >= 0 &&
+    RNSVGElements.has(componentClassName) &&
     Object.hasOwn(viewRef, 'elementRef')
   );
 }
+
+// This function checks if given node is SVGElement. Unlike the function above, this one
+// operates on React Nodes, not DOM nodes.
+//
+// Second condition was introduced to handle case where SVG element was wrapped with
+// `createAnimatedComponent` from Reanimated.
+export function isRNSVGNode(node: any) {
+  // If `ref` has `rngh` field, it means that component comes from Gesture Handler. This is a special case for
+  // `Text` component, which is present in `RNSVGElements` set, yet we don't want to treat it as SVG.
+  if (node.ref?.rngh) {
+    return false;
+  }
+
+  return (
+    Object.getPrototypeOf(node?.type)?.name === 'WebShape' ||
+    RNSVGElements.has(node?.type?.displayName)
+  );
+}