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??
changeLanguage = lnName => { i18n. changeLanguage(lnName); // change direrction persian -> rtl / english -> ltr };
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.
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.
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.
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.
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.
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With