RTL bug with Text component #10812

alizahid · 2016-11-08T12:58:55Z

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

The text was updated successfully, but these errors were encountered:

grmmph · 2016-11-20T17:03:42Z

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

grmmph · 2016-11-20T17:56:39Z

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

#11035

alizahid · 2016-11-21T06:03:34Z

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

grmmph · 2016-11-22T19:14:07Z

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
#10812 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AE6GditwPeqRtgWaDvd2OZERJUi4bvB4ks5rATRfgaJpZM4KsZV2
.

alizahid · 2016-11-23T10:17:46Z

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

grmmph · 2016-11-23T16:04:04Z

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

grmmph · 2016-11-23T16:04:16Z

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

grmmph · 2016-12-21T16:35:50Z

@alizahid did you managed to figure this out?

alizahid · 2016-12-21T23:48:10Z

@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 · 2016-12-22T07:51:27Z

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

ghost · 2017-02-19T14:36:57Z

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 · 2017-03-07T13:37:23Z

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 · 2017-03-07T13:42:52Z

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

philjoseph · 2017-03-07T13:48:47Z

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 · 2017-03-07T13:50:43Z

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

philjoseph · 2017-03-07T15:34:33Z

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

moerabaya · 2017-03-26T12:27:20Z

Is this still on?

philjoseph · 2017-03-26T13:42:29Z

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

moerabaya · 2017-03-26T13:52:16Z

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

alizahid · 2017-03-29T16:11:08Z

@philjoseph @moerabaya Does this help?

moerabaya · 2017-03-30T12:00:35Z

@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 · 2017-03-30T15:26:24Z

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

kfir91 · 2017-04-18T07:15:41Z

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

bilalsyed001 · 2017-05-03T09:41:20Z

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 · 2017-07-20T22:34:12Z

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 · 2017-08-05T00:39:14Z

Hello guys ,

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

Thanks

jamsch · 2017-11-30T07:37:24Z

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:

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.
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 · 2017-12-12T08:08:18Z

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

galkahana · 2017-12-25T17:08:05Z

@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 · 2018-01-15T02:39:52Z

Setting textAlign: 'left' works for me 😮

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

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

0xori · 2018-03-11T19:02:15Z

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 · 2018-03-17T02:14:07Z

still facing the same issue
any way,

I converted the text to HTML and used WebView with https://github.com/iou90/react-native-autoheight-webview and 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 · 2018-03-17T03:19:08Z

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

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

Komeyl94 · 2018-05-06T11:05:15Z

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

what am I doing wrong?

pashute · 2018-07-24T01:06:35Z

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 · 2019-03-19T15:27:27Z

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 😊

aliakbarazizi · 2019-04-14T10:12:11Z

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 · 2019-04-24T09:36:36Z

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 · 2019-05-14T04:07:37Z

@AE0011 did you find a solution?

AE0011 · 2019-05-14T06:37:30Z

@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 · 2019-06-07T14:49:11Z

Seems to be fixed in react-native 0.59.9

muhammadsr · 2019-07-08T21:41:34Z

@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 · 2019-08-12T12:12:04Z

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 · 2019-10-21T15:15:58Z

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?

aliakbarazizi · 2019-10-21T22:49:56Z

@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 · 2019-10-27T15:17:35Z

import { I18nManager } from 'react-native';
I18nManager.forceRTL(true);

philjoseph mentioned this issue Mar 7, 2017

text Align :'right' doesn't work for placeholder when multiline is true #7378

Closed

shergin self-assigned this Mar 30, 2017

hramos added the Icebox label Jul 20, 2017

hramos closed this as completed Jul 20, 2017

shergin added the Platform: iOS iOS applications. label Oct 20, 2017

shergin self-assigned this Dec 28, 2017

hramos removed the Icebox label Mar 8, 2018

react-native-bot added the Bug Report label Jan 26, 2019

hramos removed the Bug Report label Feb 6, 2019

cpojer mentioned this issue Mar 19, 2019

RN Issue Triage Group 4 #24031

Closed

michalchudziak closed this as completed Mar 19, 2019

react-native-bot added the Bug label May 4, 2019

facebook locked as resolved and limited conversation to collaborators Mar 20, 2020

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Mar 20, 2020

RTL bug with Text component #10812

RTL bug with Text component #10812

Comments

alizahid commented Nov 8, 2016 • edited Loading

Description

Reproduction

Additional Information

grmmph commented Nov 20, 2016

grmmph commented Nov 20, 2016

alizahid commented Nov 21, 2016

grmmph commented Nov 22, 2016

alizahid commented Nov 23, 2016

grmmph commented Nov 23, 2016

grmmph commented Nov 23, 2016

grmmph commented Dec 21, 2016

alizahid commented Dec 21, 2016

grmmph commented Dec 22, 2016

ghost commented Feb 19, 2017

philjoseph commented Mar 7, 2017

grmmph commented Mar 7, 2017

philjoseph commented Mar 7, 2017

grmmph commented Mar 7, 2017

philjoseph commented Mar 7, 2017

moerabaya commented Mar 26, 2017

philjoseph commented Mar 26, 2017 • edited Loading

moerabaya commented Mar 26, 2017

alizahid commented Mar 29, 2017

moerabaya commented Mar 30, 2017 • edited Loading

alizahid commented Mar 30, 2017

kfir91 commented Apr 18, 2017

bilalsyed001 commented May 3, 2017

hramos commented Jul 20, 2017 • edited Loading

ali-sao commented Aug 5, 2017

jamsch commented Nov 30, 2017 • edited Loading

mhemrg commented Dec 12, 2017

galkahana commented Dec 25, 2017

gentlee commented Jan 15, 2018 • edited Loading

0xori commented Mar 11, 2018 • edited Loading

mtx62 commented Mar 17, 2018 • edited Loading

jamsch commented Mar 17, 2018 • edited Loading

Komeyl94 commented May 6, 2018

pashute commented Jul 24, 2018

michalchudziak commented Mar 19, 2019

aliakbarazizi commented Apr 14, 2019 • edited Loading

AE0011 commented Apr 24, 2019 • edited Loading

mg4u commented May 14, 2019

AE0011 commented May 14, 2019

calintamas commented Jun 7, 2019

muhammadsr commented Jul 8, 2019

us-22 commented Aug 12, 2019

ds8k commented Oct 21, 2019 • edited Loading

aliakbarazizi commented Oct 21, 2019 • edited Loading

doctor-mosbat commented Oct 27, 2019 • edited Loading

alizahid commented Nov 8, 2016 •

edited

Loading

philjoseph commented Mar 26, 2017 •

edited

Loading

moerabaya commented Mar 30, 2017 •

edited

Loading

hramos commented Jul 20, 2017 •

edited

Loading

jamsch commented Nov 30, 2017 •

edited

Loading

gentlee commented Jan 15, 2018 •

edited

Loading

0xori commented Mar 11, 2018 •

edited

Loading

mtx62 commented Mar 17, 2018 •

edited

Loading

jamsch commented Mar 17, 2018 •

edited

Loading

aliakbarazizi commented Apr 14, 2019 •

edited

Loading

AE0011 commented Apr 24, 2019 •

edited

Loading

ds8k commented Oct 21, 2019 •

edited

Loading

aliakbarazizi commented Oct 21, 2019 •

edited

Loading

doctor-mosbat commented Oct 27, 2019 •

edited

Loading