react-nativeellipsis

How to have Ellipsis effect on Text

I'm having a long text in my app and I need to truncate it and add three dots to the end.

How can I do that in React Native <Text> element?

Thanks

Solution

  • use numberOfLines:

    <Text numberOfLines={1}>long long long long text<Text>

    or, if you know/can compute the max character count per row, you can use substring():

    <Text>{ ((mytextvar).length > maxlimit) ? 
    (((mytextvar).substring(0,maxlimit-3)) + '...') : 
    mytextvar }
</Text>