How to fix number of lines and truncate text in React Native?

If the paragraph is big and you want to show few lines only, then you need to end it will three dots … or ellipsis. This indicates that there is more text.

In React native, we can get the same effect using the combination of two props –

1. numberOfLines – How many number of lines to show for a text block.
2. ellipsizeMode – How to display the text in given number of lines. The possible values are –
   1. head – Ellipsis at beginning. For example – …end of sentence.
   2. middle – At middle. For example – This is …tence.
   3. tail – Truncate from end. This is default. For example – This is the end of sen…
   4. clip – Truncate from end but there are no three dots.

Code Example

import React, { useState } from "react";
import { Text, StyleSheet, View } from "react-native";

const TextInANest = () => {
  
  return (
    <View style={styles.container}>

      <Text numberOfLines={1}>
        No Ellipsize mode. Only one line will be published.
      </Text>

      <Text numberOfLines={1} ellipsizeMode={'tail'}>
        Ellipsize mode = tail. Only one line will be published
      </Text>

      <Text numberOfLines={1} ellipsizeMode={'clip'}>
        Ellipsize mode = clip. Only one line will be published
      </Text>

      <Text numberOfLines={1} ellipsizeMode={'head'}>
        Ellipsize mode = head. Only one line will be published
      </Text>

      <Text numberOfLines={1} ellipsizeMode={'middle'}>
        Ellipsize mode = middle. Only one line will be published
      </Text>

      <Text numberOfLines={3}>
        Now 3 lines will be published. We are also not setting any ellipsize mode so it will take 'tail' by default. Text overflowing from more than 3 lines will be truncated with three dots.
      </Text>

    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'space-between',
    height: 200,
    width: 250,
    marginTop: 40
  },
  
  
});

export default TextInANest;

Output –

In the above image we are showing various ellipsize modes of text clipping in both iOS (left) and Android (right) phones.

Note: If number of lines > 1 in Android then only ellipsizeMode = ‘tail’ works correctly.

In the code we are setting different values of numberOfLines and ellipsizeMode props to check the results in various situations.

Live Demo

Conclusion

Truncating text in React native is possible through two props – numberOfLines and ellipsizeMode. With the help of these props, we can clip the text from start, middle and end.