Hands-On Design Patterns with React Native

Truncating text

Another approach is known as truncating. Based on the text length, you cut it at some point and add three dots instead, .... However, this approach is not good for our use case. We work with the likes count number and we want to know what the number is:

<Text style={styles.text}>    {        this.state.likeCount.toString().length > 4            ? `${this.state.likeCount.toString().substring(0, 4)}...`            : this.state.likeCount    }</Text>

Observe the truncated number of likes in the following screenshot:

Truncated numbers are meaningless, this solution works only for text