facebook / react-native

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

RTL Layout Direction does not Work after the application is reloaded/Restarted in IOS updated React Native architecture #47583

Open bhojaniasgar opened 1 day ago

bhojaniasgar commented 1 day ago

Description

Issue Description: When leveraging the I18nManager module to switch between Right-to-Left (RTL) and Left-to-Right (LTR) layout directions, the UI does not immediately reflect these changes upon app reload, though animations are correctly updated. This behavior is specific to the new React Native architecture, where the layout direction and related styles (e.g., text-align: right) are only properly applied after a full restart of the application, rather than on reload or with the react-native-restart method.

Steps to reproduce

React Native Version

0.76.1

Affected Platforms

Runtime - iOS

Areas

Other (please specify)

Output of npx react-native info

System:
  OS: macOS 15.1
  CPU: (8) arm64 Apple M2
  Memory: 228.64 MB / 8.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.13.0
    path: ~/.nvm/versions/node/v20.13.0/bin/node
  Yarn:
    version: 3.6.4
    path: ~/.nvm/versions/node/v20.13.0/bin/yarn
  npm:
    version: 10.8.3
    path: ~/.nvm/versions/node/v20.13.0/bin/npm
  Watchman:
    version: 2024.09.23.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/asgarbhojani/.rvm/gems/ruby-3.0.0/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK:
    Android NDK: 22.1.7171670
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12550806
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 3.0.0
    path: /Users/asgarbhojani/.rvm/rubies/ruby-3.0.0/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.0
    wanted: 15.0.0
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.1
    wanted: 0.76.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

There is no crash

Reproducer

https://github.com/bhojaniasgar/RTLIssue

Screenshots and Videos

https://github.com/user-attachments/assets/06b1e887-f70b-4510-837d-a212c0825c66

shubhamguptadream11 commented 1 day ago

Duplicate of this issue: https://github.com/facebook/react-native/issues/45661