Text Component ellipsis is not displayed correctly in Android (the three dots are cut-off)

[cusnirvladislav]

Description

I have identified a recurring issue in the current version of React Native (RN) that appears to be a continuation of a previously reported bug (GitHub issue #36350). The problem persists when using numberOfLines={1} on a Text component within a fixed-width parent component. Specifically, the ellipsis is being cut off, resulting in only a partial display of the dots or text, as illustrated in the attached screenshot

Expected Behavior:

The ellipsis should be fully visible, regardless of the fixed width of the parent component.

Actual Behavior:

The ellipsis is cut off, displaying only a portion of the dots or text.

React Native Version

0.72.7

Output of npx react-native info

System:
OS: macOS 14.0
CPU: (12) arm64 Apple M2 Max
Memory: 259.44 MB / 32.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 16.20.2
path: ~/.nvm/versions/node/v16.20.2/bin/node
Yarn:
version: 1.22.19
path: ~/.nvm/versions/node/v16.20.2/bin/yarn
npm:
version: 8.19.4
path: ~/.nvm/versions/node/v16.20.2/bin/npm
Watchman:
version: 2023.09.18.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.13.0
path: /Users/user/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.0
- iOS 17.0
- macOS 14.0
- tvOS 17.0
- watchOS 10.0
Android SDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.11005911
Xcode:
version: 15.0.1/15A507
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.20.1
path: /usr/bin/javac
Ruby:
version: 3.0.1
path: /Users/vladislavcusnir/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.7
wanted: 0.72.7
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Steps to reproduce

1. Open the provided Snack link: Snack Link
2. Review the code in the Snack editor.
3. Switch to Android
4. Run the Snack and observe the ellipsis cut-off issue with numberOfLines={1} on the Text component within a fixed-width parent.

Snack, screenshot, or link to a repository

Snack Link

[NickGerleman]

6d24ee1 is part of 0.73 and fixed this is many places.

[cusnirvladislav]

The bug continues to persist. In the 6d24ee1, it is mentioned that setting the font size for the text view should resolve the issue as a workaround. However, as evident from the attached screenshot, even though the font size was applied to the Text component, the problem persists and remains unresolved.

[NickGerleman]

@cusnirvladislav it looks like you are using RN 0.72, so you won’t have the bugfix until 0.73 comes out.

[ducdh-dev]

Hi @NickGerleman This problem is still encountered even though I applied the patch from these pulls:
#37248
#39711

if I use ellipsizeMode="middle" it will have the text cut off at the end.

[fabOnReact]

Do you still experience this issue? If yes, I will publish the fix in the react-native-improved package https://github.com/fabriziobertoglio1987/react-native-improved. Thanks a lot

[mleister97]

Any updates on this one?