React-native: RTL bug with Text component

[alizahid]

Description

When I18nManager.forceRTL(true) to test my RTL app, I came across a bug with the <Text> component.

When the app is LTR, multiline text in Arabic renders from right to left, with the subsequent lines starting from right as well.

However, if the app is RTL, this happens.

I used flexDirection: 'flex-start' on the <Text> to make it start from the correct side. I tried using textAlign: 'right', but had no luck.

Reproduction

https://rnplay.org/apps/GfNikw

Additional Information

• React Native version: 0.36.1
• Platform: iOS
• Operating System: MacOS

[grmmph]

+1
@alizahid did you figure out a way around?

[grmmph]

Okay obviously when you use textAlign: right on an rtl layout, it will flip it around:

https://github.com/facebook/react-native/pull/11035

[alizahid]

@grmmph Not for iOS, it doesn't. Look at the RNPlay link. Android works fine, iOS doesn't.

[grmmph]

Works great on my ios emulator

On Mon, Nov 21, 2016, 08:04 Ali Zahid [email protected] wrote:

@grmmph https://github.com/grmmph Not for iOS, it doesn't. Look at the
RNPlay link. Android works fine, iOS doesn't.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/10812#issuecomment-261851419,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AE6GditwPeqRtgWaDvd2OZERJUi4bvB4ks5rATRfgaJpZM4KsZV2
.

[alizahid]

@grmmph Did you look at the RN Play demo? What's your environment like? RN version? iOS version?

[grmmph]

@alizahid Did you add this line into you AppDelegate.m
[[RCTI18nUtil sharedInstance] allowRTL:YES];

[grmmph]

https://facebook.github.io/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps.html

[grmmph]

@alizahid did you managed to figure this out?

[alizahid]

@grmmph Yes. There's a writingDirection property for Text on iOS. I use it like this:

<Text style={{writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr'}}>مرحبا</Text>

[grmmph]

Cool.
I guess this still an issue, because this ideally should be abstracted in the the core <Text> component.

[ghost]

iOS uses available languages to set text direction, simply add Arabic language using xCode in project configuration, and text will be rendered in correct direction.

[philjoseph]

This is indeed an important issue for all of us implementing RTL localizations.
All the documentation we have is the great blog from Aug 16' from @MengjueW . But this an old article and I would be glad to have a guide in the documentation.

It shall includes @alizahid findings about writingDirection, it shall also clarify (at least for me) if we need to add the native code in AppDelegate.m and in MainActivity.java.

Looking forward to a new piece of documentation regarding RTL, Thanks!

[grmmph]

This issue makes me glad we Jews an Arabs finally found a common enemy!

[philjoseph]

I do not know how to write in arabic but I remember some good words from my grandma that was a arabic speaker (Jewish tunisian origin): Yatik sah'a @alizahid for the findings. I do believe that all RTL language speakers have true values in common.

[grmmph]

Yes. We all get our hands dirty from ink after writing.

[philjoseph]

@alizahid & @grmmph Do you have any idea how to resolve #7378 that seems to be very similar to this one but on TextInput ?

[moerabaya]

Is this still on?

[philjoseph]

We use the workaround suggested by @alizahid that works great for us. I believe this is still on

[moerabaya]

It's not working for some reason, maybe it will work fine in the production?

[alizahid]

@philjoseph @moerabaya Does this help?

[moerabaya]

@alizahid nope, it only works when the device language is arabic and there's another issue in react that the app won't change back to english (LTR) when the device language is changed to arabic!!

Thank you so much.

[alizahid]

@moerabaya Yeah, that's a good one. Only way you can _fix_ that is by using the allowRTL and forceRTL methods from I18nManager.

[kfir91]

@bluetec Hello, How can i add the arabic lang to my xcode project?

[bilalsyed001]

RN41.2: for me it only works when wrapping text with writing direction property.

<Text style={{ writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr' }}> <Text>مرحبا</Text> </Text>

[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.

[ali-sao]

Hello guys ,

I had "Use of undeclared identifier" once I added : [[RCTI18nUtil sharedInstance] allowRTL:YES]; into AppDelegate.m . Any useful suggestions?

Thanks

[shergin]

@alizahid Could you please confirm that the problem still exists?

[alizahid]

@ali-sao You need to import RCTI18nUtil first at the top

#import <React/RCTI18nUtil.h>

[alizahid]

@shergin I'm not working on React Native iOS app right now. Let me confirm soon.

[iddan]

This issue is till relevant.

[coreform]

I see this problem for some Text views with RN 0.48.4 only on iOS. The problem manifests for both wrapped text and unwrapped text (i.e. text which does not fill the entire width of view).

Some other Text views (again all on iOS) had to be coerced into obeying the RTL directive by adding to the containing (parent) View's style: alignItems: "flex-start". While most Text views simply obeyed the RTL directive without any special attention needed.

[jamsch]

On Android, I kind of have the same issue but it's regarding the inconsistencies when Arabic script text is mixed with non-script characters & words.

Here's some of my observations of how it works on Android:

1. If the component starts with a single script character it's aligned right by default. Forcing it to align left and changing it's writing direction still puts the script on the right and there doesn't seem to be any way to change this as far as I'm aware.
2. Parent nodes with no configuration of RTL seem to override child nodes that are configured LTR.

Here's an example:
https://snack.expo.io/rk97V4Tgf

I really just want to get the text content looking like the WebView example. Anyone have suggestions?

[mhemrg]

Just for a quick fix: do not set textAlign: right on <Text /> component. It will work on Android.

[galkahana]

@jamsch note that writingDirection is ignored in Android. i think that your rtl settings are simply being ignored. same for me. i have mixed bidi text, and i know that bidi algos require writing direction to handle conflicting cases. so i reckon as long as this is not supported for Android, there's a limitation there.

[Gentlee]

Setting textAlign: 'left' works for me 😮

import { setCustomText } from 'react-native-global-props';

setCustomText({
    style: { textAlign: 'left' }
});

[0xori]

Any updates on this one?
I'm using react-native 0.50.3 and it's still happening on ios.
tried to

I18nManager.allowRTL(true);
I18nManager.forceRTL(true);

and than reload.
Tried also to set this style: {writingDirection: 'rtl' , textAlign: "right"} to Text component.
And the text is still aligned to left.

any ideas?

[mtx62]

still facing the same issue
any way,

I converted the text to HTML and used WebView with https://github.com/iou90/react-native-autoheight-webviewand problem solved, but still we need a solution!

update!
for some reason textAlign: 'left', works fine!!!!

        <View style={{ flexDirection: 'row', flex: 1 }}>
        <Text style={{  textAlign: 'left'  }} >{ product_details.description }</Text>
        </View>    

[jamsch]

Appending the unicode character code: LEFT-TO-RIGHT-OVERRIDE seems to work on Android.
Would be something like this:

<Text>{`\u202D${text}`}</Text>

[Komeyl94]

@bluetec I've added Arabic to languages but it didn't change anything!
I did this:

what am I doing wrong?

[pashute]

Mine is probably a totally different problem but perhaps related. The app is in English but on a Hebrew Android (J7 or S7) it shows right to left instead of Left to Right regardless of the I18n RTL setting to true or false. Any pointers?

[michalchudziak]

Hello there 👋 this issue seems to have been inactive for the past few weeks. Because of this, it's likely that the issue is not a high priority anymore or it has been solved by OP; for these reasons, we'll close it. But please, if it's actually still an issue with 0.59 please comment below and we can reopen it or please send us a Pull Request with a fix 😊

[aliazizi]

I still have the prolbem in react 0.59.1.

If set align to right, the text goes to left!

Also when I set align to left its work in some case

But when I put a element before text ( for example a icon from fontawsome ) the icon go to left side of text. I try to put icon after text and get the same result

I currenlty put align to left and find no way to put icon in right side of text

here is my code

<Text style={[CommonStyles.normalText, { textAlign: "left", marginRight: 15, marginLeft: 15 }]}><FontAwesome5 name="clock" /> {__.formatDate(date)}</Text>

[AE0011]

I have a weird problem with textAlign attribute
if i set it to right text goes to left and if i set it left it goes to right!!
and it happen only on android 8!! it work normal in android 5 and also ios!

"react": "16.8.3",
"react-native": "0.59.5",

[mg4u]

@AE0011 did you find a solution?

[AE0011]

@mg4u I downgraded react native to version 0.59.2 and problem solved. it seems that it is fixed in new release 0.59.8 but I didn't test it
https://github.com/facebook/react-native/releases

[calintamas]

Seems to be fixed in react-native 0.59.9

[muhammadsr]

@bluetec I've added Arabic to languages but it didn't change anything!
I did this:

what am I doing wrong?

For me, I actually forgot to add the localization on iOS. Once I added it, it worked

[us-22]

Setting textAligh: left works for me too!!. after forceRTL now left is the right and right is the left. very confused.

"react": "16.8.3",
"react-native": "0.59.8",

[ds8k]

I still have the prolbem in react 0.59.1.

If set align to right, the text goes to left!

Also when I set align to left its work in some case

But when I put a element before text ( for example a icon from fontawsome ) the icon go to left side of text. I try to put icon after text and get the same result

I currenlty put align to left and find no way to put icon in right side of text

here is my code

<Text style={[CommonStyles.normalText, { textAlign: "left", marginRight: 15, marginLeft: 15 }]}><FontAwesome5 name="clock" /> {__.formatDate(date)}</Text>

I'm also having this icon problem. @aliazizi were you able to find a solution?

[aliazizi]

@ds8k I'm using flex, here is an example

<View style={CommonStyles.iconContainer}>
                <FontAwesome5Icon
                  name="edit"
                  color={colors.primaryText}
                  solid={true}
                  style={CommonStyles.iconWithPad}
                  size={14}
                />
         <Text style={CommonStyles.textPrimary}>{__("Edit")}</Text>
 </View>

and my style for that

iconContainer: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
  },

iconWithPad: {
    textAlignVertical: "center",
    marginRight: 5,
  },

[doctor-mosbat]

1. import { I18nManager } from 'react-native';

2. I18nManager.forceRTL(true);