search

microsoft / react-native-windows

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

allowRTL (and forceRTL) set in index.tsx file won't get set early enough to be used #6645

Open CarpeDiEmma opened 3 years ago

CarpeDiEmma commented 3 years ago

Environment

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

  1. npx react-native --version: 4.13.0
  2. npx react-native info: System: OS: Windows 10 10.0.19042 CPU: (20) x64 Intel(R) Xeon(R) W-2255 CPU @ 3.70GHz Memory: 41.07 GB / 63.69 GB Binaries: Node: 10.15.0 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: AllowDevelopmentWithoutDevLicense: Enabled AllowAllTrustedApps: Enabled Versions: 10.0.17763.0, 10.0.18362.0 IDEs: Android Studio: Not Found Visual Studio: 15.9.28307.1300 (Visual Studio Enterprise 2017), 16.8.30711.63 (Visual Studio Enterprise 2019) Languages: Java: Not Found Python: 2.7.15 - C:\Users\emrou.windows-build-tools\python27\python.EXE npmPackages: @react-native-community/cli: 4.13.0 => 4.13.0 react: 16.13.1 => 16.13.1 react-native: 0.63.3 => 0.63.3 react-native-windows: 0.63.6 => 0.63.6 npmGlobalPackages: react-native: Not Found

What device(s) are you targeting? Choose any from Desktop, Xbox, Hololens)

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. Turn on RTL language for RNW XB GP app
  2. App does the RTL formatting

However, with NativeUIManager.addRootView, when querying isRTL, it will return false due to allowRTL being set to false. Trying to do I18nManager.allowRTL(true) in our earliest tsx file will set the property to true, but past the initial root view rendering, which will then mean the app will be still in LTR configuration.

Expected Results

If I set allowRTL in the index.tsx/bootstrapping file of our RNW code the native I18nManager would see and re-render as needed OR have a way for us to set allowRTL to be true in some native code or config file.

If I just hardcode I18nManager.isRTL to return true, the app will appropriately be configured in the RTL format.

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

N/A or engage offline

asklar commented 3 years ago

from your description it sounds like I18nManager.allowRTL should not only set the property but do a one-time traversal of existing elements to reset their RTL-ness

CarpeDiEmma commented 3 years ago

I think that would be an ideal scenario, but I could see that being costly. A way to somehow set the allowRTL to true before any of the native root creation or rendering (which seems to need to be done in native or a config file) might be a good workaround or easy fix. It's mainly that the system acknowledges that it's rtl but we never get to pass that along because it gets blocked by the allowRTL property.

chrisglein commented 3 years ago

@NickGerleman I hear you have come up with a workaround with this. Can you describe that here so that anyone else who hits it can be unblocked until we make the proper fix?