Complete Pressable refactor. (#3571)

## Description

This PR introduces a complete `Pressable` refactor.
New `Pressable` version defines sequences of events required to activate
different `Pressable` callbacks.
This approach allows for fewer edge-case controls, and features a much
cleaner code base & a clear execution flow.
The new implementation also makes detection and handling of new,
unexpected cases much simpler.

### Fixes

- Fixes #3476
- [`iOS`] Short taps were ignored when within a list
- Ordering of `onPress*` was chaotic. Aligned it to [the
documentation](https://reactnative.dev/docs/pressable#how-it-works).


### Completion checklist

- `onPress*` 
  - [x] callbacks
  - [x] support `hitSlop` (does not work on `MacOS`)
  - [x] support `pressRetentionOffset`
  - [x] support `unstable_pressDelay`
- `onHover*`
  - [x] callback
  - [x] support `delayHoverIn`, `delayHoverOut`
- `onLongPress`
  - [x] callback
  - [x] support `delayLongPress`
- [x] ref passthrough support
- `Android`
  - [x] works on `fabric`
  - [x] works on `paper`
- `iOS`
- Note: There's a `200ms` delay before `onPressIn` when long-pressing in
a scroll list.
This is an intentional "feature" within `iOS`, but RN `Pressable`
manages to avoid it.
  - [x] works on `fabric`
  - [x] works on `paper`
- [x] `Web` support
- `MacOS`
  - [ ] works on `fabric` (could not test on my setup)
  - [x] works on `paper`
- [x] `style` & `children` support

## Test plan

Use all the existing Pressable examples to test the behaviour of the
newly added pressable.

Make sure to test on the following platforms:
- `Android` fabric
- `Android` paper
- `iOS` fabric
- `iOS` paper
- `MacOS` fabric
- `MacOS` paper
- `Web`

Make sure to also test the following scenarios:
- `Pressable` is not nested, and is not within a `ScrollView`
- `Pressable` is nested within another `Pressable`, without a
`ScrollView`
- `Pressable` is nested within another `Pressable`, which is nested
within a RNGH `ScrollView`
- `Pressable` is nested within another `Pressable`, which is nested
within a RN `ScrollView`
- `Pressable` is nested within another `Pressable`, which is nested
within a `FlashList`
- `Pressable` with `unstable_pressDelay`, `delayLongPress`, `hitSlop` &
`pressRetentionOffset` props.

Author: latekvo

apps/common-app/src/new_api/pressable/index.tsx

@@ -2,6 +2,9 @@ import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { Pressable } from 'react-native-gesture-handler';
 
+const SECTION_RADIUS = 40;
+const BASE_SIZE = 120;
+
 export default function PressableExample() {
   const pressIn = () => {
     console.log('Pressable pressed in');
@@ -40,8 +43,8 @@ export default function PressableExample() {
             onHoverIn={hoverIn}
             onHoverOut={hoverOut}
             onLongPress={longPress}
-            hitSlop={20}
-            pressRetentionOffset={20}>
+            hitSlop={SECTION_RADIUS}
+            pressRetentionOffset={SECTION_RADIUS}>
             <View style={styles.textWrapper}>
               <Text style={styles.text}>Pressable!</Text>
             </View>
@@ -59,16 +62,16 @@ const BACKGROUND_COLOR = '#F5FCFF';
 const styles = StyleSheet.create({
   pressRectContainer: {
     backgroundColor: '#FFD6E0',
-    padding: 20,
-    width: 200,
-    height: 200,
+    padding: SECTION_RADIUS,
+    width: BASE_SIZE + 4 * SECTION_RADIUS,
+    height: BASE_SIZE + 4 * SECTION_RADIUS,
     margin: 'auto',
   },
   hitRectContainer: {
     backgroundColor: '#F29DC3',
-    padding: 20,
-    width: 160,
-    height: 160,
+    padding: SECTION_RADIUS,
+    width: BASE_SIZE + 2 * SECTION_RADIUS,
+    height: BASE_SIZE + 2 * SECTION_RADIUS,
     margin: 'auto',
   },
   rectText: {
@@ -79,13 +82,13 @@ const styles = StyleSheet.create({
     bottom: 2,
   },
   pressable: {
-    width: 120,
-    height: 120,
+    width: BASE_SIZE,
+    height: BASE_SIZE,
     backgroundColor: 'mediumpurple',
   },
   highlight: {
-    width: 120,
-    height: 120,
+    width: BASE_SIZE,
+    height: BASE_SIZE,
     backgroundColor: 'red',
   },
   textWrapper: {

apps/common-app/src/release_tests/nestedPressables/index.tsx

@@ -79,9 +79,25 @@ function GesturizedBoxes() {
 
 function LegacyBoxes() {
   return (
-    <LegacyPressable style={outerStyle}>
-      <LegacyPressable style={middleStyle}>
-        <LegacyPressable style={innerStyle} />
+    <LegacyPressable
+      style={outerStyle}
+      onPressIn={() => console.log('[outer] onPressIn')}
+      onPressOut={() => console.log('[outer] onPressOut')}
+      onPress={() => console.log('[outer] onPress')}
+      onLongPress={() => console.log('[outer] onLongPress')}>
+      <LegacyPressable
+        style={middleStyle}
+        onPressIn={() => console.log('[middle] onPressIn')}
+        onPressOut={() => console.log('[middle] onPressOut')}
+        onPress={() => console.log('[middle] onPress')}
+        onLongPress={() => console.log('[middle] onLongPress')}>
+        <LegacyPressable
+          style={innerStyle}
+          onPressIn={() => console.log('[inner] onPressIn')}
+          onPressOut={() => console.log('[inner] onPressOut')}
+          onPress={() => console.log('[inner] onPress')}
+          onLongPress={() => console.log('[inner] onLongPress')}
+        />
       </LegacyPressable>
     </LegacyPressable>
   );