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 RT

Answer 1

After a week finally i found a logicly way to solve this issue with using Redux & react-native-restart plugin. I'm also use a nice splash screen to user don't show a restarting progress for this purpose.

So let's dive into code:

Redux action:

export const GET_APP_LAYOUT_DIRECTION = 'GET_APP_LAYOUT_DIRECTION';
export const SET_APP_LAYOUT_DIRECTION = 'SET_APP_LAYOUT_DIRECTION';

export const getAppLayoutDirection = () => ({
  type: GET_APP_LAYOUT_DIRECTION,
});

export const setAppLayoutDirection = direction => ({
  type: SET_APP_LAYOUT_DIRECTION,
  direction
});

Redux Reducer:

import {
    GET_APP_LAYOUT_DIRECTION,
    SET_APP_LAYOUT_DIRECTION,
} from '../actions/app';

const initialState = {
    layout: 'ltr',
};

const reducer = (state = initialState, action) => {
    switch (action.type) {
      case GET_APP_LAYOUT_DIRECTION:
        return {
          ...state,
        };
      case SET_APP_LAYOUT_DIRECTION:
        return {
          ...state,
          layout: action.direction,
        };
      default:
        return state;
    }
};

export default reducer;

Home Screen:

import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import RNRestart from 'react-native-restart'; // Import package from node modules
import { getAppLayoutDirection, setAppLayoutDirection } from '../actions/app';

class Home extends PureComponent {
   constructor(props) {
     super(props);

     this.props.dispatch(getAppLayoutDirection());
     if(this.props.layout === 'ltr'){
       this.props.dispatch(setAppLayoutDirection('rtl'));
       RNRestart.Restart();
     }
  }

  componentDidMount() {
     if(this.props.layout && this.props.layout === 'rtl'){
        SplashScreen.hide();
     }
  }
} 

const mapStateToProps = (state) => {
  const { layout } = state.app;
  return {
    layout
  };
}

export default connect(mapStateToProps)(Home);