Skip to content

Modal becomes unresponsive when using RefreshControl within ScrollView #48579

@kkafar

Description

@kkafar

Description

Note

The issue has been brought to my attention by the user @chvanlennep, who reported it (issue link) initially on react-native-screens repository.
Here I use his modified description & stripped down reproduction.

When displaying a native iOS modal using Modal react-native's component, if the modally presented view contains a RefreshControl component in a scrollable, the modal is unresponsive on mount. Backgrounding the app and returning fixes the issue.

This happens on simulators and real devices.

@kkafar: I've noticed that:

  1. In case animationType is not set - it looks ugly, but there is no bug.
  2. Delaying call to [self _attach] in RCTPullToRefreshViewComponentView.mm resolves the issue (see fix(iOS): modal becomes unresponsive with refresh control inside scrollable #48580). However I do not have understanding of the issue mechanism.

Steps to reproduce

  1. Run the code snippet provided in snack below 👇🏻
  2. Press the "Toggle modal" button.
  3. Try to interact with opened modal and notice that it is not responsive.

React Native Version

0.76.6

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer, Other (please specify)

Output of npx react-native info

System:
  OS: macOS 14.7.1
  CPU: (10) arm64 Apple M2 Pro
  Memory: 141.30 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.3.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 4.1.1
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.9.0
    path: /opt/homebrew/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/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.2 AI-242.23339.11.2421.12483815
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.2
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.0-alpha.2
    wanted: 15.0.0-alpha.2
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.0
    wanted: 0.76.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

N/A - this is a visual glitch, no crash / soft crash / logs of interest are printed

Reproducer

https://snack.expo.dev/jWNIJRvKt6aScyidI-BGW

Screenshots and Videos

Screen.Recording.2025-01-09.at.23.27.27.mov

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions