2

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

Hend El-Sahli
  • 6,268
  • 2
  • 25
  • 42
  • https://stackoverflow.com/questions/43737059/right-to-left-for-specific-text-in-react-native-rtl maybe this will help? – Gaurav Roy Dec 13 '19 at 09:55

5 Answers5

6

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

Hend El-Sahli
  • 6,268
  • 2
  • 25
  • 42
3

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

 <View style={{ flexDirection: language === ARABIC_LANGUAGE ? 'row-reverse' : 'row' }}/>
Amila Dulanjana
  • 1,884
  • 1
  • 16
  • 33
  • if the device-lang is RTL (Arabic for example) ... `row-reverse` for the app will be left-to-right ... we don't want that ... but thank u for your help anyway :) – Hend El-Sahli Dec 13 '19 at 10:38
  • Have u tested it ? I have it in front of my eyes :D in both emulator and physical-device ... and that's exactly what the docs states here https://facebook.github.io/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps – Hend El-Sahli Dec 13 '19 at 11:14
  • please see this. https://codesandbox.io/s/pensive-allen-7f0nh?fontsize=14 – Amila Dulanjana Dec 13 '19 at 11:29
  • thank u for trying to help ... but I'm saying that ... if the **Device language is set to Arabic through Settings** ... `row` will be right-to-left ... and it makes alot of sense :) – Hend El-Sahli Dec 13 '19 at 11:43
  • Be careful!, Properties like `marginStart` won't behave as expected – Hamza Waleed May 23 '21 at 14:09
1

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
            }
    };
Anupam Chaplot
  • 1,134
  • 1
  • 9
  • 22
0

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 }]
Dhruv Parmar
  • 35
  • 1
  • 6
-1

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

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

Hope it will work.

Nimesh Bhalani
  • 147
  • 9
  • My app doesn't want localization-support ... it should be RTL all the way .. but thank u for taking the time to help :) – Hend El-Sahli Dec 13 '19 at 10:38