Text numberOfLines={2} and ellipsizeMode="middle" breaks on Android

See original GitHub issue

Line restriction with ellipsizeMode set in a Text componenet fails to preform any truncation on Android when numberOfLines={2} is set.

This fails: <Text numberOfLines={2} ellipsizeMode="middle" >Some long text • 10</Text> This works: <Text numberOfLines={1} ellipsizeMode="middle" >Some long text • 10</Text> Both of the above snippets work as expected on iOS.

Environment

Environment: OS: macOS Sierra 10.12.6 Node: 7.0.0 Yarn: Not Found npm: 3.10.8 Watchman: 4.9.0 Xcode: Xcode 9.2 Build version 9C40b Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed) react: 16.0.0 => 16.0.0 react-native: 0.53.0 => 0.53.0

Steps to Reproduce

On Android, combination of numberOfLines={2} and ellipsizeMode="middle" on a Text component fails to truncate the text and no ellipses are visible. When I remove ellipsizeMode it defaults to tail and it truncates the text without issue.

Code Snippet

//...
<Text 
  style={styles.text_name}
  numberOfLines={2}
  ellipsizeMode="middle"
>
  {`${this.props.listItem.name} • ${this.props.listItem.quantity}`}
</Text>
//...
const styles = StyleSheet.create({
  //...
  text_name: {
    color: ColorPalette.GREY.BLACK,
    fontSize: 18,
    fontFamily: fonts.proxima.semibold
  },
  //...
});

Check out my Snack reproducing this: FAILING WITH 2 LINES Here’s a Snack of it working with one line: WORKING WITH 1 LINE

Expected Behavior

I expect Android should have the same functionality as iOS

Correct iOS Screenshot screen shot 2018-05-03 at 2 25 54 pm

Actual Behavior

I have been working on this within my app and below is a screenshot of the section of my app where this is used.

Incorrect Android Screenshot screen shot 2018-05-03 at 2 26 04 pm

Extra Info

The reason I need ellipsizeMode="middle" is because I have a title and a number that I append to the title and want to always ensure that the number at the end is shown.

I have read through many of the issues about numberOfLines on this repo and I have not found anything that proposed a solution.

Any ideas?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:7
  • Comments:10

github_iconTop GitHub Comments

13reactions
deathnopoolcommented, Mar 25, 2019

same isuee. numberOfLines=1 works fine, but not for numberOfLine=2, 3, 4 …

3reactions
geminiyellowcommented, Oct 17, 2018

nobody care this ?

image

Read more comments on GitHub >

github_iconTop Results From Across the Web

<Text numberOfLines={1} ellipsizeMode="middle"> crashes ...
Issue Description. When using. <Text numberOfLines={1} ellipsizeMode="middle">. , this will throw an error on Android in some situations.
Read more >
ellipsizeMode does not work when Text component is ...
I'm trying to display a title as given in the picture where it enables user to click 'See more' and expand the text....
Read more >
Example of ellipsizeMode Text in React Native Android iOS
In react native the ellipsizeMode prop is used on Text component. ... ellipsizeMode=”middle” :- This would clip the text from middle.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found