Text - numberOfLines not working

See original GitHub issue

Description

I have used Text component with numberOfLines and ellipsizeMode properties. I have even tried this here : https://facebook.github.io/react-native/docs/text.html . I have tried editing it on the fly. But numberOfLines works only with value = {1} and not with any other numbers. Please advise if I am missing anything here.

My requirement is to show max 3 lines of text and then truncate it with ellipsizeMode to tail. Any working example would be appreciated.

Code

`import React, { Component } from ‘react’; import { AppRegistry, Text, StyleSheet } from ‘react-native’;

class TextInANest extends Component { constructor(props) { super(props); this.state = { titleText: “Bird’s Nest”, bodyText: ‘This is not really a bird nest. Adding long text to see if it truncates after 3 lines and displays the truncation sign properly.’ }; }

render() { return ( <Text style={styles.baseText}> <Text style={styles.titleText} onPress={this.onPressTitle}> {this.state.titleText}

</Text> <Text numberOfLines={3} ellipsizeMode ={‘tail’}> {this.state.bodyText} </Text> </Text> ); } }

const styles = StyleSheet.create({ baseText: { fontFamily: ‘Cochin’, }, titleText: { fontSize: 20, fontWeight: ‘bold’, }, });

// App registration and rendering AppRegistry.registerComponent(‘TextInANest’, () => TextInANest);`

Additional Information

  • React Native version: 0.35
  • Platform: both
  • Operating System: Mac OS

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

5reactions
digitalmastercommented, Jan 2, 2017

This still does not work for me either. Very basic un-nested <Text numberOfLines={1}> … Even tried setting width.

1reaction
sachin-sablecommented, Nov 7, 2016

@reneweb I am still not able to find the solution. It’s not even working with the editable examples given here. https://facebook.github.io/react-native/docs/text.html Any reason why those examples are not working when set with numberOfLines>1. ?

Thanks.

Read more comments on GitHub >

github_iconTop Results From Across the Web

numberOfLines TextInput property not working - Stack Overflow
To fix this I saw in the docs numberOfLines property but it did not work. Here is my code: <TextInput ref='textInput' multiline={true} ...
Read more >
Text · React Native
A React component for displaying text. Text supports nesting, styling, and touch handling. In the following example, the nested title and body text...
Read more >
TextInput - React Native
TextInput. A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, ...
Read more >
UILabel.numberOfLines = 2 but text… | Apple Developer Forums
To check if it is working, either make the text of the label much longer or reduce the witdth of the label and...
Read more >
React Native: Did the text truncate using numberOfLines?
I had one of those issues the other day. We can easily truncate text using the numberOfLines prop. If we want to show...
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