I18nManager.isRTL incorrect

[scarlac]

Description

I18nManager exposes a constant isRTL which is set incorrectly on iOS due to using the value from [NSParagraphStyle defaultWritingDirectionForLanguage:nil] (RCTI18nUtil.m), which never returns NSWritingDirectionRightToLeft.

This is argubly a bug in iOS, since the official documentation states that nil uses the user preferences, however those will not change with the chosen system language, nor with the keyboard language chosen. From my testing, there is nothing a user can do to "fix" this behavior, so isRTL will always be false for Arabic and Hebrew.

Impact

All React Native apps since 2018 with users using Hebrew or Arabic (RTL languages).

Origin

Bug originates from this commit that does not explain why it was changed, just that it was:
3eee96a

Steps to reproduce

Important: App must never have called I18nManager.forceRTL(...) or .allowRTL(...) before as this modifies the .isRTL value. App must be installed from scratch to see default behavior.

1. Example setup:

   $ npx create-expo-app@latest --template bare-minimum rtl-test
   $ cd rtl-test
   

2. Then set iOS language to Hebrew or Arabic

   $ npm run ios
   

3. Then launch application

React Native Version

0.77.0

Affected Platforms

Runtime - iOS

Output of npx @react-native-community/cli info

info Fetching system and libraries information...
System:
  OS: macOS 15.5
  CPU: (10) arm64 Apple M1 Pro
  Memory: 296.08 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.20.7
    path: ~/.nvm/versions/node/v18.20.7/bin/node
  Yarn:
    version: 1.22.17
    path: ~/Developer/<removed>/node_modules/.bin/yarn
  npm:
    version: 8.19.3
    path: /opt/homebrew/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/<removed>/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.4
      - iOS 18.4
      - macOS 15.4
      - tvOS 18.4
      - visionOS 2.4
      - watchOS 11.4
  Android SDK:
    Android NDK: 22.1.7171670
IDEs:
  Android Studio: 2024.2 AI-242.23726.103.2422.13016713
  Xcode:
    version: 16.3/16E140
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 2.7.4
    path: /Users/<removed>/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.77.0
    wanted: 0.77.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: false
  newArchEnabled: false
iOS:
  hermesEnabled: false
  newArchEnabled: false

Stacktrace or Logs

No logs needed

MANDATORY Reproducer

https://github.com/scarlac/rtl-test

Screenshots and Videos

Notice that the statusbar is right-to-left, but the app displays "RTL: No":

[scarlac]

Closing. There should be a comment for the iOS code saying:

// Intersect Xcode "Localization" languages with the system languages and checks if the result is using RTL
// For RTL support, app must add an RTL lang to .pbxproj's knownRegions = ( ... )
// and user must have chosen an RTL language

In other words, both RN and Apple docs have undocumented behavior here:
For Apple: NSParagraphStyle defaultWritingDirectionForLanguage:nil does not document the intersection behavior
For RN: I18nManager.isRTL deliberately returns false if you don't add the language in your xcode project. I18nManager has no official doc page, so engineers are left to rediscover this fact and the Android equivalent, which seems to have led to numerous people resorting to .forceRTL(true) in tickets.

[a-eid]

@scarlac could you clarity how to add languages to .pbxproj's knownRegions ? and if possible how would it work with expo CNG ?

[scarlac]

@a-eid Sure. There is a separate PR to add docs for i18nManager that's open:
Code comment PR: #51661
New docs page: react/react-native-website#4626 (dummy preview link)

I hesitated to add specific instructions because Xcode often changes without warning between versions.
But here's what you need to do in Xcode:

Select your project in the nav sidebar. Then select your project again. Then click the "+" under "Localizations"

You then pick Hebrew or Arabic, or another RTL language:

That'll equate to this section getting updated in the project.pbxproj file:

Note that once you've made this change, you MUST clean the build cache. If you do not clean it, in Xcode 16.2, .isRTL will still return the wrong value. I only noticed this when removing a language but it's possible you also need it at addition of a language.

[a-eid]

@scarlac in expo you just need to utilize the locales property in app.json.

FYI: there is still an issue with isRTL reporting the wrong value after bundle reload in the new arch on IOS, it's not alway reproducible. but it's there.

[ahmsaeed-del]

Still happen with me as well