Baseline alignment does not respect numberOfLines text property
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
Description
This issue is Android specific.
Whenever using alignItems: 'baseline' on a container which has a text element in it with numberOfRows specified, if that text does get truncated, then the container will be as large as the (partly invisible) text is.
Version
0.70.5
Output of npx react-native info
System:
OS: macOS 12.5.1
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 168.17 MB / 16.00 GB
Shell: 3.3.1 - /usr/local/bin/fish
Binaries:
Node: 16.14.2 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 8.5.3 - /usr/local/bin/npm
Watchman: 2022.10.17.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2020.3 AI-203.7717.56.2031.7583922
Xcode: 14.1/14B47b - /usr/bin/xcodebuild
Languages:
Java: 11.0.11 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.5 => 0.70.5
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found
Steps to reproduce
Wrap a Text component with a View component which has flexDirection set to row and alignItems set to baseline. Make sure the text contains enough text to at least be rendered on 2 lines. Add numberOfLines with the value of 1 on that text. Notice that the container is larger than you'd expect. You'd expect it to be only 1 line high.
Snack, code example, screenshot, or link to a repository
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the Android-only behavior from the linked Snack using a Text inside a row-oriented View with alignItems set to baseline and numberOfLines set to 1. Trace the Android handling of Text layout and baseline alignment, then verify that the container is one line high after truncation without changing the expected behavior for unconstrained text.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100