Text Component ellipsis is not displayed correctly in Android (sometimes the three dots are cut-off) #33487
Description
Description
When I set numberOfLines={1} on a Text component, if the parent's component width is fixed, sometimes the ellipsis is cut-off strangely. For example, in the below screenshot, you can see that only 1 and a half dots of the ellipsis are shown.
It seems to only happen on Android and on most devices that I've tried.
Version
0.63.2
Output of npx react-native info
info Fetching system and libraries information...
System:
OS: macOS 11.6.4
CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
Memory: 23.08 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.1/bin/yarn
npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.0 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
Android SDK:
API Levels: 28, 29, 30
Build Tools: 28.0.3, 29.0.2, 30.0.2
System Images: android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.6953283
Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_292 - /Users/ryanphung/.sdkman/candidates/java/current/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz => 0.63.2
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Steps to reproduce
Please refer to the below code / snack.
Snack, code example, screenshot, or link to a repository
Here is the minimal reproducible code. Link to snack.
import React from 'react'
import { View, Text } from 'react-native'
export default () =>
<View style={{alignItems: 'center', justifyContent: 'center', height: '100%'}}>
<View style={{width: 173, padding: 24, backgroundColor: 'yellow'}}>
<Text style={{fontSize: 30}} numberOfLines={1}>This text will be cut-off strangely in Android</Text>
</View>
</View>