RTL localization doesn't work on first load, requires restart

This is a followup issue to the discussion here: https://github.com/expo/expo/issues/1205

The generally accepted recommendation in upstream react-native is to add a few native lines when your app starts (before AppRegistry is called):

Right now the only thing you can do with Expo is Updates.reload (similar to react-native-restart) in order to get the behavior on second load. This isn’t great, so we might need to add a native hook to make RTL-localized builds start correctly on the first load.

In particular, this has been an issue for some users who want to force their app to stay in LTR even when the device system settings are configured as RTL.

Issue Analytics

State:
Created 5 years ago
Reactions:5
Comments:21 (4 by maintainers)

Top GitHub Comments

4reactions

creativemind1commented, Jun 24, 2019

Expo.Updates.reload();

but the issue is this will take effect only on the next load of the app. to solve the issue you can either use

Just like I18nManager.forceRTL(false); works on next load, Updates.reload() too works on the next load of the App and not on the first load. No matter if you give conditions or not…

3reactions

amitneemancommented, Feb 28, 2019

hey, any updates on this issue? I managed to find a work around by running the following code:

const isRTLAndroid = Platform.OS === 'android' && I18nManager.isRTL;
    if (isRTLAndroid) {
      I18nManager.forceRTL(false);
      I18nManager.allowRTL(false);
      Expo.Updates.reload();
    }

the issue with it is that it causes the app to crash and show Expo’s blue screen, prompting the user to manually reload (horrible UX). If the issue is currently not being prioritised/ worked on, did anyone find a better workaround? thanks a lot!

Top Results From Across the Web

RTL localization doesn't work on first load, requires restart

This is a followup issue to the discussion here: https://github.com/expo/expo/issues/1205. The generally accepted recommendation in upstream react-native is ...

I18nManager.forceRTL doesn't applies changes in first app load

First you check current state with I18nManager.isRTL then forceRTL if not and restart with react-native-restart. constructor(props) { //Force ...

A Guide to Flutter Localization | Phrase

In this article, we'll show you how to use Flutter's native localization package to localize your mobile apps for Android and iOS. We...

Right-to-left Styling - RTL Styling 101

To switch a document's language direction, you will need to add the dir ... way that makes it easy to fall back to...

Localization - Expo Documentation

On Android, the user can change locale preferences in Settings without restarting apps. To keep the localization current, you can rerun the getLocales()...