Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Force React Native app to be just RTL?

I have an app is written in react native and all things in the app use "Arabic Language and layout"

So I want to force the app to be RTL & Layout too, so I use I18nManager from RN to do it and it's work fine in debugging version "when my mobile language LTR OR RTL it's work perfectly"

/**
 * @format
 */

import {AppRegistry, I18nManager} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

I18nManager.forceRTL(true);

AppRegistry.registerComponent(appName, () => App);

but when I release a apk version for play store when my mobile language RTL "Arabic" the layout and other things works fine, BUT when my mobile language be LTR "English" the layout changes and all of things

SO i want to force my app to be RTL whether the mobile language "Arabic or English"

like image 818
Oliver D Avatar asked Nov 27 '19 13:11

Oliver D


People also ask

How do you force RTL in react-native?

How do I force RTL on Android? Go to Settings and open the Developer Options settings. Under the Drawing settings, make sure to makr the "Force RTL layout direction" option. Now enjoy using the big screen of your Android device with your left hand.

How do you change direction in react-native?

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


1 Answers

go to the file

MainApplication.java in this directory : android/app/src/main/java/com/YOUR_PROJECT_NAME

and add this code

I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.forceRTL(this,true);
sharedI18nUtilInstance.allowRTL(this, true);

to the onCreate method there, also dont forget to import this:

import com.facebook.react.modules.i18nmanager.I18nUtil;
like image 121
mansour lotfi Avatar answered Oct 05 '22 21:10

mansour lotfi