I18nManager.forceRTL does not apply changes to loading the first application

Question

I have an application built using awesome React-native , and my layout is developed in RTL mode. I set the option to format RTL, but my option does not work the first time the application loads after installation. This function is applied in the 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

After a week, I found a logical way to solve this problem using the Redux plugin and react-native-restart . I also use a good screensaver for the user, not showing restart progress for this.

So let me dive into the 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); 

Answer 2

I went through the same problem, it helped me. This is an abit modified answer without having to use redundant.

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

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

Answer 3

I had the same problem and solved it by calling 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 to AppDelegate.m

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

A source