CODEWITHSUNDEEP
androidreact-nativeexporight-to-left
atlanteh
atlanteh

Reputation: 5835

RTL is forced in RTL devices

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?

Upvotes: 37

Views: 9991

Answers (5)

Ahmed Imam
Ahmed Imam

Reputation: 1358

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

   ~ ~ ~

}

Upvotes: 9

Muhammad Omran
Muhammad Omran

Reputation: 4615

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',

Upvotes: 5

Muhammad Usman
Muhammad Usman

Reputation: 1258

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

Upvotes: 3

atlanteh
atlanteh

Reputation: 5835

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

Upvotes: 58

masoud vali
masoud vali

Reputation: 1536

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

Upvotes: 8

Related Questions