RTL is forced in android RTL devices

[atlanteh]

Issue Description

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.

I opened an issue in Stackoverflow Here, and then managed to solve this problem by forcing LTR in android code like so:

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

@Override
public void onCreate() {
    super.onCreate();

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

But this is just a hack. Still, anyone who has react-native@0.34.0 will have his entire app flipped when used in RTL android devices even without actively allowing RTL.

Steps to Reproduce / Code Snippets

import React from 'react';
import { View, Text } from 'react-native';

export default class App extends React.Component {
    render() {
        return (
            <View style={{flex: 1, alignSelf: 'stretch'}}>
                <Text style={{alignSelf: 'flex-start'}}>Left</Text>
                <Text style={{alignSelf: 'flex-end'}}>Right</Text>
            </View>
        );
    }
}

Expected Results

Left text to be on the left side & Right text to be on the right side.

Actual Results

Left text is on the right side & Right text is on the left side.

Additional Information

• React Native version: 0.34.0
• Platform(s) (iOS, Android, or both?): android
• Operating System (macOS, Linux, or Windows?): Windows

[MoLow]

this happens to me to.
right and left in my code are reversed on the screen.

[kfiroo]

@MoLow @atlanteh I had the same issue, ended up calling the following when my app starts
ReactNative.I18nManager.allowRTL(false);

[DeDuckProject]

Isn't there a way to do this though the js code to work on both android and ios?
I'm not even sure if its a bug or a feature

[DeDuckProject]

@kfiroo It can't seem to resolve I18nManager
I'm on RN=0.33
Do you have an idea?
תודה

[kfiroo]

@DeDuckProject Sorry for the confusion, this is from my JS code
Something like this

const ReactNative = require('react-native');
try {
    ReactNative.I18nManager.allowRTL(false);
} catch (e) {
    console.log(e);
}

[DeDuckProject]

@kfiroo thanks, works like a charm

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[p30arena]

@kfiroo its still not working on some devices, I used this instead:

https://stackoverflow.com/questions/39815309/rtl-is-forced-in-rtl-devices

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

[dekelev]

All the solutions here do force LTR view, but do not resolve deep issues within components that lack proper support for RTL, such as the react-native Slider, which still doesn't render correctly.

The solution for Android is to add <item name="android:layoutDirection">ltr</item> in Android styles.xml file.

https://stackoverflow.com/questions/39817683/forcing-the-app-to-work-as-ltr

[hoorsa]

thanks @dekelev

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

did not forced LTR for react-native-navigation but <item name="android:layoutDirection">ltr</item> did.

[jamsch]

Went through the solutions and RTL is still forced on Text that starts with an Arabic character.

What worked for me (as a rather hacky solution) was adding in the Unicode character "LEFT-TO-RIGHT ISOLATE" at the start.

    <Text>{'\u2066'} أهْلًا وَسَهْلاً Ahlan wa Sahlan!</Text>

My attempts otherwise have been the following:

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

<!-- styles.xml -->
<resources>
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
       <item name="android:gravity">left</item>
       <item name="android:layoutDirection">ltr</item>
       <item name="android:textDirection">ltr</item>  
       <item name="android:textAlignment">textStart</item>
     </style>
</resources>

<!-- AndroidManifest.xml -->
<application
    android:supportsRtl="false"
    ....

As well as the example above to force I18n to go LTR on Java.