Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

0.59.3 Text component on Android getting other side on textAlign #24267

Closed
tamirrab opened this issue Apr 2, 2019 · 28 comments
Closed

0.59.3 Text component on Android getting other side on textAlign #24267

tamirrab opened this issue Apr 2, 2019 · 28 comments
Labels
Bug Component: Text Platform: Android Android applications. Resolution: Locked This issue was locked by the bot.

Comments

@tamirrab
Copy link

tamirrab commented Apr 2, 2019

🐛 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

@react-native-bot react-native-bot added the Platform: Android Android applications. label Apr 2, 2019
@dulmandakh
Copy link
Contributor

dulmandakh commented Apr 3, 2019

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

@tamirrab
Copy link
Author

tamirrab commented Apr 3, 2019

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

@dulmandakh
Copy link
Contributor

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

@dulmandakh
Copy link
Contributor

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

@tamirrab
Copy link
Author

tamirrab commented Apr 6, 2019

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

@tamirrab
Copy link
Author

tamirrab commented Apr 6, 2019

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

@tamirrab
Copy link
Author

tamirrab commented Apr 6, 2019

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

Screenshot_1554552905

@weinbergdavid
Copy link

weinbergdavid commented Apr 7, 2019

I have the same problem.

@yogevlahyani
Copy link

+1

@adirzoari
Copy link

same issue

@tamirrab
Copy link
Author

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

@Shabnam-Veranloo
Copy link

same issue in 0.59.4

@mo-ah-dawood
Copy link

i have the same issue

@nsantacruz
Copy link

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

@tamirrab
Copy link
Author

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

@dulmandakh
Copy link
Contributor

dulmandakh commented Apr 17, 2019 via email

@tamirrab
Copy link
Author

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

@dulmandakh
Copy link
Contributor

@hramos @cpojer could you please revert b3c7496. I tried to fix the issue but couldn't.

@tamirrab
Copy link
Author

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

@dulmandakh
Copy link
Contributor

dulmandakh commented Apr 20, 2019 via email

@tamirrab
Copy link
Author

Thank you 😀

@hussainahmad
Copy link

hussainahmad commented Apr 24, 2019

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

@cpojer
Copy link
Contributor

cpojer commented Apr 24, 2019

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.

@tamirrab
Copy link
Author

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

@dulmandakh
Copy link
Contributor

dulmandakh commented Apr 24, 2019

@grabbou could you please cherry pick a commit for #24580 once lands and release 0.59.x update. I'll let you know about it. It's my bad, so sorry.

@dulmandakh
Copy link
Contributor

dulmandakh commented Apr 30, 2019 via email

@vahidd
Copy link

vahidd commented May 3, 2019

Any update?

@alihaddadkar
Copy link

same issue in 0.59.5

grabbou pushed a commit that referenced this issue May 6, 2019
Summary:
This reverts commit b3c7496.

Fixes #24267

[Android] [Fixed] - Invalid text alignment for RTL fonts.
Pull Request resolved: #24580

Differential Revision: D15061667

Pulled By: cpojer

fbshipit-source-id: 6d02c9e938f1f8630ba691f57bdf79fd57db3bb2
@facebook facebook locked as resolved and limited conversation to collaborators Apr 24, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Apr 24, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Component: Text Platform: Android Android applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

Successfully merging a pull request may close this issue.