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

[flashkicker]

trafficstars

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: https://github.com/microsoft/react-native-windows-samples/issues/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

[Qurishe]

@NickGerleman any fix for this? I have come very long way in creating my App in React Native Windows. I have even created my own UI library but there are still some issues and lack of documentation and community and now this one is really important because i cannot just use direction property in stylesheet since it won't flip the whole UI. I would be glad if there was a fix or someone helped me..

[Qurishe]

@chrisglein this issue still persists and i am unable to push my application to Production because i need to have RTL support. Any idea or workaround will be appreciated.

[chrisglein]

Related (potentially duplicate?) issue: https://github.com/microsoft/react-native-windows/issues/6645 This JS API seems to happen too late. The other thread mentions a workaround, but we don't have the details.

[Qurishe]

@NickGerleman can u describe the work around?

[jonthysell]

Keep on backlog for now, don't know if we can fix for Paper but we should do this right in Fabric.