Merge branch 'main' into @mbert/support-81

m-bert · m-bert · commit 21462d8f0b58 · 2025-07-23T09:54:16.000+02:00
diff --git a/apps/basic-example/ios/Podfile.lock b/apps/basic-example/ios/Podfile.lock
@@ -2223,7 +2223,7 @@ PODS:
     - React-perflogger (= 0.81.0-rc.1)
     - React-utils (= 0.81.0-rc.1)
     - SocketRocket
-  - RNGestureHandler (2.27.1):
+  - RNGestureHandler (2.27.2):
     - boost
     - DoubleConversion
     - fast_float
@@ -2552,7 +2552,7 @@ SPEC CHECKSUMS:
   ReactAppDependencyProvider: d6047f02061d1d4ddea220c25c03dc0f85fa3e66
   ReactCodegen: 0949385fa4cc4ad03dc5bfe516db5d256bfa1503
   ReactCommon: 9c0b5f78d34ee283d93cfd59fe0271ba629b2045
-  RNGestureHandler: e8dd08066308e649ff7f13ed7d4e3dc8faae7fc5
+  RNGestureHandler: 0fbc8afacdf8e7fcd4dc5cc1773bfb9cb4f710e8
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: 865fbf57ad8aa871fbe40f8cd286825fad7cf80f
 
diff --git a/apps/expo-example/package.json b/apps/expo-example/package.json
@@ -4,7 +4,7 @@
   "main": "index.ts",
   "scripts": {
     "postinstall": "npx expo prebuild",
-    "start": "expo start",
+    "start": "expo start --dev-client",
     "android": "expo run:android",
     "ios": "expo run:ios",
     "web": "expo start --web",
diff --git a/apps/macos-example/macos/Podfile.lock b/apps/macos-example/macos/Podfile.lock
@@ -1484,7 +1484,7 @@ PODS:
     - React-utils (= 0.78.3)
   - RNCAsyncStorage (2.1.2):
     - React-Core
-  - RNGestureHandler (2.27.1):
+  - RNGestureHandler (2.27.2):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.11.18.00)
@@ -1854,8 +1854,8 @@ SPEC CHECKSUMS:
   React-debug: 9ef45d64b88281e7e629158410ceb61b3bb51ea0
   React-defaultsnativemodule: 4e5646f85edca54998efb35efac242045d1123dc
   React-domnativemodule: aa0750129c97675305ad52da5e0525985a7bc1c9
-  React-Fabric: e5670d9e6c90650fc3d8b86eedfb3a75b80152cb
-  React-FabricComponents: d1e9208aa6b2134bb1c18d8a42cf4c975ffc755d
+  React-Fabric: 20a409df4dc64d8139324f707837bfa72d5663ce
+  React-FabricComponents: a8ad8665dacbf82a4669f5a4e55531594c65601b
   React-FabricImage: 309d4ebb53631461fc8108b7b3ce6dc84f135a20
   React-featureflags: 46790800dbdeb1305b3b12427b4d18413dadd13e
   React-featureflagsnativemodule: eb77d500c3770978e9c1c8e6f3f36a923ca7eecf
@@ -1901,12 +1901,12 @@ SPEC CHECKSUMS:
   ReactCodegen: 3d30536e47f328f0a297d897cb789e46a092c2a6
   ReactCommon: 0f22e3dd34a8215b8482778898f6e1e95572c498
   RNCAsyncStorage: b9f5f78da5d16a853fe3dc22e8268d932fc45a83
-  RNGestureHandler: 231e0ff647e2f3b6a26b86f0fb1978b22cdbd1c6
+  RNGestureHandler: 9ea0b24ab06251465e366792c8d1a8f96d7a41ad
   RNReanimated: 6ccc6e6826ada6643d2e6474d95f37a1fbf7771d
   RNSVG: 4c63b12b7b5761063bca4f20dd228f6a8370f614
   SocketRocket: 03f7111df1a343b162bf5b06ead333be808e1e0a
   Yoga: f89a870053f1a8fbee8c98e35a1b9eff44ce2015
 
 PODFILE CHECKSUM: ba6f2105d3e43bf0ae77356a9afcc8b532e3c306
 
-COCOAPODS: 1.16.2
+COCOAPODS: 1.15.2
diff --git a/packages/docs-gesture-handler/docs/gestures/pinch-gesture.md b/packages/docs-gesture-handler/docs/gestures/pinch-gesture.md
@@ -93,6 +93,10 @@ const styles = StyleSheet.create({
 });
 ```
 
+## Remarks
+
+- When implementing pinch based on `focal` point, make sure to use it after gesture has activated, i.e. in `onStart`, `onUpdate` or `onChange` callbacks. Using it in `onBegan` may lead to unexpected behavior.
+
 ## Config
 
 <BaseEventConfig />
diff --git a/packages/docs-gesture-handler/docs/gestures/rotation-gesture.md b/packages/docs-gesture-handler/docs/gestures/rotation-gesture.md
@@ -90,6 +90,10 @@ const styles = StyleSheet.create({
 });
 ```
 
+## Remarks
+
+- When implementing rotation based on `anchor` point, make sure to use it after gesture has activated, i.e. in `onStart`, `onUpdate` or `onChange` callbacks. Using it in `onBegan` may lead to unexpected behavior.
+
 ## Config
 
 <BaseEventConfig />
diff --git a/packages/react-native-gesture-handler/jestSetup.js b/packages/react-native-gesture-handler/jestSetup.js
@@ -1,7 +1,26 @@
-jest.mock('./src/RNGestureHandlerModule', () => require('./src/mocks'));
+jest.mock('./src/RNGestureHandlerModule', () => require('./src/mocks/mocks'));
+jest.mock('./src/components/GestureButtons', () => require('./src/mocks/mocks'));
+jest.mock('./src/components/Pressable/Pressable', () => require('./src/mocks/Pressable'));
+
+
 jest.mock('./lib/commonjs/RNGestureHandlerModule', () =>
-  require('./lib/commonjs/mocks')
+  require('./lib/commonjs/mocks/mocks')
 );
+jest.mock('./lib/commonjs/components/GestureButtons', () =>
+  require('./lib/commonjs/mocks/mocks')
+);
+jest.mock('./lib/commonjs/components/Pressable', () =>
+  require('./lib/commonjs/mocks/Pressable')
+);
+
+
 jest.mock('./lib/module/RNGestureHandlerModule', () =>
-  require('./lib/module/mocks')
+  require('./lib/module/mocks/mocks')
+);
+jest.mock('./lib/module/components/GestureButtons', () =>
+  require('./lib/module/mocks/mocks')
+);
+jest.mock('./lib/module/components/Pressable', () =>
+  require('./lib/module/mocks/Pressable')
 );
+
diff --git a/packages/react-native-gesture-handler/package.json b/packages/react-native-gesture-handler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.27.1",
+  "version": "2.27.2",
   "description": "Declarative API exposing native platform touch and gesture system to React Native",
   "scripts": {
     "test": "jest",
diff --git a/packages/react-native-gesture-handler/src/__mocks__/RNGestureHandlerModule.ts b/packages/react-native-gesture-handler/src/__mocks__/RNGestureHandlerModule.ts
@@ -1,4 +1,4 @@
-import Mocks from '../mocks';
+import Mocks from '../mocks/mocks';
 
 export default {
   ...Mocks,
diff --git a/packages/react-native-gesture-handler/src/components/GestureButtonsProps.ts b/packages/react-native-gesture-handler/src/components/GestureButtonsProps.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   AccessibilityProps,
   ColorValue,
+  LayoutChangeEvent,
   StyleProp,
   ViewStyle,
 } from 'react-native';
@@ -56,26 +57,35 @@ export interface RawButtonProps
    */
   style?: StyleProp<ViewStyle>;
 
+  /**
+   * Invoked on mount and layout changes.
+   */
+  onLayout?: (event: LayoutChangeEvent) => void;
+
   /**
    * 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_onPress?: Function | null;
 
   /**
    * 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_onPressIn?: Function | null;
 
   /**
    * 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_onPressOut?: Function | null;
 
   /**
    * 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_onLongPress?: Function | null;
diff --git a/packages/react-native-gesture-handler/src/components/Pressable/Pressable.tsx b/packages/react-native-gesture-handler/src/components/Pressable/Pressable.tsx
@@ -1,7 +1,6 @@
 import React, {
   useCallback,
   useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -15,9 +14,9 @@ import {
 } from './PressableProps';
 import {
   Insets,
+  LayoutChangeEvent,
   Platform,
   StyleProp,
-  View,
   ViewStyle,
   processColor,
 } from 'react-native';
@@ -46,7 +45,6 @@ let IS_FABRIC: null | boolean = null;
 
 const Pressable = (props: PressableProps) => {
   const {
-    ref,
     testOnly_pressed,
     hitSlop,
     pressRetentionOffset,
@@ -60,6 +58,7 @@ const Pressable = (props: PressableProps) => {
     onPressIn,
     onPressOut,
     onLongPress,
+    onLayout,
     style,
     children,
     android_disableSound,
@@ -69,7 +68,6 @@ const Pressable = (props: PressableProps) => {
     simultaneousWithExternalGesture,
     requireExternalGestureToFail,
     blocksExternalGesture,
-    dimensionsAfterResize,
     ...remainingProps
   } = props;
 
@@ -79,9 +77,6 @@ const Pressable = (props: PressableProps) => {
     blocksExternalGesture,
   };
 
-  // used only if `ref` is undefined
-  const fallbackRef = useRef<View>(null);
-
   const [pressedState, setPressedState] = useState(testOnly_pressed ?? false);
 
   const longPressTimeoutRef = useRef<number | null>(null);
@@ -109,21 +104,6 @@ const Pressable = (props: PressableProps) => {
     normalizedPressRetentionOffset
   );
 
-  useLayoutEffect(() => {
-    if (dimensionsAfterResize) {
-      dimensions.current = dimensionsAfterResize;
-    } else {
-      requestAnimationFrame(() => {
-        (ref ?? fallbackRef).current?.measure((_x, _y, width, height) => {
-          dimensions.current = {
-            width,
-            height,
-          };
-        });
-      });
-    }
-  }, [dimensionsAfterResize, ref]);
-
   const cancelLongPress = useCallback(() => {
     if (longPressTimeoutRef.current) {
       clearTimeout(longPressTimeoutRef.current);
@@ -377,11 +357,19 @@ const Pressable = (props: PressableProps) => {
       : processColor(unprocessedRippleColor);
   }, [android_ripple]);
 
+  const setDimensions = useCallback(
+    (event: LayoutChangeEvent) => {
+      onLayout?.(event);
+      dimensions.current = event.nativeEvent.layout;
+    },
+    [onLayout]
+  );
+
   return (
     <GestureDetector gesture={gesture}>
       <NativeButton
         {...remainingProps}
-        ref={ref ?? fallbackRef}
+        onLayout={setDimensions}
         accessible={accessible !== false}
         hitSlop={appliedHitSlop}
         enabled={isPressableEnabled}
diff --git a/packages/react-native-gesture-handler/src/components/Pressable/PressableProps.tsx b/packages/react-native-gesture-handler/src/components/Pressable/PressableProps.tsx
@@ -66,7 +66,7 @@ export interface PressableProps
   /**
    * A reference to the pressable element.
    */
-  ref?: React.RefObject<View>;
+  ref?: React.Ref<View>;
 
   /**
    * Either children or a render prop that receives a boolean reflecting whether
@@ -168,9 +168,7 @@ export interface PressableProps
   blocksExternalGesture?: RelationPropType;
 
   /**
-   * Defines the dimensions of the Pressable after it's been resized.
-   * This property does not affect Pressable's physical appearance.
-   * Required when the Pressable is resized **and** uses pressRetentionOffset.
+   * @deprecated This property is no longer used, and will be removed in the future.
    */
   dimensionsAfterResize?: PressableDimensions;
 }
diff --git a/packages/react-native-gesture-handler/src/handlers/createHandler.tsx b/packages/react-native-gesture-handler/src/handlers/createHandler.tsx
@@ -446,7 +446,7 @@ export default function createHandler<
       if (__DEV__ && !this.context && !isTestEnv() && Platform.OS !== 'web') {
         throw new Error(
           name +
-            ' must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.'
+            ' must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation for more details.'
         );
       }
 
diff --git a/packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/index.tsx b/packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/index.tsx
@@ -96,7 +96,7 @@ export const GestureDetector = (props: GestureDetectorProps) => {
   const rootViewContext = useContext(GestureHandlerRootViewContext);
   if (__DEV__ && !rootViewContext && !isTestEnv() && Platform.OS !== 'web') {
     throw new Error(
-      'GestureDetector must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.'
+      'GestureDetector must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation for more details.'
     );
   }
 
diff --git a/packages/react-native-gesture-handler/src/mocks/Pressable.tsx b/packages/react-native-gesture-handler/src/mocks/Pressable.tsx
@@ -0,0 +1 @@
+export { Pressable as default } from 'react-native';
diff --git a/packages/react-native-gesture-handler/src/mocks/mocks.tsx b/packages/react-native-gesture-handler/src/mocks/mocks.tsx
@@ -11,8 +11,8 @@ import {
   DrawerLayoutAndroid,
   View,
 } from 'react-native';
-import { State } from './State';
-import { Directions } from './Directions';
+import { State } from '../State';
+import { Directions } from '../Directions';
 
 const NOOP = () => {
   // Do nothing
@@ -31,14 +31,14 @@ const LongPressGestureHandler = View;
 const PinchGestureHandler = View;
 const RotationGestureHandler = View;
 const FlingGestureHandler = View;
-const RawButton = ({ enabled, ...rest }: any) => (
-  <TouchableNativeFeedback disabled={!enabled} {...rest}>
+export const RawButton = ({ enabled, ...rest }: any) => (
+  <TouchableNativeFeedback disabled={enabled === false} {...rest}>
     <View />
   </TouchableNativeFeedback>
 );
-const BaseButton = RawButton;
-const RectButton = RawButton;
-const BorderlessButton = TouchableNativeFeedback;
+export const BaseButton = RawButton;
+export const RectButton = RawButton;
+export const BorderlessButton = TouchableNativeFeedback;
 
 export default {
   TouchableHighlight,
@@ -57,10 +57,6 @@ export default {
   PinchGestureHandler,
   RotationGestureHandler,
   FlingGestureHandler,
-  RawButton,
-  BaseButton,
-  RectButton,
-  BorderlessButton,
   PanGestureHandler,
   attachGestureHandler,
   createGestureHandler,
diff --git a/packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts b/packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts
@@ -566,9 +566,12 @@ export default abstract class GestureHandler implements IGestureHandler {
 
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     this._config = { enabled: enabled, ...props };
-    this.enabled = enabled;
 
-    this.delegate.onEnabledChange(enabled);
+    if (this.enabled !== enabled) {
+      this.delegate.onEnabledChange(enabled);
+    }
+
+    this.enabled = enabled;
 
     if (this.config.shouldCancelWhenOutside !== undefined) {
       this.shouldCancelWhenOutside = this.config.shouldCancelWhenOutside;
@@ -727,6 +730,7 @@ export default abstract class GestureHandler implements IGestureHandler {
   protected resetConfig(): void {}
 
   public onDestroy(): void {
+    GestureHandlerOrchestrator.instance.removeHandlerFromOrchestrator(this);
     this.delegate.destroy(this.config);
   }
 
diff --git a/packages/react-native-gesture-handler/src/web/tools/GestureHandlerWebDelegate.ts b/packages/react-native-gesture-handler/src/web/tools/GestureHandlerWebDelegate.ts
@@ -174,11 +174,6 @@ export class GestureHandlerWebDelegate
 
     if (enabled) {
       this.eventManagers.forEach((manager) => {
-        // It may look like managers will be registered twice when handler is mounted for the first time.
-        // However, `init` method is called AFTER `updateGestureConfig` - it means that delegate has not
-        // been initialized yet, so this code won't be executed.
-        //
-        // Also, because we use defined functions, not lambdas, they will not be registered multiple times.
         manager.registerListeners();
       });
     } else {
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-native-gesture-handler",`
`3`		`- "version": "2.27.1",`
	`3`	`+ "version": "2.27.2",`
`4`	`4`	`"description": "Declarative API exposing native platform touch and gesture system to React Native",`
`5`	`5`	`"scripts": {`
`6`	`6`	`"test": "jest",`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import Mocks from '../mocks';`
	`1`	`+import Mocks from '../mocks/mocks';`
`2`	`2`
`3`	`3`	`export default {`
`4`	`4`	`...Mocks,`