Changing from LTR to RTL layout requires reloading JS bundle and the layout doesn't persist on restarting the application.

[flashkicker]

Please mark as duplicate if already reported. The closest issue I could find was #6645.
 

Environment

Run the following in your terminal and copy the results here.

1. npx react-native --version: 4.13.1
2. npx react-native info:
     System:
       OS: Windows 10 10.0.18363
       CPU: (4) x64 Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz
       Memory: 1.20 GB / 7.88 GB
     Binaries:
       Node: 12.9.1 - C:\Program Files\nodejs\node.EXE
       Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
       npm: 6.10.2 - C:\Program Files\nodejs\npm.CMD
       Watchman: Not Found
     SDKs:
       Android SDK: Not Found
       Windows SDK:
         AllowDevelopmentWithoutDevLicense: Enabled
         AllowAllTrustedApps: Enabled
         Versions: 10.0.16299.0, 10.0.17134.0, 10.0.17763.0, 10.0.18362.0, 10.0.19041.0
     IDEs:
       Android Studio: Not Found
       Visual Studio: 16.8.30804.86 (Visual Studio Community 2019)
     Languages:
       Java: Not Found
       Python: Not Found
     npmPackages:
       @react-native-community/cli: Not Found
       react: 16.13.1 => 16.13.1
       react-native: 0.63.4 => 0.63.4
       react-native-windows: ^0.63.0-0 => 0.63.20
     npmGlobalPackages:
       react-native: Not Found
    

 

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.
 

1. Set i18nManager.allowRTL(true)
2. Override default locale of UWP app to RTL language and auto-restart UWP app immediately.
    

Expected Results

Layout should appear from right-to-left but instead only the title bar of the app shows up in RTL layout. The content of the app remains LTR. On reloading the JavaScript bundle, the issue is fixed. Upon restarting the app the layout switches back to LTR layout.
 

Snack, code example, screenshot, or link to a repository:

1. App loads normally with default locale of en-US.
   
    
2. User tries to change the locale of the app to Arabic. The app restarts however the content of the app remains in LTR layout, although the title bar does switch to RTL layout.
   
    
3. Reload the JavaScript bundle, and content now appears in RTL layout.
   
    
4. App restarted, locale persists, but RTL layout is no longer seen.
   

[NickGerleman]

We have a mechanism that's a bit hidden that will allow this.

When initializing the ReactInstance in the template app, there is a setting on ReactInstanceSettings called Properties which allows passing settings, objects, etc during instance init.

On this propertyBag, you can set: (L"ReactNative.I18n", L"AllowRTL") to true, so that this setting happens on startup.

We need to add an API to make this more visible, or we need to better document this.

[flashkicker]

Glad to hear there's a fix! How would I do this in a C# UWP app?

[chrisglein]

Above is a workaround, not a proper fix. We should add an API to make it so app authors don't need to pass these around.
There is more documentation on this scheduled, although likely won't specifically help with this: microsoft/react-native-windows-samples#333

We'll use this issue to track creating a proper API for this.

[chrisglein]

@NickGerleman can you outline what the API should look like here?

[mdbaniani]

what I did was using {direction:'rtl'} style on my parent views in each screen component