[iOS] ScrollView/FlatList content invisible on repeated screen navigation in RTL mode (0.84 regression)

[matan-atiya]

Description

After upgrading from React Native 0.83.2 to 0.84.0, ScrollView and FlatList content becomes invisible on iOS when navigating to the same screen a second time while RTL mode is active (I18nManager.forceRTL(true)). The content renders correctly on the first visit but disappears on subsequent navigations. This is a regression — 0.83.2 works correctly, on Android 0.84.0.

Expected behavior

ScrollView/FlatList content should render correctly on every navigation, regardless of how many times the screen has been visited.

Actual behavior

• First visit: Content renders correctly
• Second visit: Content is invisible (some screens show content "pushed to the side, barely visible")
• Third visit: Content completely invisible

Key observations from debugging

• React-side layout values are correct — onLayout reports identical dimensions on both first and second visits (e.g., container: 402x768, scrollView: 402x682, contentSize: 402x839)
• Components DO mount and render — console.log in render confirms execution
• This is a native iOS rendering issue, not a React rendering issue
• LTR mode works perfectly — switching to English (LTR) eliminates the bug entirely
• Setting direction: 'ltr' (opposite of RTL) on a wrapper View fixes the issue — but this breaks LTR mode, confirming it's related to how the native direction style property interacts with I18nManager.forceRTL
• Affects ALL screens with ScrollView/FlatList, not specific components
• Not related to Modals, navigation transitions, or react-native-screens
• Switching to @react-navigation/native-stack does NOT fix the issue — confirming it's a core RN problem

React Native Version

• Broken: 0.84.0 (IOS)
• Working: 0.83.2

Environment

• React Native: 0.84.0
• React: 19.2.0
• @react-navigation/stack: 7.8.2
• @react-navigation/native: 7.1.31
• react-native-screens: 4.24.0
• Xcode: 16.x
• iOS Simulator: iPhone (various models)
• New Architecture (Fabric): enabled (default in 0.84)

Steps to reproduce

1. Enable RTL mode: I18nManager.forceRTL(true)
2. Use @react-navigation/stack (JS-based stack navigator) with TransitionPresets.SlideFromRightIOS
3. Navigate to any screen containing a ScrollView or FlatList
4. Go back
5. Navigate to the same screen again
6. Content is invisible — the screen renders, but ScrollView/FlatList children are not visible

React Native Version

0.84.0

Affected Platforms

Runtime - iOS

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

info Fetching system and libraries information...
System:
  OS: macOS 26.3
  CPU: (8) arm64 Apple M3
  Memory: 140.75 MB / 8.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.11.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 11.10.0
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.2
      - iOS 26.2
      - macOS 26.2
      - tvOS 26.2
      - visionOS 26.2
      - watchOS 26.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.3 AI-253.29346.138.2531.14876573
  Xcode:
    version: 26.3/17C529
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.2.0
    wanted: 19.2.0
  react-native:
    installed: 0.83.2
    wanted: 0.83.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

info React Native v0.84.1 is now available (your project is running on v0.83.2).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.84.1
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.83.2&to=0.84.1
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Stacktrace or Logs

logs `onLayout` reports identical dimensions on both first and second visits (e.g., container: 402x768, scrollView: 402x682, contentSize: 402x839)

MANDATORY Reproducer

https://github.com/react-native-community/reproducer-react-native/blob/main/ReproducerApp/package.json

Screenshots and Videos

No response

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Reproducers are mandatory and we can accept only one of those as a valid reproducer:

• For majority of bugs: send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.
• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template

You can read more about about it on our website: How to report a bug.

[sharifhh]

#55804

[react-native-bot]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[Usman4358]

I am facing an issue with a horizontal pager where multiple images are rendered. On the first render, all images and indicators display correctly. However, when I go back and select the same or a different item, the images and scroll indicators no longer appear. This works fine in LTR, but not in RTL.