React-native: 0.59.3 Text component on Android getting other side on textAlign

Created on 2 Apr 2019  ·  28Comments  ·  Source: facebook/react-native

🐛 Bug Report

On Text component:
on Android only, textAlign: "right" doing "left" instead of right.
and "left" doing "right" instead of left.
only on 0.59.3 and only on Android

To Reproduce

<Text style={{textAlign: "right"}}>{"test"}<Text>

Expected Behavior

The text will be on the right side like iOS and like android 0.59.2

Code Example

<Text style={{textAlign: "right"}}>{"test"}<Text>

Environment

React Native Environment Info:
System:
OS: macOS 10.14.5
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Memory: 383.50 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.11.4 - ~/.nvm/versions/node/v8.11.4/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v8.11.4/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
Android SDK:
API Levels: 23, 25, 26, 27, 28
Build Tools: 27.0.3, 28.0.2, 28.0.3
System Images: android-24 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-27 | Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64
IDEs:
Android Studio: 3.3 AI-182.5107.16.33.5314842
Xcode: 10.2/10E125 - /usr/bin/xcodebuild
npmPackages:
react: ^16.8.6 => 16.8.6
react-native: 0.59.3 => 0.59.3
npmGlobalPackages:
react-native-create-library: 3.1.2
react-native-git-upgrade: 0.2.7

Bug Text Android Locked

Most helpful comment

Sorry it took so long to revert this. We had a long holiday where I'm based in London so I didn't get a chance to look into this yet. The revert is landing now.

This should have not made it into the stable branch and we'll improve our release process so this won't happen again.

All 28 comments

I couldn't reproduce your issue using code below, and see the screenshot. It's a new project using React Native 0.59.3.

<Text style={{textAlign: "right", backgroundColor: 'red', width: 200}}>{"test"}</Text>

Screenshot_1554263946

So the problem is only on rtf languages:
<Text style={{textAlign: "right", backgroundColor: 'red', width: 200}}>{"ניסיון"}</Text>
<Text style={{textAlign: "right", backgroundColor: 'yellow', width: 200}}>{"Test"}</Text>

On iOS 0.59.3 and Android 0.59.2 the word is on the right and Android 0.59.3 is on the left

Screenshot_1554271295

Thank you for reproducible demo, I can confirm the issue.

@tamirrab what might be a correct solution for this? I made a change per Google recommendation and it changed behavior.

I thing give to the user decide if he want textAlign: “right” or “end”
“left” or “start”
I think this is the best solution for RTL Languages
Right now I can’t upgrade react-native because all my app is depend on this and I know allot of apps that use this and can’t upgrade react-native

The main problem is that iOS and Android not act the same on Hebrew / Arabic text

It's also effect on TextInput:
when the placeHolder is Hebrew / Arabic: the selector not on the right side:

Screenshot_1554552905

I have the same problem.

+1

same issue

@dulmandakh
Is there an update on this topic?
We can't upgrade from 0.59.2 to latest release because this issue
thank you

same issue in 0.59.4

i have the same issue

@dulmandakh I think that it's important that React Native behave the same way between iOS and Android for text aligning. React Native is meant as a wrapper for Android and iOS and should be unifying APIs as much as possible.

I agree
Also the TextInput is a huge bug because with RTL Languages the selector never start when the placeholder start for Android users.
Please undo the changes with the textAlign and the TextInput for us so we can upgrade versions

Sorry, I'll request to revert the commit.

Please do it on the next release
We can’t release version on Xcode 10.2.1 with react-native 0.59.2, only from 0.59.4 and we can’t upgrade react-native because this bug

@hramos @cpojer could you please revert https://github.com/facebook/react-native/commit/b3c74967ca6b20d7bda84c690ae3a99dfe255843. I tried to fix the issue but couldn't.

Do you know if it can be revert on the next release?

I will ask release managers to cherry pick a revert commit to next stable
release once lands in the master.

Thank you 😀

@dulmandakh @cpojer @hramos @tamirrab could you please open this issue until unless b3c7496 revert or issues fixed, As till now this issue is not fixed.

Sorry it took so long to revert this. We had a long holiday where I'm based in London so I didn't get a chance to look into this yet. The revert is landing now.

This should have not made it into the stable branch and we'll improve our release process so this won't happen again.

Thank you @cpojer
We need it ASAP because we need to release version next week and we can't do it with Xcode 10.2.1 and we need to test it first with the new release of RN

@grabbou could you please cherry pick a commit for https://github.com/facebook/react-native/pull/24580 once lands and release 0.59.x update. I'll let you know about it. It's my bad, so sorry.

I hope that there will release an update very soon, today or tomorrow.

Any update?

same issue in 0.59.5

Was this page helpful?
0 / 5 - 0 ratings

Related issues

lazywei picture lazywei  ·  3Comments

despairblue picture despairblue  ·  3Comments

phongyewtong picture phongyewtong  ·  3Comments

janmonschke picture janmonschke  ·  3Comments

grabbou picture grabbou  ·  3Comments