react / react/react-native

ScrollView as child of Modal no longer scrollable on first mount/modal opening, RN >= 0.76, Android only, old-arch only

Đang mở
#48,822 17 bình luận 11 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Component: Modal Component: ScrollView Needs: Triage :mag: Platform: Android
Ngôn ngữ chính
C++
Star
127k
Fork
25.3k
Merge trung bình
1 ngày 23 giờ
Pull request đã merge (30 ngày)
4

Mô tả

Description

Since React Native 0.76.0, a ScrollView as a child of the built-in Modal component is no longer scrollable when the modal first opens on Android.

This seems to only affect the old architecture. New architecture seems to be unaffected.
iOS seems unaffected.

The problem is still present in RN 0.77. Downgrading to 0.75.4 fixes it.

Steps to reproduce
  1. Install the reproduction app with yarn android. The reproduction is set to use the old architecture by default.
  2. Click the Open Scrollable Modal button.
  3. Observe that the screen doesn't scroll, even though it should.
  4. Leave the modal open. Try modifying the code in ScrollableModalContent.tsx by adding a style={{flex: 1}} to the ScrollView and saving the file. This hot-reloads the component without unmounting at the parent, and suddenly the ScrollView becomes scrollable.
  5. Close the modal using the hardware back button. Re-open the modal, observing the content is unscrollable again, even with style={{flex: 1}} still on the ScrollView.
  6. Remove the style={{flex: 1}} from the ScrollView and save the file.
  7. Enable newArch in Android gradle.properties.
  8. Rebuild the app and try opening the modal again.
  9. The modal opens and the content inside scrolls as expected.
React Native Version

0.77.0

Affected Platforms

Runtime - Android

Output of npx react-native info
System:
  OS: Linux 6.12 openSUSE Tumbleweed 20250117
  CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
  Memory: 11.91 GB / 31.31 GB
  Shell:
    version: 5.2.37
    path: /bin/bash
Binaries:
  Node:
    version: 20.18.1
    path: ~/.nvm/versions/node/v20.18.1/bin/node
  Yarn:
    version: 1.22.22
    path: /usr/local/bin/yarn
  npm:
    version: 10.8.2
    path: ~/.nvm/versions/node/v20.18.1/bin/npm
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
Languages:
  Java:
    version: 17.0.13
    path: /usr/bin/javac
  Ruby:
    version: 3.4.1
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.77.0
    wanted: 0.77.0
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: false
Stacktrace or Logs
N/A
Reproducer

https://github.com/goguda/react-native-android-scrollview-in-modal-not-always-scrolling-point-76-up

Screenshots and Videos

No response

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Bắt đầu bằng cách chạy reproducer được liên kết với yarn android, sau đó kiểm tra ScrollableModalContent.tsx và thiết lập Android trong gradle.properties trong khi so sánh hành vi của kiến trúc cũ và kiến trúc mới. Hoàn tất khi ScrollView có thể cuộn được ngay lần đầu modal mở trên Android với kiến trúc cũ, đồng thời giữ nguyên hành vi không bị ảnh hưởng của kiến trúc mới và iOS.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
android, react-native
Lĩnh vực
mobile
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
52/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.