microsoft / microsoft/react-native-windows

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

Open
#6,645 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: RTL bug Partner: Xbox Workstream: Component Parity
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

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)

  • Target Device(s): Desktop
    Which version of Visual Studio are you using? Specify Visual Studio 2017 or Visual Studio 2019
  • Visual Studio Version: 2019

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the index.tsx bootstrapping path and trace how I18nManager.allowRTL and isRTL interact with NativeUIManager.addRootView during initial rendering. Reproduce with the RTL language setting and verify that a setting made in index.tsx affects the initial native root view, or that the requested native configuration path is available.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
desktop, internationalization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.