Fix Pressable onPress callback not working (#3597)

## Description

Rendering `Pressable` during an active press resulted in `onPress` never
being called.
This PR moves `StateMachine` dependencies, such that it is not reset
when `handlePressIn` or `handlePressOut` change.

Fixes #3593

## Test plan

- Use the repro provided within #3593
- See how `onPress` is called correctly

Author: latekvo

packages/react-native-gesture-handler/src/components/Pressable/Pressable.tsx

@@ -1,5 +1,6 @@
 import React, {
   useCallback,
+  useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -35,10 +36,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();
@@ -222,10 +221,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);

packages/react-native-gesture-handler/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;
 

packages/react-native-gesture-handler/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,38 +88,38 @@ 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) => {
         handlePressIn(event);
         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);
   }
 }