'How to set direction property of a View to RTL in React Native

How to set direction property of a View in react-native ... something like:

<View direction="rtl" />

How to force the direction of the whole app to be Right-To-Left ... regardless of the current Device-Language after making my app RTL Ready

reactjs react-native

Solution 1:^[1]

You can just simply use flex-direction. Please see following code snippet

 <View style={{ flexDirection: language === ARABIC_LANGUAGE ? 'row-reverse' : 'row' }}/>

Solution 2:^[2]

Add '\u{200F}' in front of text to change direction to rtl.

_rtlcheck =  (language, data) => {

            if (rtlLanguages.includes(language)) {
                return '\u{200F}' + data
            }else{
                return data
            }
    };

Solution 3:^[3]

Import this in AppDelegate.m :

#import <React/RCTI18nUtil.h>

Add this library: react-native-restart

And simply use it like this in your component ->

import { I18nManager } from "react-native";
import RNRestart from "react-native-restart";

I18nManager.forceRTL(true);
RNRestart.Restart();

Updating components based on RTL ->

const isRTL = I18nManager.isRTL;

Flip Text : textAlign: "left"

Flip TextInput : textAlign: isRTL ? "right" : "left"

Flip Icon / Image : transform: [{ scaleX: isRTL ? -1 : 1 }]

Solution 4:^[4]

Use below library. it supports RTL for react native and also localization

https://www.npmjs.com/package/react-native-i18n

Hope it will work.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Amila Dulanjana
Solution 2	Anupam Chaplot
Solution 3
Solution 4	Nimesh Bhalani

'How to set direction property of a View to RTL in React Native

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]