'React Native Text custom ellipsis

I'm currently using React Native's Text component like this

<Text numberOfLines={2} ellipsizeMode="tail">Some long texts...</Text>

This renders texts like this

First line
Second line…

I'd like to use different ellipsis, for example, Instead of

End of a long line...

It would be

End of a long line ...More

Currently, possible solutions would be:

  1. Count the number of characters and cut the string then concatenate custom ellipsis.

Problem: Font's width differs per character.

  1. Use ellipsizeMode="clip" and create absolutely positioned View with a custom ellipsis.

Problem: Can't programmatically tell when the Text is clipped.

Does anyone have a solution?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source