36

The new version of React Native has issued support for RTL devices: https://facebook.github.io/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps.html
However, it seems that in RTL android devices the RTL layout is forced and there's no way to change it so now all apps are broken for RTL devices. How can I force my app to use LTR?

5 Answers 5

58

I managed to fix this by adding to MainApplication.java:

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

public class MainApplication extends Application implements ReactApplication {
    @Override
    public void onCreate() {
        super.onCreate();

        // FORCE LTR
        I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
        sharedI18nUtilInstance.allowRTL(getApplicationContext(), false);
        ....
    }
}
8
  • adding to which file?
    – grmmph
    Commented Nov 28, 2016 at 17:21
  • 1
    in MainApplication.java file
    – atlanteh
    Commented Nov 28, 2016 at 21:35
  • 3
    This works great! ... (setting the supportsRtl="false" in the manifest did nothing for me).
    – Yaron Levi
    Commented Mar 30, 2017 at 10:35
  • I've written a small gist that helps with this issue at medium.com/@nirlevy/…
    – Nir Levy
    Commented Sep 12, 2017 at 5:56
  • 1
    Fantastic. Worked great for me. Commented Aug 31, 2019 at 15:45
9

If you are using Expo or bare React Native, put these lines in your App.js/tsx file:

import { I18nManager} from 'react-native';

I18nManager.allowRTL(false);
I18nManager.forceRTL(false);
I18nManager.swapLeftAndRightInRTL(false);

const App = () => {

   ~ ~ ~

}
1
  • 2
    Adding those two worked for me : I18nManager.forceRTL(false); and I18nManager.allowRTL(false); Commented Nov 16, 2019 at 14:30
8

In manifest.xml file add android:supportsRtl="false" to your application tag

3
  • 3
    yes, this answer and also the one above (allowRTL-false) did the magic.
    – dod_basim
    Commented Feb 22, 2018 at 8:59
  • You need to add android:tools: <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.*.*" xmlns:tools="http://schemas.android.com/tools"> ... <application android:supportsRtl="false" tools:replace="android:supportsRtl"> ... Commented Dec 2, 2018 at 7:03
  • 1
    there is not manifest.xml in my project. where i search for that?
    – PurTahan
    Commented Jul 28, 2020 at 13:30
5

simply by adding these lines of code in your project entry point e.g App.tsx

import { I18nManager } from "react-native";

// disable RTL
try {
  I18nManager.allowRTL(false);
  I18nManager.forceRTL(false);
  // the next line is the most effective one
  I18nManager.swapLeftAndRightInRTL(false);
} catch (e) {
  console.log(e);
}

UPDATE

to overcome the current situation for "now", because even though with these settings rtl is still forced!!!.

you have to change every flexDirection: "row" with

flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
3

@atlanteh's answer is right. I am just giving you a detailed answer for those who have the ios background and not much aware of the Android.

first, try once. if 1st one does not work then try 2. If still not work then try both. then it will show expected output.

Answer 1

MainApplication.java

public class MainApplication extends Application implements ReactApplication {
    @Override
    public void onCreate() {
        super.onCreate();

        // FORCE LTR
        I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
        sharedI18nUtilInstance.allowRTL(getApplicationContext(), false);
        ....
    }
}

Answer 2

AndroidManifest.xml

i have add the android:supportsRtl="false" in application tag

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.appname">
    ........
    <application 
      android:supportsRtl="false"
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      android:name="com.facebook.react.devsupport.DevSettingsActivity" />
       ....
    </application>

</manifest>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.