Right to Left in react-native

Mohammad picture Mohammad · Apr 3, 2017 · Viewed 7.2k times · Source

By using this code(in below),The App has been RTL but location of Right & Left changed(So things must be shown in Right are turned to Left).I did it via tutorial.

ReactNative.I18nManager.allowRTL(true);

And another problem is when Mobile's language is LTR, Location of Images & designs turns into another side(for e.g changes from Right to Left) because App has only one LTR language. Is there any way for showing RTL & LTR like each other??

Answer

Mohsen Safari picture Mohsen Safari · Oct 31, 2017

you can use this code :

first :

import { I18nManager } from 'react-native';

second in the App class use this :

constructor(props) {
    super(props);
    I18nManager.forceRTL(true);
}

something like this :

import React, { Component } from 'react';
import { View, I18nManager } from 'react-native';
import { Header } from './src/components/common';
import LoginForm from './src/components/LoginForm';

class App extends Component {

  constructor(props) {
    super(props);
    I18nManager.forceRTL(true);
  }
  render() {
    return (
      <View>
        <Header headerText="Authentication" />
        <LoginForm />
      </View>
    );
  }
}

export default App;