Implement base for a native detector component (#3599)

## Description

Implements a native `RNGestureHandlerDetector` component based on
`display: contents`:
- The view will match the layout of its child
- The lifecycle of gestures is moved to hooks instead of being managed
by the detector
- Detector should attach and detach native gesture handlers to itself as
it's mounted or unmounted
- Implements sending native events to the detector component
- It's able to work with RN's Animated events

TODO:
- Validate that gestures are correctly attached/detached in all cases
(suspense, display: none, navigation)
- Validate that the gesture lifecycle is correctly managed in StrictMode
- Correctly handle `NativeViewGestureHandler`, which should be attached
to the child (I think)
- Correctly handle the Text component
- Integration with Reanimated

## Test plan

Updated basic example

Author: j-piasecki

apps/basic-example/Gemfile.lock

@@ -5,25 +5,28 @@ GEM
       base64
       nkf
       rexml
-    activesupport (7.1.4.2)
+    activesupport (7.1.5.1)
       base64
+      benchmark (>= 0.3)
       bigdecimal
       concurrent-ruby (~> 1.0, >= 1.0.2)
       connection_pool (>= 2.2.5)
       drb
       i18n (>= 1.6, < 2)
+      logger (>= 1.4.2)
       minitest (>= 5.1)
       mutex_m
+      securerandom (>= 0.3)
       tzinfo (~> 2.0)
     addressable (2.8.7)
       public_suffix (>= 2.0.2, < 7.0)
     algoliasearch (1.27.5)
       httpclient (~> 2.8, >= 2.8.3)
       json (>= 1.5.1)
     atomos (0.1.3)
-    base64 (0.2.0)
-    benchmark (0.4.0)
-    bigdecimal (3.1.9)
+    base64 (0.3.0)
+    benchmark (0.4.1)
+    bigdecimal (3.2.2)
     claide (1.1.0)
     cocoapods (1.15.2)
       addressable (~> 2.8)
@@ -64,8 +67,8 @@ GEM
     cocoapods-try (1.2.0)
     colored2 (3.1.2)
     concurrent-ruby (1.3.3)
-    connection_pool (2.5.1)
-    drb (2.2.1)
+    connection_pool (2.5.3)
+    drb (2.2.3)
     escape (0.0.4)
     ethon (0.16.0)
       ffi (>= 1.15.0)
@@ -77,7 +80,7 @@ GEM
       mutex_m
     i18n (1.14.7)
       concurrent-ruby (~> 1.0)
-    json (2.10.2)
+    json (2.12.2)
     logger (1.7.0)
     minitest (5.25.5)
     molinillo (0.8.0)
@@ -89,6 +92,7 @@ GEM
     public_suffix (4.0.7)
     rexml (3.4.1)
     ruby-macho (2.5.1)
+    securerandom (0.3.2)
     typhoeus (1.4.1)
       ethon (>= 0.9.0)
     tzinfo (2.0.6)

apps/basic-example/ios/Podfile.lock

@@ -2678,7 +2678,7 @@ SPEC CHECKSUMS:
   RNReanimated: 25060745a200605462ff56cf488411db066631ce
   RNWorklets: 9bb08cb0ef718ce063f61ca18f95f57aec9b9673
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
-  Yoga: 0c4b7d2aacc910a1f702694fa86be830386f4ceb
+  Yoga: 395b5d614cd7cbbfd76b05d01bd67230a6ad004e
 
 PODFILE CHECKSUM: d05778d3a61b8d49242579ea0aa864580fbb1f64
 

apps/basic-example/src/App.tsx

@@ -4,55 +4,47 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 import Navigator from './Navigator';
 
-import ComponentsScreen from './ComponentsScreen';
-import FinalScreen from './FinalScreen';
-import GestureCompositionScreen from './GestureCompositionScreen';
-import HomeScreen from './HomeScreen';
-import ViewFlatteningScreen from './ViewFlatteningScreen';
+import NativeDetector from './NativeDetector';
+import RuntimeDecoration from './RuntimeDecoration';
 
-const Stack = Navigator.create();
-
-Stack.setRoutes({
-  home: {
-    component: HomeScreen,
-    title: 'RNGH FabricExample',
-    rightButtonAction: () => {
-      Stack.navigateTo('gestureComposition');
-    },
-  },
-  gestureComposition: {
-    component: GestureCompositionScreen,
-    title: 'Gesture Composition',
-    rightButtonAction: () => {
-      Stack.navigateTo('components');
-    },
-  },
-  components: {
-    component: ComponentsScreen,
-    title: 'Components',
-    rightButtonAction: () => {
-      Stack.navigateTo('viewFlattening');
-    },
+const EXAMPLES = [
+  {
+    name: 'Runtime Decoration',
+    component: RuntimeDecoration,
   },
-  viewFlattening: {
-    component: ViewFlatteningScreen,
-    title: 'View Flattening',
-    rightButtonAction: () => {
-      Stack.navigateTo('final');
-    },
+  {
+    name: 'Native Detector',
+    component: NativeDetector,
   },
-  final: {
-    component: FinalScreen,
-    title: 'Final Screen',
-  },
-});
+];
+
+const Stack = Navigator.create();
+Stack.setRoutes(
+  Object.fromEntries(
+    EXAMPLES.map((example, index) => [
+      example.name.toLowerCase().replace(/\s+/g, ''),
+      {
+        component: example.component,
+        title: example.name,
+        rightButtonAction:
+          index === EXAMPLES.length - 1
+            ? undefined
+            : () => {
+                Stack.navigateTo(
+                  EXAMPLES[index + 1].name.toLowerCase().replace(/\s+/g, '')
+                );
+              },
+      },
+    ])
+  )
+);
 
 export default function App() {
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <SafeAreaView
         style={[{ flex: 1 }, Platform.OS === 'android' && { paddingTop: 50 }]}>
-        <Stack.Navigator initialRouteName="home" />
+        <Stack.Navigator />
       </SafeAreaView>
     </GestureHandlerRootView>
   );