RTL Layout Direction Not Updating after app reload with New React Native Architecture

[serhii-yalla]

Description

When using I18nManager to switch the layout direction between RTL (Right-to-Left) and LTR (Left-to-Right), the changes do not reflect after reload on the UI(doesn't force styles), but apply for animations. This issue appears specifically with the new React Native architecture. The styles and layout directions are only applied correctly after the app is fully restarted.

Steps to reproduce

1. Set up a React Native project with the new architecture enabled.
2. Use I18nManager.forceRTL(true/false) to change the layout direction and use react-native-restart. to restart the app.
3. Observe that the UI does not update immediately(styles not forced to be like text-align: right).

React Native Version

0.74.0

Affected Platforms

Runtime - iOS, Build - MacOS

Areas

Fabric - The New Renderer, TurboModule - The New Native Module System, JSI - Javascript Interface, Bridgeless - The New Initialization Flow, Codegen

Output of npx react-native info

System:
  OS: macOS 14.5
  CPU: (10) arm64 Apple M1 Max
  Memory: 272.36 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.10.0
    path: ~/.nvm/versions/node/v20.10.0/bin/node
  Yarn:
    version: 4.3.1
    path: ~/.nvm/versions/node/v20.10.0/bin/yarn
  npm:
    version: 10.2.3
    path: ~/.nvm/versions/node/v20.10.0/bin/npm
  Watchman:
    version: 2024.07.15.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.18034.62.2411.12071903
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.0
    wanted: 0.74.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

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

### Stacktrace or Logs

```text
No crush or failure

Reproducer

• https://github.com/serhii-yalla/RTL-Layout-Direction-Not-Updating-after-app-reload-with-New-React-Native-Architecture

Screenshots and Videos

No response

[react-native-bot]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[react-native-bot]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.74.3. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[react-native-bot]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[react-native-bot]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[cortinico]

@serhii-yalla is the same behavior happening also on Old Arch?

[serhii-yalla]

@serhii-yalla is the same behavior happening also on Old Arch?

No. On the old arch reload forces styles to change. So it works as expected

[cortinico]

@serhii-yalla great thanks for the info.
Could you add a couple of videos of OldArch/NewArch? It would make it easier for me to find an owner for this one.

[serhii-yalla]

@serhii-yalla great thanks for the info. Could you add a couple of videos of OldArch/NewArch? It would make it easier for me to find an owner for this one.

@cortinico Here it is.

WithoutNewArch.1.mp4

WithNewArch.1.mp4

[cortinico]

Great thank you!
If we could also have a small reproducer using this template: https://github.com/react-native-community/reproducer-react-native

it would be gold

[serhii-yalla]

@cortinico Here is reproducer for you
https://github.com/serhii-yalla/RTL-Layout-Direction-Not-Updating-after-app-reload-with-New-React-Native-Architecture

[numandev1]

getting the same issue, in the new architecture, the Layout direction is not working

[numandev1]

maybe it is related to #39803

[asgarPeerbits]

I am also facing the same issue in version 0.76.1. However, it works perfectly on Android; the issue only occurs on iOS.

[mohamedadlyy]

ihave the same issue on ios

[a-eid]

weirdly enough if you close and relaunch the app it works, but not with reloading.

[Kaveh-ap]

The same goes for iOS and the version "react-native": "0.75.4" with the new architecture.
.
// Enable RTL support [[RCTI18nUtil sharedInstance] allowRTL:YES]; [[RCTI18nUtil sharedInstance] forceRTL:YES];

Adding these lines to the AppDelegate, or removing them doesn't make a difference at all.

[omarabualhija]

any solution for this issue ?

[hkellou-vitalcare]

Any news on the issue ? We're unable to update our app to New Arch with this issue still going on as we heavily rely on RTL/LTR language switch especially for our demos.

[rohit9454-fire]

I'm also facing the same issue

[mohamedhelmi70]

I fixed the problem by adding this line of style for my reusable view component
and it's good
the direction of the app is changed after reload the app using react-native-restart
<View style={{ direction: I18nManager.isRTL ? "rtl" : "ltr" }} {...otherProps} />

[a-eid]

I fixed the problem by adding this line of style for my reusable view component and it's good the direction of the app is changed after reload the app using react-native-restart <View style={{ direction: I18nManager.isRTL ? "rtl" : "ltr" }} {...otherProps} />

this doesn't work in all cases. only in some cases.

[hkellou-vitalcare]

I fixed the problem by adding this line of style for my reusable view component and it's good the direction of the app is changed after reload the app using react-native-restart <View style={{ direction: I18nManager.isRTL ? "rtl" : "ltr" }} {...otherProps} />

Thanks for your answer. It's not a total fix for now, for example : TabNavigator isn't changing, some items using offset are going off and so on. I would say it's an "ok"-ish solution for a temporary fix, but it shouldn't behave like that with new arch vs old arch imho.

[blakef]

We spent a little time looking into this. One of the things that came up was what's the real world use case for dynamically being able to change this when the application is running? Clearly it's useful for testing, but how is this affecting users of your React Native application?

We're just trying to colour the impact of this.

[a-eid]

@blakef yes it's needed in the real world cases, users change languages in the app and expect to see the change reflect immediately. this works flawlessly on the web for example..

[hkellou-vitalcare]

We spent a little time looking into this. One of the things that came up was what's the real world use case for dynamically being able to change this when the application is running? Clearly it's useful for testing, but how is this affecting users of your React Native application?

We're just trying to colour the impact of this.

People use to change the language say from English to Arabic and need to see those interfaces actually switch from ltr to rtl. Basically you need to "restart" app for that to happen and we've been actively using react-native-restrat until now. However with new arch it's no longer possible and this means people are going to have different app behvaiours and that's not ideal at all. Especially that closing and opening the app will give yet another view to the user (the actual expected one: say for the bottom tabs for examples that will be shown from right-to-left in rtl languages) which means it can be a really confusing UX

[mdaldoukhi]

any solution?

[KSayed91]

the issue is still exist in [email protected] new Architecture

[mrusmanali]

I guess we have to leave an undeclared variable after the language change to let tha app crash... and hope that user will open it again.

[hkellou-vitalcare]

I guess we have to leave an undeclared variable after the language change to let tha app crash... and hope that user will open it again.

I would advice against it, that will make your crash metrics go down hill and might trigger an alert in your google play console.

[AsherSheikh]

Having facing the same issue only on iOS, android work perfectly in react native version 0.76.3... any update for iOS ??

[cortinico]

Another reproducer: https://github.com/bhojaniasgar/RTLIssue

[ahmamedhat]

Facing the same issue here, I use:

"react-native": "0.76.3",
"expo": "~52.0.11"

[armata99]

I'm experiencing same issue on IOS with react-native: 0.76.3 and newArch enabled. Android is fine.

[mktufan21]

Disable newArch until it is fixed

It will solve the problem

add this inside your PodFile

use_react_native!(:path => config[:reactNativePath], :new_arch_enabled => false)
$ReactNativePath = "../node_modules/react-native"
pod 'React-Codegen', :path => $ReactNativePath, :inhibit_warnings => true if false

[asgarPeerbits]

@mktufan21 After making this false react-native-mmkv is not working in Version 3.x..x and when downgrading MMKV 2.x.x then android not working

is there any way to use MMKV version 3.x.x in android and 2.x.x in iOS till this issue solves in new Architecture

[a-eid]

@asgarPeerbits You have to use the new arch to be able to use rn mmkv v3.

[asgarPeerbits]

@a-eid Yes its enable in Android side