Fix: onPress callbacks are invoked for all nested Pressables (#3295)

## Description

<!--
Description and motivation for this PR.

Include 'Fixes #<number>' if this is fixing some issue.
-->

Fixes #3282 

The [onStart](https://github.com/software-mansion/react-native-gesture-handler/blob/main/src/components/Pressable/Pressable.tsx#L309-L344) and [onBegin](https://github.com/software-mansion/react-native-gesture-handler/blob/main/src/components/Pressable/Pressable.tsx#L303-L308) callbacks are invoked on the deepest responder on iOS and Android respectively. Inside those methods the `isTouchPropagationAllowed` ref is set to true. Base on that we can assume which `Pressable` should be the responder of the touch on the JS side. Yet there is nothing that would stop invoking `onPress` callbacks if the `isTouchPropagationAllowed` is set to false in [pressOutHandler](https://github.com/software-mansion/react-native-gesture-handler/blob/main/src/components/Pressable/Pressable.tsx#L136-L176). The fix introduces early return in the `pressOutHandler` if clicked `Pressable` is not the deepest one.

On the old architecture the [measure](https://github.com/software-mansion/react-native-gesture-handler/blob/main/src/components/Pressable/Pressable.tsx#L214-L255) method is called asynchronously, usually after the `onStart`. In nested pressables, if the deepest one is clicked it still calls `onTouchesDown` and `onTouchesUp`, which sets [shouldPreventNativeEffects](https://github.com/software-mansion/react-native-gesture-handler/blob/main/src/components/Pressable/Pressable.tsx#L265-L267)  to `true`, omitting the `onStart`, which sets it back to `false`. Because of that, when now we tried to click on the outer Pressable it would be stopped in [onStart shouldPreventNativeEvents check](https://github.com/software-mansion/react-native-gesture-handler/blob/main/src/components/Pressable/Pressable.tsx#L338-L341) without setting the `isTouchPropagationAllowed` to `true` and this is the exact same state that led to setting the `shouldPreventNativeEffects` to `true` so it is a cycle. The simplest solution for this is to check if the `onStart` is called before the `measure` in `shouldPreventNativeEffects` check and early return if it's not.  


## Test plan

Click on the red box and notice that callbacks on its parent are not invoked. Click on the text input to see that the callbacks on its Pressable parent are also not invoked. 

<!--
Describe how did you test this change here.
-->

<details>

<summary>Code</summary>

```ts
import * as React from 'react';
import {
  View,
  Text,
  Pressable as RNPressable,
  SafeAreaView,
  StyleSheet,
  TextInput as RNTextInput,
} from 'react-native';
import {
  GestureHandlerRootView,
  Pressable as RNGHPressable,
  TextInput as RNGHTextInput,
} from 'react-native-gesture-handler';

export default function HomeScreen() {
  return (
    <GestureHandlerRootView>
      <SafeAreaView style={{ flex: 1 }}>
        <View style={styles.container}>
          <View style={styles.wrapper}>
            <RNGHPressable
              style={[styles.pressableStyles, styles.outerPressableStyles]}
              onPress={() => console.log(JSON.stringify('RNGH: Parent Press'))}
              onPressIn={() => console.log('RNGH: Parent PressIn')}
              onPressOut={() => console.log('RNGH: Parent PressOut')}>
              <RNGHPressable
                style={[styles.pressableStyles, styles.innerPressableStyles]}
                onPress={() => console.log(JSON.stringify('RNGH: Child Press'))}
                onPressIn={() => console.log('RNGH: Child PressIn')}
                onPressOut={() => console.log('RNGH: Child PressOut')}>
                <Text>RNGH</Text>
              </RNGHPressable>
            </RNGHPressable>

            <RNPressable
              style={[styles.pressableStyles, styles.outerPressableStyles]}
              onPress={() => console.log(JSON.stringify('RN: Parent Press'))}
              onPressIn={() => console.log('RN: Parent PressIn')}
              onPressOut={() => console.log('RN: Parent PressOut')}>
              <RNPressable
                style={[styles.pressableStyles, styles.innerPressableStyles]}
                onPress={() => console.log(JSON.stringify('RN: Child Press'))}
                onPressIn={() => console.log('RN: Child PressIn')}
                onPressOut={() => console.log('RN: Child PressOut')}>
                <Text>RN</Text>
              </RNPressable>
            </RNPressable>
          </View>

          <View style={styles.wrapper}>
            <RNGHPressable
              style={styles.textInputPressable}
              onPress={() =>
                console.log(JSON.stringify('RNGH: TextInput Press'))
              }
              onPressIn={() => console.log('RNGH: TextInput PressIn')}
              onPressOut={() => console.log('RNGH: TextInput PressOut')}>
              <RNGHTextInput
                placeholder="RNGH TextInput"
                style={styles.textInputStyles}
                onChangeText={(text) => console.log(text)}
              />
            </RNGHPressable>

            <RNPressable
              style={styles.textInputPressable}
              onPress={() => console.log(JSON.stringify('RN: TextInput Press'))}
              onPressIn={() => console.log('RN: TextInput PressIn')}
              onPressOut={() => console.log('RN: TextInput PressOut')}>
              <RNTextInput
                placeholder="RN TextInput"
                style={styles.textInputStyles}
                onChangeText={(text) => console.log(text)}
              />
            </RNPressable>
          </View>
        </View>
      </SafeAreaView>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  wrapper: {
    alignItems: 'center',
    justifyContent: 'center',
    gap: 10,
    flexDirection: 'row',
    marginTop: 10,
  },
  pressableStyles: {
    paddingVertical: 15,
    paddingHorizontal: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  innerPressableStyles: {
    backgroundColor: 'red',
    width: 120,
    height: 50,
  },
  outerPressableStyles: {
    backgroundColor: '#3BE7BB',
  },
  textInputPressable: {
    backgroundColor: 'gray',
    padding: 10,
    borderRadius: 5,
    width: 160,
    // height: 50,
    alignItems: 'center',
    justifyContent: 'center',
  },
  textInputStyles: {
    backgroundColor: 'lightgray',
    paddingHorizontal: 20,
    paddingVertical: 10,
    height: 40
  },
  pressableText: {
    color: '#000',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

```

</details>

Author: coado

example/src/release_tests/nestedPressables/index.tsx

@@ -50,9 +50,28 @@ const outerStyle = ({ pressed }: PressableStateCallbackType) => [
 
 function GesturizedBoxes() {
   return (
-    <GesturizedPressable style={outerStyle} testID="outer">
-      <GesturizedPressable style={middleStyle} testID="middle">
-        <GesturizedPressable style={innerStyle} testID="inner" />
+    <GesturizedPressable
+      style={outerStyle}
+      testID="outer"
+      onPressIn={() => console.log('[outer] onPressIn')}
+      onPressOut={() => console.log('[outer] onPressOut')}
+      onPress={() => console.log('[outer] onPress')}
+      onLongPress={() => console.log('[outer] onLongPress')}>
+      <GesturizedPressable
+        style={middleStyle}
+        testID="middle"
+        onPressIn={() => console.log('[middle] onPressIn')}
+        onPressOut={() => console.log('[middle] onPressOut')}
+        onPress={() => console.log('[middle] onPress')}
+        onLongPress={() => console.log('[middle] onLongPress')}>
+        <GesturizedPressable
+          style={innerStyle}
+          testID="inner"
+          onPressIn={() => console.log('[inner] onPressIn')}
+          onPressOut={() => console.log('[inner] onPressOut')}
+          onPress={() => console.log('[inner] onPress')}
+          onLongPress={() => console.log('[inner] onLongPress')}
+        />
       </GesturizedPressable>
     </GesturizedPressable>
   );

src/components/Pressable/Pressable.tsx

@@ -138,6 +138,24 @@ export default function Pressable(props: PressableProps) {
 
   const pressOutHandler = useCallback(
     (event: PressableEvent) => {
+      if (!isTouchPropagationAllowed.current) {
+        hasPassedBoundsChecks.current = false;
+        isPressCallbackEnabled.current = true;
+        deferredEventPayload.current = null;
+
+        if (longPressTimeoutRef.current) {
+          clearTimeout(longPressTimeoutRef.current);
+          longPressTimeoutRef.current = null;
+        }
+
+        if (pressDelayTimeoutRef.current) {
+          clearTimeout(pressDelayTimeoutRef.current);
+          pressDelayTimeoutRef.current = null;
+        }
+
+        return;
+      }
+
       if (
         !hasPassedBoundsChecks.current ||
         event.nativeEvent.touches.length >
@@ -340,7 +358,9 @@ export default function Pressable(props: PressableProps) {
 
           if (shouldPreventNativeEffects.current) {
             shouldPreventNativeEffects.current = false;
-            return;
+            if (!handlingOnTouchesDown.current) {
+              return;
+            }
           }
 
           isTouchPropagationAllowed.current = true;