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

Solution 1:

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

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

publicclassMainApplicationextendsApplicationimplementsReactApplication {
    @OverridepublicvoidonCreate() {
        super.onCreate();

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

Solution 2:

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

Solution 3:

if you are using Expo

import { I18nManager} from'react-native';
I18nManager.allowRTL(false);

exportdefaultclass <className> extendsComponent {



}

Solution 4:

@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

publicclassMainApplicationextendsApplicationimplementsReactApplication {
    @OverridepublicvoidonCreate() {
        super.onCreate();

        // FORCE LTRI18nUtilsharedI18nUtilInstance= 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>

Solution 5:

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

import { I18nManager } from"react-native";

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