CODEWITHSUNDEEP
androidreact-native
Daniel Diga
Daniel Diga

Reputation: 41

How to force RTL layout on React Native app? (not working on first load)

I want my app to be RTL Only. I'm using an android device and I'm not testing on iphone for now.

No Expo

couldn't find a good solution online. I tried

import {I18nManager} from 'react-native';
I18nManager.forceRTL(true);

in my index.js before AppRegistry and it works but only from second load. also tried

import com.facebook.react.modules.i18nmanager.I18nUtil;

public void onCreate() {
super.onCreate();
I18nUtil.getInstance().forceRTL(this,true);
I18nUtil.getInstance().allowRTL(this, true);

in MainApplication.java. same thing - LTR on first load.

P.S. I don't want to RNRestart.

Upvotes: 4

Views: 871

Answers (1)

Erfan Poursina
Erfan Poursina

Reputation: 166

You just have to change your code in MainApplication.java to

import com.facebook.react.modules.i18nmanager.I18nUtil;


public void onCreate() {
  super.onCreate();

  // other stuff ...

  // FORCE RTL
  I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
  sharedI18nUtilInstance.allowRTL(getApplicationContext(), true);
  sharedI18nUtilInstance.forceRTL(getApplicationContext(), true);
}

And also add android:supportsRtl="true" attribute to application tag in AndroidManifest.xml file.

Upvotes: 1

Related Questions