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

I have reviewed the documentation
I have searched existing issues
I am using the latest React Native version

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

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

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?

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

Thank you for your contributions.

The Snack examples I posted reproduce this issue on the latest release.

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

nobody care this ?

Still present on React Native 0.57.1… :-/

Still present on 57.7 ...

This issue appears to be solved in RN 0.59:

Using this snippet:

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';

export default class App extends Component<> {
  render() {
    return (
      <View style={styles.container}>
        <Text numberOfLines={2} ellipsizeMode="middle">
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged. It was popularised in the 1960s with
          the release of Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum.
        </Text>
        <Text
          numberOfLines={1}
          ellipsizeMode="middle"
          style={{ marginTop: 20 }}
        >
          Some long text • 10
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    paddingTop: 40,
    paddingHorizontal: 50
  }
});

Closing.

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

For some reason this doesnt work for Android

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

@kelset

@kelset Wait your example shows it it's broken on the Android.

This is still happening on 0.61.5.

Navigation Menu

Repository navigation

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

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

Extra Info

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

Extra Info

Activity

react-native-bot commented on May 3, 2018

Daniel-J-Fisher commented on May 3, 2018

stale commented on Oct 14, 2018

geminiyellow commented on Oct 17, 2018

Manhazito commented on Dec 24, 2018

GauthierG commented on Feb 28, 2019

kelset commented on Mar 19, 2019

deathnopool commented on Mar 25, 2019

Temirtator commented on Jan 24, 2020

jinshin1013 commented on Feb 28, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions