[Native] Automatically unflatten detector children (#3963)

## Description

On Android this requires
#3962
to test, as the non-transparent views are never flattened.

Automatically unflattens the child node of the detector component, so
that setting `collapsable={false}` is no longer needed.

## Test plan

Notce the lack of `collapsable={false}` on the detector's child.
```jsx
import React from 'react';
import { StyleSheet, View } from 'react-native';
import {
  GestureDetector,
  GestureHandlerRootView,
  useTapGesture,
} from 'react-native-gesture-handler';

export default function EmptyExample() {
  const tap = useTapGesture({
    onActivate: () => {
      console.log('tap');
    },
  });

  return (
    <GestureHandlerRootView style={styles.container}>
      <GestureDetector gesture={tap}>
        <View style={{ flex: 1, backgroundColor: 'transparent' }} />
      </GestureDetector>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
```

Author: j-piasecki

packages/react-native-gesture-handler/shared/shadowNodes/react/renderer/components/rngesturehandler_codegen/RNGestureHandlerDetectorShadowNode.cpp

@@ -28,11 +28,24 @@ void RNGestureHandlerDetectorShadowNode::initialize() {
         children.size() == 1 &&
         "RNGestureHandlerDetector received more than one child");
 
-    const auto clonedChild = children[0]->clone({});
-    replaceChild(*children[0], clonedChild);
+    // Will clone the child and ensure it's not flattened
+    replaceChild(*children[0], children[0], 0);
   }
 }
 
+void RNGestureHandlerDetectorShadowNode::appendChild(
+    const std::shared_ptr<const ShadowNode> &child) {
+  YogaLayoutableShadowNode::appendChild(unflattenNode(child));
+}
+
+void RNGestureHandlerDetectorShadowNode::replaceChild(
+    const ShadowNode &oldChild,
+    const std::shared_ptr<const ShadowNode> &newChild,
+    size_t suggestedIndex) {
+  YogaLayoutableShadowNode::replaceChild(
+      oldChild, unflattenNode(newChild), suggestedIndex);
+}
+
 void RNGestureHandlerDetectorShadowNode::layout(LayoutContext layoutContext) {
   // TODO: consider allowing more than one child and doing bounding box
   react_native_assert(getChildren().size() == 1);
@@ -69,4 +82,18 @@ void RNGestureHandlerDetectorShadowNode::layout(LayoutContext layoutContext) {
   mutableChild->setLayoutMetrics(childmetrics);
 }
 
+std::shared_ptr<const ShadowNode>
+RNGestureHandlerDetectorShadowNode::unflattenNode(
+    const std::shared_ptr<const ShadowNode> &node) {
+  auto clonedNode = node->clone({});
+  auto clonedNodeWithProtectedAccess =
+      std::static_pointer_cast<RNGestureHandlerDetectorShadowNode>(clonedNode);
+
+  clonedNodeWithProtectedAccess->traits_.set(ShadowNodeTraits::FormsView);
+  clonedNodeWithProtectedAccess->traits_.set(
+      ShadowNodeTraits::FormsStackingContext);
+
+  return clonedNode;
+}
+
 } // namespace facebook::react

packages/react-native-gesture-handler/shared/shadowNodes/react/renderer/components/rngesturehandler_codegen/RNGestureHandlerDetectorShadowNode.h

@@ -53,9 +53,17 @@ class RNGestureHandlerDetectorShadowNode final
     initialize();
   }
 
+  void appendChild(const std::shared_ptr<const ShadowNode> &child) override;
+  void replaceChild(
+      const ShadowNode &oldChild,
+      const std::shared_ptr<const ShadowNode> &newChild,
+      size_t suggestedIndex = SIZE_MAX) override;
+
   void layout(LayoutContext layoutContext) override;
 
  private:
+  std::shared_ptr<const ShadowNode> unflattenNode(
+      const std::shared_ptr<const ShadowNode> &node);
   void initialize();
 
   std::optional<LayoutMetrics> previousLayoutMetrics_;