Dynamically set RTL / LTR to React-Native

Question

I want to configure a dynamic app app by property. React Native allows me to set the direction according to the device’s default language, but I want to choose the direction according to the locale property that I have on my user data.

So far, I have used this code in my MainApplication.java to force only LTR for all users:

I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(getApplicationContext(), false);

Now I’m looking for a way to switch to a “false” code, to a boolean value that changes according to my user locale. I don’t know how to achieve this ...

Additional Information:

• Android device
• RN Version: 0.40.0

Answer 1

you can use I18nManagerto force the language direction

constructor() {
    super();
    //set user language b default english
    this.state = {
        lang: 'en'
    }
}


componentWillMount() {
          //get user lang form AsyncStorage 
    AsyncStorage.getItem('lang').then((value) => {
         //now you should forceRTL by Language and set Language in your states
        if ((value === 'ar' || value === 'fa' )) {
            I18nManager.forceRTL(true);
        } else {
            I18nManager.forceRTL(false);
        }
        return this.setState({
            lang: value 
        });
    }).done();
}