CODEWITHSUNDEEP
reactjsreact-native
Hend El-Sahli
Hend El-Sahli

Reputation: 6752

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" />

OR

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

Upvotes: 4

Views: 10703

Answers (5)

Dhruv Parmar
Dhruv Parmar

Reputation: 45

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 }]

Upvotes: 1

Anupam Chaplot
Anupam Chaplot

Reputation: 1316

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

Upvotes: 2

Hend El-Sahli
Hend El-Sahli

Reputation: 6752

I solved this issue by calling forceRTL in MainApplication.java like:

MainApplication.java 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);
  }

AndroidManifest.xml

<Application
...
android:supportsRtl="true"
...
/>

cause calling forceRTL in App.js does require the app to be restarted to work.

I18nManager.forceRTL(true); // Work on second-load of the app

Now when I set flexDirection: 'row' it will be right-to-left

Upvotes: 6

Amila Dulanjana
Amila Dulanjana

Reputation: 1914

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

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

Upvotes: 4

Nimesh Bhalani
Nimesh Bhalani

Reputation: 165

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

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

Hope it will work.

Upvotes: -1

Related Questions