I tried to reproduce this same issue with the "old" architecture, and it works correctly, even though there's a closed issue due to inactivity (https://github.com/facebook/react-native/issues/32592) that describes this problem. However, it functions correctly in the old architecture. This issue only occurs in the new architecture.
When inserting 3 or more ScrollViews inside a View that has the style: flex-direction: 'row', the onMomentumScrollEnd event is not triggered in one of the ScrollViews. The snapToInterval also doesn't work correctly, and is ignored. I imagine snapToInterval relies on onMomentumScrollEnd or something similar to it.
For some reason, if the ScrollView container takes up the full width of the device, the bug doesn't occur.
If you use any horizontal padding, the bug occurs.
If you place any element next to the ScrollViews, the bug occurs.
If you use margin, the bug doesn't occur.
In my reproduction, I included all these examples. Perhaps it is something related to the contentContainer of the ScrollView? I'm not sure. I tried reproducing as many scenarios as possible to reach a conclusion.
The bug occurs in Android and iOS(I don't tested in other devices)
Steps to reproduce
run yarn.
run yarn pod-install if you want to use iOS devices.
run yarn android or yarn ios.
Scroll any of the rendered ScrollViews, each one exhibits the described issue.
Description
I tried to reproduce this same issue with the "old" architecture, and it works correctly, even though there's a closed issue due to inactivity (https://github.com/facebook/react-native/issues/32592) that describes this problem. However, it functions correctly in the old architecture. This issue only occurs in the new architecture.
When inserting 3 or more ScrollViews inside a View that has the style:
flex-direction: 'row'
, theonMomentumScrollEnd
event is not triggered in one of the ScrollViews. ThesnapToInterval
also doesn't work correctly, and is ignored. I imaginesnapToInterval
relies ononMomentumScrollEnd
or something similar to it. For some reason, if the ScrollView container takes up the full width of the device, the bug doesn't occur.If you use any horizontal padding, the bug occurs.
If you place any element next to the ScrollViews, the bug occurs.
If you use margin, the bug doesn't occur.
In my reproduction, I included all these examples. Perhaps it is something related to the
contentContainer
of the ScrollView? I'm not sure. I tried reproducing as many scenarios as possible to reach a conclusion.The bug occurs in Android and iOS(I don't tested in other devices)
Steps to reproduce
yarn
.pod-install
if you want to use iOS devices.yarn android
oryarn ios
.React Native Version
0.75.3
Affected Platforms
Runtime - Android, Runtime - iOS
Areas
JSI - Javascript Interface
Output of
npx react-native info
Stacktrace or Logs
Reproducer
https://github.com/GuilhermeHCDias/new-arch-scrollview-bug
Screenshots and Videos