facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
118.44k stars 24.25k forks source link

Scrollviews inside row doesn't fire onMomentumScrollEnd #46592

Open GuilhermeHCDias opened 6 days ago

GuilhermeHCDias commented 6 days ago

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', 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.

  1. If you use any horizontal padding, the bug occurs.

  2. If you place any element next to the ScrollViews, the bug occurs.

  3. 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

  1. run yarn.
  2. run yarn pod-install if you want to use iOS devices.
  3. run yarn android or yarn ios.
  4. Scroll any of the rendered ScrollViews, each one exhibits the described issue.

React Native Version

0.75.3

Affected Platforms

Runtime - Android, Runtime - iOS

Areas

JSI - Javascript Interface

Output of npx react-native info

System:
  OS: macOS 15.0
  CPU: (10) arm64 Apple M2 Pro
  Memory: 786.73 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.14.0
    path: /usr/local/bin/node
  Yarn:
    version: 3.6.4
    path: /usr/local/bin/yarn
  npm:
    version: 10.7.0
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.08.12.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.0
      - iOS 18.0
      - macOS 15.0
      - tvOS 18.0
      - visionOS 2.0
      - watchOS 11.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.18034.62.2411.12169540
  Xcode:
    version: 16.0/16A242d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 21.0.4
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.75.3
    wanted: 0.75.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

don't have

Reproducer

https://github.com/GuilhermeHCDias/new-arch-scrollview-bug

Screenshots and Videos

Screenshot 2024-09-21 at 12 29 39

GuilhermeHCDias commented 1 day ago

up