search

microsoft / react-native-windows

A framework for building native Windows apps with React.
https://microsoft.github.io/react-native-windows/
Other
16.24k stars 1.14k forks source link

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

Open flashkicker opened 3 years ago

flashkicker commented 3 years ago

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.  

  3. Set i18nManager.allowRTL(true)
  4. 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:

  5. App loads normally with default locale of en-US. image  
  6. 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. image  
  7. Reload the JavaScript bundle, and content now appears in RTL layout. image  
  8. App restarted, locale persists, but RTL layout is no longer seen. image
NickGerleman commented 3 years ago

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 commented 3 years ago

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

chrisglein commented 3 years ago

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 commented 3 years ago

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

mdbaniani commented 3 years ago

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

Qurishe commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

@NickGerleman can u describe the work around?

jonthysell commented 1 year ago

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