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:

#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 notifications@github.com 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]

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

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.