Add a test case ensuring touch events are dispatched to views overflowing ScrollView content container

packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm

@@ -89,6 +89,7 @@ @interface RCTScrollViewComponentView () <
 
 @implementation RCTScrollViewComponentView {
   ScrollViewShadowNode::ConcreteState::Shared _state;
+  LayoutMetrics _lastContentContainerLayoutMetrics;
   CGSize _contentSize;
   NSTimeInterval _lastScrollEventDispatchTime;
   NSTimeInterval _scrollEventThrottle;
@@ -132,7 +133,7 @@ - (instancetype)initWithFrame:(CGRect)frame
     _automaticallyAdjustKeyboardInsets = NO;
     [self addSubview:_scrollView];
 
-    _containerView = [[UIView alloc] initWithFrame:CGRectZero];
+    _containerView = [[RCTViewComponentView alloc] initWithFrame:CGRectZero];
     [_scrollView addSubview:_containerView];
 
     [self.scrollViewDelegateSplitter addDelegate:self];
@@ -468,7 +469,11 @@ - (void)updateState:(const State::Shared &)state oldState:(const State::Shared &
   }
 
   _contentSize = contentSize;
-  _containerView.frame = CGRect{RCTCGPointFromPoint(data.contentBoundingRect.origin), contentSize};
+  LayoutMetrics newContentContainerLayoutMetrics = LayoutMetrics{
+      .frame = {.origin = data.contentBoundingRect.origin, .size = data.getContentSize()}, .overflowInset = {.top = 1}};
+  [_containerView updateLayoutMetrics:newContentContainerLayoutMetrics
+                     oldLayoutMetrics:_lastContentContainerLayoutMetrics];
+  _lastContentContainerLayoutMetrics = newContentContainerLayoutMetrics;
 
   [self _preserveContentOffsetIfNeededWithBlock:^{
     self->_scrollView.contentSize = contentSize;

packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js

@@ -457,6 +457,16 @@ const examples: Array<RNTesterModuleExample> = [
       return <ClippingExampleHorizontal />;
     },
   },
+  {
+    name: 'touchableChildrenOverflowingContainerHorizontal',
+    title:
+      '<ScrollView> touchable children overflow content container (horizontal = true)\n',
+    description:
+      "Children that overflow ScrollView's content container should still receive touch events",
+    render() {
+      return <ChildrenWithTouchEventsOverflowingContainerHorizontal />;
+    },
+  },
 ];
 
 if (Platform.OS === 'ios') {
@@ -1352,6 +1362,56 @@ function ClippingExampleHorizontal() {
   );
 }
 
+function TouchableItem({index}: {index: number}) {
+  const [pressed, setPressed] = useState(false);
+
+  return (
+    <View
+      onTouchStart={() => setPressed(p => !p)}
+      testID={`touchable_item_${index}`}
+      style={{
+        position: 'relative',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: '25%',
+        margin: 5,
+        backgroundColor: pressed ? 'gray' : 'lightgray',
+      }}>
+      <Text>Item {index}</Text>
+    </View>
+  );
+}
+
+function ChildrenWithTouchEventsOverflowingContainerHorizontal() {
+  return (
+    <ScrollView
+      testID="touchable_overflowing_container_horizontal"
+      horizontal={true}
+      style={[styles.scrollView, {height: 200, width: '100%'}]}
+      contentContainerStyle={{
+        backgroundColor: 'red',
+      }}
+      nestedScrollEnabled={true}>
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'flex-start',
+          alignItems: 'stretch',
+          minHeight: 45,
+          minWidth: '100%',
+        }}>
+        <TouchableItem index={1} />
+        <TouchableItem index={2} />
+        <TouchableItem index={3} />
+      </View>
+    </ScrollView>
+  );
+}
+
 class Item extends React.PureComponent<{
   msg?: string,
   style?: ViewStyleProp,