react-native

react-native copied to clipboard

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>

I have this issue as well! Did you ever find a solution? @ryanphung

Same

Any updates on this?

Any update on this issue? @ryanphung

Any update on this issue? @ryanphung

same issue on RN0.62.2

It looks like your issue or the example you provided uses an unsupported version of React Native. Due to the amount of issues we receive, we're currently accepting only new issues against one of the supported version. Please open your issue on StackOverflow to get further community support.

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

Same issue on 0.71.3 when you use custom font https://github.com/facebook/react-native/issues/36350

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

This issue was closed because the author hasn't provided the requested feedback after 7 days.

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

@fabOnReact is it possible to get ellipsis to show when parent <View> has fixed height, and the <Text> doesn't have numberOfLines on it? I want to show ellipsis when theres no more room while I dont know how many number of lines would fit.