Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

textAlign right and left are reverse for android O+ (api level >=26)

See original GitHub issue

🐛 Bug Report

Attribute textAlign works reverse for android O+ for rtl languages in react native 0.59.5, if it set ‘right’ text would go to left side! however in IOS and lower android device it works properly.

To Reproduce

1- <Text style={{width: '100%', textAlign: 'right'}}>{'سلام'}</Text>
2- <Text style={{width: '100%', textAlign: 'left'}}>{'سلام'}</Text>

Expected Behavior

Text 1 should be on right side of screen but it goes to left side Text 2 should be on left side but it goes to right side

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.4
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.15.0 - /usr/local/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 8
        Build Tools: 23.0.1, 23.0.2, 23.0.3, 24.0.0, 24.0.1, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.3, 28.0.3
...
    IDEs:
      Android Studio: 3.0 AI-171.4443003
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.5 => 0.59.5 
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Issue Analytics

State:
Created 4 years ago
Reactions:7
Comments:11 (1 by maintainers)

Top GitHub Comments

3reactions

MujtabaFRcommented, Apr 24, 2019

I had the same issue asked here (using RN 0.59.5) Guess it’s related to this change in RN 0.59.3

Update: i solved it by downgrading to RN 0.59.2

1reaction

thymikeecommented, Apr 25, 2019

Thanks @MujtabaFR. This commit was recently reverted: https://github.com/facebook/react-native/commit/8d3e16831a93079fc5a855a7b0f8b4be508c6942

@grabbou are there plans to include it in 0.59 branch?

Top Results From Across the Web

AlignmentSpan.Standard - Android Developers

Standard(Layout.Alignment.ALIGN_OPPOSITE), 0, string.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); Align right to left text opposite to the layout direction.

Make a certain part of a android-textview align to the right

Here is a solution that works with Spannable, with the cavate that if the right and left are too wide, they will overlap...

Jetpack Compose Row and Column Layouts - Answertopia

Using this technique, Row and Column layouts may be embedded within each other to achieve just about any level of layout complexity.

A Complete Guide to Flexbox | CSS-Tricks

row (default): left to right in ltr ; right to left in rtl ... examples of the align-content property where a group of...

align-items - CSS: Cascading Style Sheets - MDN Web Docs

In Flexbox, it controls the alignment of items on the Cross Axis. ... align-items does not take left and right values */ align-items:...