[General] Allow gesture detector to have multiple children (#3981)

## Description

Updates `GestureDetector` to accept more than a single child when using
gestures other than native.

On native platforms, this is done by changing the layout of the detector
node from matching its only child to calculating the bounding box of all
children. The logic on Android needed to be updated so it tries to hit
test every detector child instead of just the first one.

On web, this is done similarly, but since the detector node doesn't
produce a box, the bounding box is calculated dynamically. This needed
some updates in the custom `findNodeHandle` implementation to stop at
`display: contents` nodes which have more than one child.

## Test plan

```jsx
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { GestureDetector, useTapGesture } from 'react-native-gesture-handler';

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

  return (
    <View style={styles.container}>
      <GestureDetector gesture={tapGesture} enableContextMenu={true}>
        <View style={styles.box} />
        <View style={styles.box} />
      </GestureDetector>
    </View>
  );
}

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
  container: {
    gap: 32,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
```

And example apps

---------

Co-authored-by: Michał Bert <63123542+m-bert@users.noreply.github.com>

Author: j-piasecki

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/GestureHandler.kt

@@ -390,19 +390,34 @@ open class GestureHandler {
     // TODO: this is likely wrong, and the transformed event itself should be
     // in the coordinate system of the child view, but I'm not sure of the
     // consequences
-    if (view is RNGestureHandlerDetectorView && (view as RNGestureHandlerDetectorView).isNotEmpty()) {
-      val detector = view as RNGestureHandlerDetectorView
+    val detectorView = hostDetectorView
+    if (detectorView != null && detectorView.isNotEmpty()) {
       val outPoint = PointF()
-      GestureHandlerOrchestrator.transformPointToChildViewCoords(
-        adaptedTransformedEvent.x,
-        adaptedTransformedEvent.y,
-        detector,
-        detector.getChildAt(0),
-        outPoint,
-      )
-      x = outPoint.x
-      y = outPoint.y
-      isWithinBounds = isWithinBounds(detector.getChildAt(0), x, y)
+      var foundChild = false
+
+      for (i in 0 until detectorView.childCount) {
+        val child = detectorView.getChildAt(i)
+        GestureHandlerOrchestrator.transformPointToChildViewCoords(
+          adaptedTransformedEvent.x,
+          adaptedTransformedEvent.y,
+          detectorView,
+          child,
+          outPoint,
+        )
+        if (isWithinBounds(child, outPoint.x, outPoint.y)) {
+          x = outPoint.x
+          y = outPoint.y
+          isWithinBounds = true
+          foundChild = true
+          break
+        }
+      }
+
+      if (!foundChild) {
+        x = adaptedTransformedEvent.x
+        y = adaptedTransformedEvent.y
+        isWithinBounds = false
+      }
     } else {
       x = adaptedTransformedEvent.x
       y = adaptedTransformedEvent.y

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerDetectorView.kt

@@ -108,6 +108,12 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
   override fun addView(child: View, index: Int, params: LayoutParams?) {
     super.addView(child, index, params)
 
+    if (nativeHandlers.isNotEmpty()) {
+      assert(childCount == 1) {
+        "Cannot have more than one child view when native gesture handlers are attached to the detector"
+      }
+    }
+
     tryAttachNativeHandlersToChildView(child)
   }
 
@@ -134,6 +140,9 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
         if (shouldAttachGestureToChildView(tag) && actionType == GestureHandler.ACTION_TYPE_NATIVE_DETECTOR) {
           // It might happen that `attachHandlers` will be called before children are added into view hierarchy. In that case we cannot
           // attach `NativeViewGestureHandlers` here and we have to do it in `addView` method.
+          assert(childCount <= 1) {
+            "Cannot attach native gesture handlers when the detector has multiple children"
+          }
           nativeHandlers.add(tag)
         } else {
           registry.attachHandlerToView(tag, viewTag, actionType, this)
@@ -191,6 +200,14 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
   }
 
   private fun tryAttachNativeHandlersToChildView(child: View) {
+    if (nativeHandlers.isEmpty()) {
+      return
+    }
+
+    assert(childCount == 1) {
+      "Cannot have more than one child view when native gesture handlers are attached to the detector"
+    }
+
     val registry = RNGestureHandlerModule.registries[moduleId]
       ?: throw Exception("Tried to access a non-existent registry")
 

packages/react-native-gesture-handler/apple/RNGestureHandlerDetector.mm

@@ -158,6 +158,12 @@ - (void)didAddSubview:(RNGHUIView *)view
 {
   [super didAddSubview:view];
 
+  if (_nativeHandlers.count > 0) {
+    react_native_assert(
+        self.subviews.count == 1 &&
+        "Cannot have more than one child view when native gesture handlers are attached to the detector");
+  }
+
   [self tryAttachNativeHandlersToChildView];
 }
 
@@ -201,6 +207,9 @@ - (void)attachHandlers:(const std::vector<int> &)handlerTags
       if ([self shouldAttachGestureToSubview:@(tag)] && actionType == RNGestureHandlerActionTypeNativeDetector) {
         // It might happen that `attachHandlers` will be called before children are added into view hierarchy. In that
         // case we cannot attach `NativeViewGestureHandlers` here and we have to do it in `didAddSubview` method.
+        react_native_assert(
+            self.subviews.count <= 1 &&
+            "Cannot attach native gesture handlers when the detector has multiple children");
         [_nativeHandlers addObject:@(tag)];
       } else {
         if (actionType == RNGestureHandlerActionTypeVirtualDetector) {
@@ -294,6 +303,14 @@ - (void)updateVirtualChildren:(const std::vector<RNGestureHandlerDetectorVirtual
 
 - (void)tryAttachNativeHandlersToChildView
 {
+  if (_nativeHandlers.count == 0) {
+    return;
+  }
+
+  react_native_assert(
+      self.subviews.count == 1 &&
+      "Cannot have more than one child view when native gesture handlers are attached to the detector");
+
   RNGestureHandlerManager *handlerManager = [RNGestureHandlerModule handlerManagerForModuleId:_moduleId];
 
   RNGHUIView *view = self.subviews[0];

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

@@ -11,6 +11,8 @@
 
 #include "RNGestureHandlerDetectorShadowNode.h"
 
+#include <limits>
+
 namespace facebook::react {
 
 extern const char RNGestureHandlerDetectorComponentName[] =
@@ -20,16 +22,12 @@ void RNGestureHandlerDetectorShadowNode::initialize() {
   // Disable forcing view flattening
   ShadowNode::traits_.unset(ShadowNodeTraits::ForceFlattenView);
 
-  // When the detector is cloned and has a child node, the child node should be
-  // cloned as well to ensure it is mutable.
+  // When the detector is cloned and has child nodes, the children should be
+  // cloned as well to ensure they are mutable.
   const auto &children = getChildren();
-  if (!children.empty()) {
-    react_native_assert(
-        children.size() == 1 &&
-        "RNGestureHandlerDetector received more than one child");
-
+  for (size_t i = 0; i < children.size(); i++) {
     // Will clone the child and ensure it's not flattened
-    replaceChild(*children[0], children[0], 0);
+    replaceChild(*children[i], children[i], i);
   }
 }
 
@@ -47,39 +45,72 @@ void RNGestureHandlerDetectorShadowNode::replaceChild(
 }
 
 void RNGestureHandlerDetectorShadowNode::layout(LayoutContext layoutContext) {
-  // TODO: consider allowing more than one child and doing bounding box
-  react_native_assert(getChildren().size() == 1);
-
-  auto child = std::static_pointer_cast<const YogaLayoutableShadowNode>(
-      getChildren()[0]);
-  auto childWithProtectedAccess =
-      std::static_pointer_cast<const RNGestureHandlerDetectorShadowNode>(child);
-
-  auto shouldSkipCustomLayout =
-      !childWithProtectedAccess->yogaNode_.getHasNewLayout();
+  const auto &children = getChildren();
+  react_native_assert(
+      !children.empty() &&
+      "GestureDetector must have at least one child node.");
+
+  // Check if any child has a new layout
+  bool anyChildHasNewLayout = false;
+  for (const auto &child : children) {
+    auto yogaChild =
+        std::static_pointer_cast<const YogaLayoutableShadowNode>(child);
+    auto childWithProtectedAccess =
+        std::static_pointer_cast<const RNGestureHandlerDetectorShadowNode>(
+            yogaChild);
+    if (childWithProtectedAccess->yogaNode_.getHasNewLayout()) {
+      anyChildHasNewLayout = true;
+      break;
+    }
+  }
 
-  // Do default layout after reading the new layout flag from the child.
-  // Default layout will reset the flag on the child nodes.
+  // Do default layout after reading the new layout flags from children.
+  // Default layout will reset the flag on child nodes.
   YogaLayoutableShadowNode::layout(layoutContext);
 
-  // The child node did not have its layout changed, we can reuse previous
-  // values
-  if (shouldSkipCustomLayout) {
+  // No child had its layout changed, we can reuse previous values
+  if (!anyChildHasNewLayout) {
     react_native_assert(previousLayoutMetrics_.has_value());
     setLayoutMetrics(previousLayoutMetrics_.value());
     return;
   }
 
-  child->ensureUnsealed();
-  auto mutableChild = std::const_pointer_cast<YogaLayoutableShadowNode>(child);
+  // Calculate bounding box of all children
+  Float minX = std::numeric_limits<Float>::infinity();
+  Float minY = std::numeric_limits<Float>::infinity();
+  Float maxX = -std::numeric_limits<Float>::infinity();
+  Float maxY = -std::numeric_limits<Float>::infinity();
+
+  for (const auto &child : children) {
+    auto yogaChild =
+        std::static_pointer_cast<const YogaLayoutableShadowNode>(child);
+    const auto &frame = yogaChild->getLayoutMetrics().frame;
+
+    minX = std::min(minX, frame.origin.x);
+    minY = std::min(minY, frame.origin.y);
+    maxX = std::max(maxX, frame.origin.x + frame.size.width);
+    maxY = std::max(maxY, frame.origin.y + frame.size.height);
+  }
 
-  auto metrics = child->getLayoutMetrics();
-  metrics.frame = child->getLayoutMetrics().frame;
+  // Set detector's metrics to the bounding box of all children
+  auto metrics = getLayoutMetrics();
+  metrics.frame.origin = Point{minX, minY};
+  metrics.frame.size = Size{maxX - minX, maxY - minY};
   setLayoutMetrics(metrics);
 
-  auto childmetrics = child->getLayoutMetrics();
-  childmetrics.frame.origin = Point{};
-  mutableChild->setLayoutMetrics(childmetrics);
+  // Shift all children so their positions are relative to the detector's origin
+  for (const auto &child : children) {
+    auto yogaChild =
+        std::static_pointer_cast<const YogaLayoutableShadowNode>(child);
+    yogaChild->ensureUnsealed();
+    auto mutableChild =
+        std::const_pointer_cast<YogaLayoutableShadowNode>(yogaChild);
+
+    auto childMetrics = yogaChild->getLayoutMetrics();
+    childMetrics.frame.origin.x -= minX;
+    childMetrics.frame.origin.y -= minY;
+    mutableChild->setLayoutMetrics(childMetrics);
+  }
 }
 
 std::shared_ptr<const ShadowNode>

packages/react-native-gesture-handler/src/findNodeHandle.web.ts

@@ -18,7 +18,10 @@ export default function findNodeHandle(
   }
 
   if (viewRef instanceof Element) {
-    if (viewRef.style.display === 'contents') {
+    if (
+      viewRef.style.display === 'contents' &&
+      viewRef.childElementCount === 1
+    ) {
       return findNodeHandle(viewRef.firstChild as HTMLElement);
     }
 
@@ -31,9 +34,15 @@ export default function findNodeHandle(
 
   // In new API, we receive ref object which `current` field points to  wrapper `div` with `display: contents;`.
   // We want to return the first descendant (in DFS order) that doesn't have this property.
+  // When a `display: contents` wrapper has multiple children (e.g. multi-child detector),
+  // we stop traversal and return the wrapper itself since there is no single child to resolve to.
   let element = (viewRef as GestureHandlerRef)?.current;
 
-  while (element && element.style.display === 'contents') {
+  while (
+    element &&
+    element.style.display === 'contents' &&
+    element.childElementCount === 1
+  ) {
     element = element.firstChild as HTMLElement;
   }
 

packages/react-native-gesture-handler/src/v3/detectors/HostGestureDetector.web.tsx

@@ -65,6 +65,14 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
         ).shouldAttachGestureToChildView() &&
         actionType === ActionType.NATIVE_DETECTOR
       ) {
+        if (viewRef.current!.childElementCount > 1) {
+          throw new Error(
+            tagMessage(
+              'Cannot have more than one child view when native gesture handlers are attached to the detector'
+            )
+          );
+        }
+
         RNGestureHandlerModule.attachGestureHandler(
           tag,
           viewRef.current!.firstChild,
@@ -110,20 +118,6 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
   }, [props]);
 
   useEffect(() => {
-    if (React.Children.count(children) !== 1) {
-      throw new Error(
-        tagMessage('Detector expected to have exactly one child element')
-      );
-    }
-  }, [children]);
-
-  useEffect(() => {
-    if (React.Children.count(children) !== 1) {
-      throw new Error(
-        tagMessage('Detector expected to have exactly one child element')
-      );
-    }
-
     detachHandlers(handlerTagsSet, attachedHandlers.current);
 
     attachHandlers(