react-native-gesture-handler 2.27.0 → 2.27.2

package/src/components/Pressable/Pressable.tsx

@@ -1,6 +1,6 @@
 import React, {
   useCallback,
-  useLayoutEffect,
+  useEffect,
   useMemo,
   useRef,
   useState,
@@ -14,9 +14,9 @@ import {
 } from './PressableProps';
 import {
   Insets,
+  LayoutChangeEvent,
   Platform,
   StyleProp,
-  View,
   ViewStyle,
   processColor,
 } from 'react-native';
@@ -35,10 +35,8 @@ import {
   RelationPropName,
   RelationPropType,
 } from '../utils';
-import {
-  getConfiguredStateMachine,
-  StateMachineEvent,
-} from './stateDefinitions';
+import { getStatesConfig, StateMachineEvent } from './stateDefinitions';
+import { PressableStateMachine } from './StateMachine';
 
 const DEFAULT_LONG_PRESS_DURATION = 500;
 const IS_TEST_ENV = isTestEnv();
@@ -47,7 +45,6 @@ let IS_FABRIC: null | boolean = null;
 
 const Pressable = (props: PressableProps) => {
   const {
-    ref,
     testOnly_pressed,
     hitSlop,
     pressRetentionOffset,
@@ -61,6 +58,7 @@ const Pressable = (props: PressableProps) => {
     onPressIn,
     onPressOut,
     onLongPress,
+    onLayout,
     style,
     children,
     android_disableSound,
@@ -70,7 +68,6 @@ const Pressable = (props: PressableProps) => {
     simultaneousWithExternalGesture,
     requireExternalGestureToFail,
     blocksExternalGesture,
-    dimensionsAfterResize,
     ...remainingProps
   } = props;
 
@@ -80,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);
@@ -110,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);
@@ -222,10 +201,12 @@ const Pressable = (props: PressableProps) => {
     [handleFinalize, innerHandlePressIn, onPress, onPressOut]
   );
 
-  const stateMachine = useMemo(
-    () => getConfiguredStateMachine(handlePressIn, handlePressOut),
-    [handlePressIn, handlePressOut]
-  );
+  const stateMachine = useMemo(() => new PressableStateMachine(), []);
+
+  useEffect(() => {
+    const configuration = getStatesConfig(handlePressIn, handlePressOut);
+    stateMachine.setStates(configuration);
+  }, [handlePressIn, handlePressOut, stateMachine]);
 
   const hoverInTimeout = useRef<number | null>(null);
   const hoverOutTimeout = useRef<number | null>(null);
@@ -376,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}

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

package/src/components/Pressable/StateMachine.tsx

@@ -1,27 +1,35 @@
 import { PressableEvent } from './PressableProps';
 
-interface StateDefinition {
+export interface StateDefinition {
   eventName: string;
   callback?: (event: PressableEvent) => void;
 }
 
 class PressableStateMachine {
-  private states: StateDefinition[];
+  private states: StateDefinition[] | null;
   private currentStepIndex: number;
   private eventPayload: PressableEvent | null;
 
-  constructor(steps: StateDefinition[]) {
-    this.states = steps;
+  constructor() {
+    this.states = null;
     this.currentStepIndex = 0;
     this.eventPayload = null;
   }
 
+  public setStates(states: StateDefinition[]) {
+    this.states = states;
+  }
+
   public reset() {
     this.currentStepIndex = 0;
     this.eventPayload = null;
   }
 
   public handleEvent(eventName: string, eventPayload?: PressableEvent) {
+    if (!this.states) {
+      return;
+    }
+
     const step = this.states[this.currentStepIndex];
     this.eventPayload = eventPayload || this.eventPayload;
 

package/src/components/Pressable/stateDefinitions.ts

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native';
 import { PressableEvent } from './PressableProps';
-import { PressableStateMachine } from './StateMachine';
+import { StateDefinition } from './StateMachine';
 
 export enum StateMachineEvent {
   NATIVE_BEGIN = 'nativeBegin',
@@ -9,11 +9,11 @@ export enum StateMachineEvent {
   LONG_PRESS_TOUCHES_DOWN = 'longPressTouchesDown',
 }
 
-function getAndroidStateMachine(
+function getAndroidStatesConfig(
   handlePressIn: (event: PressableEvent) => void,
   handlePressOut: (event: PressableEvent) => void
 ) {
-  return new PressableStateMachine([
+  return [
     {
       eventName: StateMachineEvent.NATIVE_BEGIN,
     },
@@ -25,14 +25,14 @@ function getAndroidStateMachine(
       eventName: StateMachineEvent.FINALIZE,
       callback: handlePressOut,
     },
-  ]);
+  ];
 }
 
-function getIosStateMachine(
+function getIosStatesConfig(
   handlePressIn: (event: PressableEvent) => void,
   handlePressOut: (event: PressableEvent) => void
 ) {
-  return new PressableStateMachine([
+  return [
     {
       eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
     },
@@ -44,14 +44,14 @@ function getIosStateMachine(
       eventName: StateMachineEvent.FINALIZE,
       callback: handlePressOut,
     },
-  ]);
+  ];
 }
 
-function getWebStateMachine(
+function getWebStatesConfig(
   handlePressIn: (event: PressableEvent) => void,
   handlePressOut: (event: PressableEvent) => void
 ) {
-  return new PressableStateMachine([
+  return [
     {
       eventName: StateMachineEvent.NATIVE_BEGIN,
     },
@@ -66,14 +66,14 @@ function getWebStateMachine(
       eventName: StateMachineEvent.FINALIZE,
       callback: handlePressOut,
     },
-  ]);
+  ];
 }
 
-function getMacosStateMachine(
+function getMacosStatesConfig(
   handlePressIn: (event: PressableEvent) => void,
   handlePressOut: (event: PressableEvent) => void
 ) {
-  return new PressableStateMachine([
+  return [
     {
       eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
     },
@@ -88,14 +88,14 @@ function getMacosStateMachine(
       eventName: StateMachineEvent.FINALIZE,
       callback: handlePressOut,
     },
-  ]);
+  ];
 }
 
-function getUniversalStateMachine(
+function getUniversalStatesConfig(
   handlePressIn: (event: PressableEvent) => void,
   handlePressOut: (event: PressableEvent) => void
 ) {
-  return new PressableStateMachine([
+  return [
     {
       eventName: StateMachineEvent.FINALIZE,
       callback: (event: PressableEvent) => {
@@ -103,23 +103,23 @@ function getUniversalStateMachine(
         handlePressOut(event);
       },
     },
-  ]);
+  ];
 }
 
-export function getConfiguredStateMachine(
+export function getStatesConfig(
   handlePressIn: (event: PressableEvent) => void,
   handlePressOut: (event: PressableEvent) => void
-) {
+): StateDefinition[] {
   if (Platform.OS === 'android') {
-    return getAndroidStateMachine(handlePressIn, handlePressOut);
+    return getAndroidStatesConfig(handlePressIn, handlePressOut);
   } else if (Platform.OS === 'ios') {
-    return getIosStateMachine(handlePressIn, handlePressOut);
+    return getIosStatesConfig(handlePressIn, handlePressOut);
   } else if (Platform.OS === 'web') {
-    return getWebStateMachine(handlePressIn, handlePressOut);
+    return getWebStatesConfig(handlePressIn, handlePressOut);
   } else if (Platform.OS === 'macos') {
-    return getMacosStateMachine(handlePressIn, handlePressOut);
+    return getMacosStatesConfig(handlePressIn, handlePressOut);
   } else {
     // Unknown platform - using minimal universal setup.
-    return getUniversalStateMachine(handlePressIn, handlePressOut);
+    return getUniversalStatesConfig(handlePressIn, handlePressOut);
   }
 }