Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
alexxxwork opened this issue Mar 1, 2023 · 6 comments
Labels
Needs: Attention Issues where the author has responded to feedback. Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Newer Patch Available Platform: Android Android applications. Resolution: Issue in another tool or repo An issue that was opened against React Native but in reality is affecting another tool or library

Comments

@alexxxwork
Copy link

alexxxwork commented Mar 1, 2023

Description

This is a duplicate report of this old bug #33487 on a supported version of RN

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.

React Native Version

0.70.4

Output of npx react-native info

info Fetching system and libraries information...
System:
OS: macOS 10.15.7
CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
Memory: 26.04 MB / 8.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
Yarn: Not Found
npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
Watchman: 2023.02.13.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /opt/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
Android SDK: Not Found
IDEs:
Android Studio: 2022.1 AI-221.6008.13.2211.9514443
Xcode: 12.4/12D4e - /usr/bin/xcodebuild
Languages:
Java: 14.0.2 - /usr/bin/javac
npmPackages:
@expensify/react-native: 0.70.4-alpha.2
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: Not Found
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Here is the minimal reproducible code. Link to snack.

Snack, code example, screenshot, or link to a repository

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>
@github-actions
Copy link

github-actions bot commented Mar 1, 2023

⚠️ Newer Version of React Native is Available!
ℹ️ You are on a supported minor version, but it looks like there's a newer patch available. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

@bernhardoj
Copy link
Contributor

@alexxxwork I think it's better to create a new project with the minimum reproducible code on the latest RN version.

@cortinico
Copy link
Contributor

0.70.4-alpha.2

This is not a valid RN version + I second what @bernhardoj mentioned:

@alexxxwork I think it's better to create a new project with the minimum reproducible code on the latest RN version.

@cortinico cortinico added the Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. label Mar 1, 2023
@github-actions
Copy link

github-actions bot commented Mar 1, 2023

⚠️ Missing Reproducible Example
ℹ️ It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

@alexxxwork
Copy link
Author

0.70.4-alpha.2

This is not a valid RN version + I second what @bernhardoj mentioned:

@alexxxwork I think it's better to create a new project with the minimum reproducible code on the latest RN version.

That's a fork from 0.70.4 RN version
Expensify/react-native@Expensify-0.70.4-alpha.2...facebook:react-native:v0.70.4

Ok I'll test on latest RN version

@github-actions github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback labels Mar 1, 2023
@cortinico
Copy link
Contributor

That's a fork from 0.70.4 RN version

Then please open a issue on their fork and get back to use if it ends up being a React Native core issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs: Attention Issues where the author has responded to feedback. Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Newer Patch Available Platform: Android Android applications. Resolution: Issue in another tool or repo An issue that was opened against React Native but in reality is affecting another tool or library
Projects
None yet
Development

No branches or pull requests

4 participants