microsoft / microsoft/react-native-windows

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

Open
#7,070 10 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: RTL enhancement Needs: Dev Design Workstream: Developer Experience
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

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.
    image
     
  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.
    image
     
  3. Reload the JavaScript bundle, and content now appears in RTL layout.
    image
     
  4. App restarted, locale persists, but RTL layout is no longer seen.
    image

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 reported Windows/UWP reproduction: enable i18nManager.allowRTL(true), switch the app locale to an RTL language, restart it, and compare startup with a JavaScript bundle reload. Trace why the content remains LTR after restart while the title bar changes, and consider the issue resolved when RTL content persists across application restarts.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.