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

Question

I have an app that created by awesome React-native and my layout designed to be in RTL mode. I've set up an option for forcing the layout to be RTL but my option doesn't works in first app load after installing. This feature applies in second run.

I wrote this option in our index.js:

import React, { Component } from 'react';
import { I18nManager } from 'react-native';
import { Provider } from 'react-redux';

I18nManager.forceRTL(true);

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <MainStack />
        </PersistGate>
      </Provider>
    );
  }
}

export default App;

Answer 1

I had the same problem and solved it by invoking forceRTL in MainApplication.java in the onCreate method.

...
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);
  }
...

On IOS add in the AppDelegate.m

...
NSURL *jsCodeLocation; // this probably already exists!
[[RCTI18nUtil sharedInstance] allowRTL:YES];
[[RCTI18nUtil sharedInstance] forceRTL:YES];
...

Source

Answer 2

I went through the same issue this helped me. This is abit modified answer without the need to use redux.

First you check current state with I18nManager.isRTL then forceRTL if not and restart with react-native-restart.

   constructor(props) {          
      //Force RTL
      if(!I18nManager.isRTL){
         I18nManager.forceRTL(true);
         RNRestart.Restart();
      }
   }