Touch events unresponsive for flexible child Views in ScrollView component under React Native new architecture

[yandadaFreedom]

Description

There is an issue with the touch events in a ScrollView when using the new architecture. Specifically, below a ScrollView, there is a View component with a minWidth of 100%. Inside this View, there are three child View components, each set with flexGrow: 1, flexShrink: 1, and flexBasis: "25%". The last two child View component does not respond to the touchstart event under the new architecture, while it works fine in the old architecture.

Steps to reproduce

1. Use GestureHandlerRootView to create the root node.
2. Create a ScrollView component provided by react-native-gesture-handler and set horizontal to true
3. Place a View component below the ScrollView with minWidth: 100%.
4. Inside the View component, add three child View components, each with flexGrow: 1, flexShrink: 1, and flexBasis: "25%".
5. Test the touchstart event on the last two child View component.

Expected Result:
The last two child View components should respond to the touchstart event.

Actual Result:
The last two child View components do not respond to the touchstart event when using the new architecture, while this issue does not occur in the old architecture.

Snack or a link to a repository

https://github.com/yandadaFreedom/gesture-handler-scrollview-demo/blob/main/App.tsx

Gesture Handler version

2.21.1

React Native version

0.76.1

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

simulator and real device: iphone13、iphone14、iphone15 pro

Acknowledgements

Yes