Fix Pressable requiring dimensionsAfterResize

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,6 +57,11 @@ 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.
    */

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}

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;
 }