how numberOfLines work in react native Text component?

Question

as the doc says: ellipsizemode props defines how text will be truncated. in my case, i want to show a expand button instead of ellipsis glyph, and i could expand the text to show all of them by press the button.

so i want to figure out how numberOfLines actually works in Text component in react-native. then i could archive this, anyone could help?

Check this answer https://stackoverflow.com/a/62317088/1435722 — Guruparan Giritharan, Jul 27 '20 at 06:40
Take a look at [this other answer](https://stackoverflow.com/a/58632169/7581249) — Milore, Jul 27 '20 at 06:43

score 1 · Accepted Answer · answered Jul 27 '20 at 06:29

1

It will show your content in <Text> component which is fitted in those numberOfLines.

With output you are expecting or want to perform, you can use dynamic numberOfLines using state.

Just have that state variable default value of lineNumbers and change it when pressing on button or any other component.

this.state = {
    lineNumbers: 2
}

This indicates your numberOfLines will be default 2, and once user press on button or read more

this.setState({lineNumbers: null})

It will show whole content.

<Text numberOfLines={this.state.lineNumbers}>

answered Jul 27 '20 at 06:29

Ravi

34,851
21
122
183

when text is less than 2 line , i don't want to show a expand button, how could i get this? – KingAmo Jul 27 '20 at 06:33
that is to say, i only want to show the read more button when text is more than 2 lines – KingAmo Jul 27 '20 at 06:40
Well for that you have to look at this [solution](https://stackoverflow.com/a/58632169/3134215), it might be useful – Ravi Jul 27 '20 at 06:47

how numberOfLines work in react native Text component?

1 Answers1