[Android] Text with multiple lines, center aligned, and increased letter spacing displays incorrectly

[declantvb]

Description

Combining multiple lines, center text alignment, and increased letter spacing in one Text element offsets the last line off the left hand side of the screen proportional to the amount of text which was ellipsised. All lines other than the last seem to display correctly. Removing the number of lines, text alignment, or letter spacing, or setting the number of lines to 1 fixes the issue.

Please see Expo Go screenshot at the end of the issue.

Related issues: #30326, #30684

React Native version:

System: OS: macOS 10.15.7 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 290.39 MB / 32.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 14.13.1 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.8 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.10.0 - /Users/declantvb/.rvm/gems/ruby-2.7.0/bin/pod SDKs: iOS SDK: Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1 Android SDK: API Levels: 23, 24, 28, 29, 30 Build Tools: 25.0.0, 28.0.3, 29.0.2, 30.0.1 System Images: android-23 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-29 | Android TV Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom Android NDK: 23.0.7123448-beta1 IDEs: Android Studio: 4.1 AI-201.8743.12.41.7042882 Xcode: 12.2/12B45b - /usr/bin/xcodebuild Languages: Java: 1.8.0_242-release - /usr/bin/javac Python: 2.7.16 - /usr/bin/python npmPackages: @react-native-community/cli: Not Found react: 16.11.0 => 16.11.0 react-native: Not Found react-native-macos: Not Found react-native-tvos: 0.63.4-0 npmGlobalPackages: react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Have a Text element with numberOfLines={2}, textAlign: 'center', and letterSpacing: 2
2. Run the app on an Android phone or emulator

Expected Results

Wrapped text on second line is not offset past the left-hand side of the Text element

Snack

https://snack.expo.io/Udo-eeY8C

[kyo504]

@declantvb I am also faced with this issue. Did you find any solution?

[declantvb]

@kyo504 No, we used one of the workarounds mentioned

[jocoders]

@kyo504 No, we used one of the workarounds mentioned

Which workaround do you use?

[declantvb]

@jocoders I believe we set the number of lines to 1 for the text elements affected, but your best solution will depend on which of the workarounds is the most acceptable for your use case

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.

[fabOnReact]

Do you still experience this issue?

I have four years of experience maintaining facebook/react-native and I specialize in the Text and TextInput components. I currently have 58 facebook/react-native PRs.

If you still experience this issue, I will prepare a patched release with the fix.

Thanks a lot