React native text component using number of lines

Question

Is there a way to determine when the text will be truncated when using number of lines ? Have been searching everywhere and no clear answer. Thank you!

https://facebook.github.io/react-native/docs/text#numberoflines. That should work, unless you have a very specific use case. And by the way, if you can share any specific example or code, that would really help — Tyro Hunter, Apr 03 '19 at 06:28

score 82 · Accepted Answer · answered Apr 03 '19 at 06:31

82

You can use numberOfLines as a props for <Text /> component. Its depend on the width of your component then calculate the length of the text. This prop is commonly used with ellipsizeMode. Example:

<Text numberOfLines={2} ellipsizeMode='tail'>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</Text>

answered Apr 03 '19 at 06:31

namth

2,747
1
9
17

2

Thank you everyone! But this is the answer I was looking for https://stackoverflow.com/questions/51610538/is-it-possible-to-know-how-many-lines-of-text-are-rendered-by-react-native-when?rq=1 – H. Wynn Apr 03 '19 at 08:19

score 8 · Answer 2 · answered Oct 30 '19 at 19:08

8

This is now possible with the onTextLayout event that includes an array of lines being rendered out. Simply looking at the length you can determine if you are at the limit. There's other details in the lines array like actual height and width of every line which can be further used to determine if the text is being truncated.

const NUM_OF_LINES = 5;
const SOME_LONG_TEXT_BLOCK = 'Fill in some long text yourself ...';

return (<Text
  numberOfLines={NUM_OF_LINES}
  onTextLayout={({ nativeEvent: { lines } }) =>
    setState({ showMoreButton: lines.length === NUM_OF_LINES })
  }
>
  {SOME_LONG_TEXT_BLOCK}
</Text>;

answered Oct 30 '19 at 19:08

Arno

961
8
12

since which version is this available? currently I get an typescript error for this function and in the doc's is only a TODO marker https://facebook.github.io/react-native/docs/text#ontextlayout – ManAnRuck Nov 21 '19 at 14:54
1

I guess very recently since it's not even documented yet but I live on the bleeding edge so it works for me and will hopefully wok for others going forward. – Arno Nov 22 '19 at 15:09
3

We still can't use this, because if your text used up 2 lines (half on the second line), you still get `lines.length === 2`, which doesn't get truncated – Shawn Thye Feb 28 '20 at 15:29

score 6 · Answer 3 · answered Dec 18 '20 at 22:45

This works for me :)

import React, { useState } from 'react'

import { Text } from 'rect-native'

export function MoreLessText({ children, numberOfLines }) {
  const [isTruncatedText, setIsTruncatedText] = useState(false)
  const [showMore, setShowMore] = useState(true)

  return isTruncatedText ? (
    <>
      <Text numberOfLines={showMore ? numberOfLines : 0}>{children}</Text>
      <Text onPress={() => setShowMore(!showMore)}">
        {showMore ? 'Read More' : 'Less'}
      </Text>
    </>
  ) : (
    <Text
      onTextLayout={(event) => {
        const { lines } = event.nativeEvent
        setIsTruncatedText(lines?.length > numberOfLines)
      }}
    >
      {children}
    </Text>
  )
}

score 0 · Answer 4 · answered Aug 19 '22 at 11:01

To create an instagram style comment with read more i did this (note that i'm using tailwind for styling, since this is a react-native app, the lib is nativewind, i'm also using a nested text which is allowing me to do a web html <span> element):

const [more, setMore] = useState(false)

const toggleShowMore = () => {
 setMore(!more)
}
<View className=" pl-1 pt-1 flex-row flex-1 max-w-[82%]">
    <Text numberOfLines={!more ? 3 : undefined}>
         <Text onPress={() => navigateUser(comment.user.username)} className="font-bold">
                @{comment.user?.username}{' '}
         </Text>{' '}
         <Text onPress={toggleShowMore}>{comment.content}</Text>
     </Text>
 </View>

React native text component using number of lines

4 Answers4