Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Right to Left in react-native

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??

like image 651
Mohammad Avatar asked Apr 03 '17 18:04

Mohammad


People also ask

How do you change direction in React Native?

changeLanguage = lnName => { i18n. changeLanguage(lnName); // change direrction persian -> rtl / english -> ltr };

How do I align items left in React Native?

Flex Direction By default, React Native lays out with LTR layout direction. In this mode start refers to left and end refers to right. LTR (default value) Text and children are laid out from left to right. Margin and padding applied to the start of an element are applied on the left side.

What is the difference between left and right flex in React Native?

When the direction is rtl, end is equivalent to left. This style takes precedence over the left and right styles. In React Native flex does not work the same way that it does in CSS. flex is a number rather than a string, and it works according to the Yoga layout engine.

Does react native support right-to-left (RTL)?

Over 20 countries and numerous people around the world use Right-to-Left (RTL) languages. Thus, making your app support RTL for them is necessary. We're glad to announce that React Native has been improved to support RTL layouts. This is now available in the react-native master branch today, and will be available in the next RC: v0.33.0-rc.

What is relative position in React Native?

position position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always relative to the parent. If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position.

What is aspect ratio in React Native?

Aspect ratio is a non-standard property only available in React Native and not CSS. On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset. On a node with a measure function, aspect ratio works as though the measure function measures the flex basis.


1 Answers

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;
like image 82
Mohsen Safari Avatar answered Nov 09 '22 23:11

Mohsen Safari