RTL is forced in RTL devices

Question

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?

score 57 · Accepted Answer · edited Nov 28 '16 at 23:16

57

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

edited Nov 28 '16 at 23:16

grmmph

781
2
8
17

answered Oct 02 '16 at 08:45

atlanteh

5,615
2
33
54

adding to which file? – grmmph Nov 28 '16 at 17:21
1

in MainApplication.java file – atlanteh Nov 28 '16 at 21:35
3

This works great! ... (setting the supportsRtl="false" in the manifest did nothing for me). – Yaron Levi Mar 30 '17 at 10:35
I've written a small gist that helps with this issue at https://medium.com/@nirlevy/rtl-support-in-react-native-even-for-non-rtl-applications-981359ee7c46 – Nir Levy Sep 12 '17 at 05:56
1

Fantastic. Worked great for me. – Hadi Nahavandi Aug 31 '19 at 15:45
the same issue happening in iOS also. @atlanteh do you have any solution for iOS? – Dhevendhiran M Jul 17 '20 at 12:47
what if i using expo?how can i access this file? – Eliav Louski Nov 06 '20 at 19:47
I18nUtil is imported from 'import com.facebook.react.modules.i18nmanager.I18nUtil;' – SAM Sep 30 '21 at 08:43

score 9 · Answer 2 · edited Sep 06 '22 at 18:57

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 = () => {

   ~ ~ ~

}

edited Sep 06 '22 at 18:57

AmerllicA

29,059
15
130
154

answered Oct 15 '18 at 22:13

Ahmed Imam

1,315
2
19
42

2

Adding those two worked for me : `I18nManager.forceRTL(false);` and `I18nManager.allowRTL(false);` – Ahmad Yousef Nov 16 '19 at 14:30

score 8 · Answer 3 · answered Oct 02 '16 at 10:10

8

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

answered Oct 02 '16 at 10:10

masoud vali

1,528
2
18
29

3

yes, this answer and also the one above (allowRTL-false) did the magic. – dod_basim Feb 22 '18 at 08:59
You need to add `android:tools`: ` ... ... ` – S.M_Emamian Dec 02 '18 at 07:03
1

there is not `manifest.xml ` in my project. where i search for that? – PurTahan Jul 28 '20 at 13:30

score 5 · Answer 4 · answered Sep 05 '21 at 16:35

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

score 3 · Answer 5 · answered Jun 16 '20 at 15:29

@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>

RTL is forced in RTL devices

5 Answers5

Linked