CODEWITHSUNDEEP
androidreact-nativeandroid-studioandroid-layout
Oliver D
Oliver D

Reputation: 2889

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"

Upvotes: 14

Views: 11474

Answers (4)

DotWiz
DotWiz

Reputation: 1

If you're having trouble with RTL TextInput:

inputexample: {
 writingDirection: "rtl"
}

Found this style prop after hours of searching the internet

Upvotes: 0

Ali Radmanesh
Ali Radmanesh

Reputation: 2536

That's because you didn't config the native side in android. Follow these steps:

  1. Open this file:

    android > app > src > main > java > com > PACKAGE_NAME > MainApplication.java

  2. Import I18nUtil package:

    import com.facebook.react.modules.i18nmanager.I18nUtil;

  3. Find onCreate() function and paste this snippet at the end of function:

public void onCreate() {
  ...
  // Force the app not to change on device locale change
  I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
  sharedI18nUtilInstance.allowRTL(getApplicationContext(), false);
}

Now when you change your device locale, the app layout wouldn't change!

Upvotes: 3

mansour lotfi
mansour lotfi

Reputation: 602

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;

Upvotes: 22

Vahid Alimohamadi
Vahid Alimohamadi

Reputation: 5868

A trick is to restart your App using react-native-restart after forceRTL:

import RNRestart from 'react-native-restart';


export default props => {
  useEffect(() => {
    I18nManager.forceRTL(true);
    !I18nManager.isRTL && RNRestart.Restart()
  }, []);
  return <AppContainer />;
};

Upvotes: 0

Related Questions