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

i18nmanager forcertl is not working
react-native-restart
react-native-rtl
i18nmanager expo
expo rtl
react-native-i18n
i18nmanager import
i18nmanager npm

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;

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

React-native I18nManager.forceRTL doesn't applies , React-native I18nManager.forceRTL doesn't applies changes in first app load # 17867. Closed. MortezaAghili opened this issue on Feb 6, 2018 � 10 comments. React-native I18nManager.forceRTL doesn't applies changes in first app load #17867. Closed MortezaAghili opened this issue Feb 6, 2018 · 10 comments Closed React

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

I18nManager.forceRTL doesn't apply changes on react , forceRTL doesn't apply changes on react-native components without i force RTL using I18nManager but the app needs to be reloaded to� call I18nManager.forceRTL method on the onValueChange param of the Switch component; call setLanguage method to set RTL language (arabic, hebrew …) Expected Behavior. Render the screen with the chosen RTL language and alignement. Actual Behavior. Render the screen with chosen language but screen components doesn’t change alignement from right to left.

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 != true){
         I18nManager.forceRTL(true);
         RNRestart.Restart();
      }
   }

I18nManager.forceRTL doesn't applies changes in first - html, First you check current state with I18nManager.isRTL then forceRTL if not and restart with react-native-restart. constructor(props) { //Force RTL if(I18nManager. I18nManager.forceRTL(true) But unfortunately, it doesn’t work properly with many libraries. So, if you’re building a library, always test that it works properly with react-native link. It

Make sure that on iOS, next to having added all relevant RTL locales to your Xcode project (e.g. Arabic). You should also make sure that your .ipa contains .lproj folders for each locale. Otherwise iOS doesn't pick up on the supported languages.

This is a common issue in React Native projects where you don't typically write a lot of Swift/Obj-C code & most of the translations happen in JavaScript (apart maybe from some stuff in you Info.plist).

I18nManager.forceRTL doesn't applies changes , forceRTL doesn't applies changes in first app load. i18nmanager expo react- native-restart i18nmanager npm what is i18nmanager i18nmanager forcertl is not � 10 I18nManager.forceRTL doesn't applies changes in first app load 5 Styled component with access to React component state? View more network posts →

React-native I18nManager.forceRTL doesn't applies , PLEASE DON'T DELETE THIS TEMPLATE UNTIL YOU HAVE READ THE FIRST SECTION. -->. Is this a bug report? Probably! <!-- If you answered "Yes": This is a summary of the talk I gave at App.js on 4th April 2019. You can watch the full talk in the video link below. You can find the slides here. I am a core contributor to React Navigation and React Native Paper, as well as the author of libraries such as React Native Tab View.

I18nManager.forceRTL doesn't apply changes on react , create a screen with a Switch component to change displaying react-native components from LTR to RTL; call I18nManager.forceRTL method� @matheus3301 In the meantime, you can work around this by using the Jetifier. If your RN project is configured to use AndroidX, but some of your deps are not (like react-native-gesture-handler) follow these steps:

React-native I18nManager.forceRTL doesn't applies , Is this a bug report? Probably! Environment. Environment: OS: Linux 4.4. Node: 7.10.1. Yarn: 1.0.1 npm: 4.2.0. Watchman: 4.7.0. Xcode: N/A Moreover, developing RTL support app with react-native requires hundling text alignment, animations, images and icons orientation that have a directional meaning because react-native library doesn't handle it out of the box yet. Making mobile apps RTL ready using react-native and Redux.

Comments
  • Seems to be a know bug: github.com/facebook/react-native/issues/11475 Does putting the rtl tag into your html doc not work?
  • I want to force RTL in ios I add [[RCTI18nUtil sharedInstance] allowRTL:YES]; in AppDelegate.m but it does not work, any tips?