iOS: Different Behavior of Nested ScrollView

[kyohei1kamimura]

Description

We place multiple child ScrollViews inside a single parent ScrollView. When one child ScrollView is scrolling, the other child ScrollView cannot scroll.

This issue does not occur on Android. Additionally, it did not occur on either iOS or Android in React Native 0.73.6.

Is this the expected behavior, or is it a bug?

Steps to reproduce

1. Implement a ScrollView as the parent container.
2. Inside the parent ScrollView, add two child ScrollViews, each containing enough content to enable scrolling.
3. Run the project on an iOS device or simulator.
4. Scroll one of the child ScrollViews and try to scroll the other child ScrollView at the same time.
5. Observe that while one child ScrollView is scrolling, the other cannot scroll.

React Native Version

0.78.1

Affected Platforms

Runtime - iOS

Output of npx @react-native-community/cli info

System:
  OS: macOS 14.6.1
  CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
  Memory: 817.27 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.19.0
    path: ~/.nodenv/versions/18.19.0/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nodenv/versions/18.19.0/bin/yarn
  npm:
    version: 10.2.3
    path: ~/.nodenv/versions/18.19.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/kamimura_kyouhei/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.15989.150.2411.11948838
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /usr/bin/javac
  Ruby:
    version: 2.7.0
    path: /Users/kamimura_kyouhei/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.0
    wanted: 18.3.0
  react-native:
    installed: 0.76.6
    wanted: 0.76.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

no logs

Reproducer

https://snack.expo.dev/@kyohei1kamimura/nest-scrollableview?platform=ios

Screenshots and Videos

iOS	Android
2025-03-14.10.58.13.mov	2025-03-14.10.58.47.mov

[react-native-bot]

Warning

Unsupported version: It looks like your issue or the example you provided uses an unsupported version of React Native.

Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

[react-native-bot]

Warning

Unsupported version: It looks like your issue or the example you provided uses an unsupported version of React Native.

Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

[migueldaipre]

Hey @kyohei1kamimura, thanks for reporting this issue.

Could you update the repro project to the latest stable version? Without Expo do you have the same issue?

[kyohei1kamimura]

@migueldaipre
This issue also occurs in React Native 0.78.1 without Expo.