How to set direction property of a View to RTL in React Native

Question

How to set direction property of a View in react-native ... something like:

<View direction="rtl" />

OR

How to force the direction of the whole app to be Right-To-Left ... regardless of the current Device-Language after making my app RTL Ready

Answer 1

I solved this issue by calling forceRTL in MainApplication.java like:

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

 @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);

    I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
    sharedI18nUtilInstance.forceRTL(this,true);
    sharedI18nUtilInstance.allowRTL(this, true);
  }

AndroidManifest.xml

<Application
...
android:supportsRtl="true"
...
/>

cause calling forceRTL in App.js does require the app to be restarted to work.

I18nManager.forceRTL(true); // Work on second-load of the app

Now when I set flexDirection: 'row' it will be right-to-left