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/or can compute the max character count per row, JS substring may be used.

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