Fix Pressable requiring dimensionsAfterResize (#3606)

## Description

The `Pressable` was developed with an incorrect assumption that the
`onLayout` prop is not available on the `NativeButton`.

This PR defines the `onLayout` on `RawButtonProps`, and makes use of
said prop in `Pressable` to remove the need for the
`dimensionsAfterResize` property.

This PR also marks `dimensionsAfterResize` as deprecated.

Fixes #3600

## Test plan

1. Use the provided test code.
2. Notice how the `Pressable`, despite starting out with `0, 0`
dimensions, responds correctly to all press events.
3. Use the `Pressable` examples in our example app to confirm there are
no new issues with the component.

## Test code

<details>

```tsx
import React, { useEffect } from 'react';
import { StyleSheet } from 'react-native';
import {
  Pressable,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
} from 'react-native-reanimated';

export default function EmptyExample() {
  const opacity = useSharedValue(0);

  const containerAnimatedStyle = useAnimatedStyle(() => {
    'worklet';
    return {
      opacity: opacity.value,
      transform: [{ scale: opacity.value }],
    };
  });

  useEffect(() => {
    opacity.value = withTiming(1, { duration: 200 });
  }, [opacity]);

  return (
    <GestureHandlerRootView style={styles.container}>
      <Animated.View style={containerAnimatedStyle}>
        <Pressable style={styles.box} onPress={() => console.log('press')} />
      </Animated.View>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 10,
  },
  box: {
    width: 150,
    height: 150,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },
});


```

</details>

---------

Co-authored-by: Michał Bert <[email protected]>

Author: 2 people

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