react-native: RTL bug with Text component

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

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

#import <React/RCTI18nUtil.h>

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

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

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

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

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

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

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

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.

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

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

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

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.

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

2. I18nManager.forceRTL(true);

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

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

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?

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

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

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.

This issue is till relevant.

Hello guys ,

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

Thanks

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