React Native Ellipsis Text From End, Start, Middle Android/iOS

This tutorial explains how to create ellipsis clipped text in React Native. We are going to explain and show you how we can add Ellipsis on different positions in react native Text component. Ellipsis is a type of property of CSS(Caching Style Sheet) used to clip the text present in a specific area when it crosses the area it clip the text and shows the …(Three Dotes) format at the end of Text. In CSS it is a property of text-overflow. So in this tutorial we would going to Create Ellipsis Clipped Text in React Native iOS Android application full example tutorial. In React Native we can set the default Ellipsis using numberOfLines = { 1 } prop of Text component. This prop would allow us to implement the Ellipsis Clipped effect on Text.

Types of Ellipsis present in React Native :

1. Default Ellipsis (Ellipsis From End) : The default Ellipsis shows at the End of Text. To implement the default Ellipsis we have to use numberOfLines = { 1 } prop on Text component. Below is the screenshot of Default Ellipsis.

2. Ellipsis From Start : This is the second type of Ellipsis. In this the text should clip at the start. We would use numberOfLines = { 1 } prop with ellipsizeMode = ‘head’ prop.

3. Ellipsis From Middle : This is the third type of Ellipsis. In this the text should clip at the middle. We would use numberOfLines = { 1 } prop with ellipsizeMode = ‘middle’ prop.

React Native Create Ellipsis Clipped Text :

Lets follow the below steps to Create Ellipsis Text From End, Start, Middle design in React Native.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native  packages import all required components.

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';

Step 4 : Implement render method inside the App class and wrapped the below layout design inside the root View component.

export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText} numberOfLines={1}  >
         This is a sample Ellipsis Text from Tail React
        </Text>

        <Text style={styles.headerText} numberOfLines={1} ellipsizeMode='head'>
          This is the Sample Ellipsis Text from Head React.
        </Text>

        <Text style={styles.headerText} numberOfLines={1} ellipsizeMode='middle'>
          This is the Sample Ellipsis Text from Middle React Native.
        </Text>

      </View>
    );
  }
}

Step 5 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5",
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    padding: 10,
    fontWeight: "bold"
  },
 
});

Complete Source Code for App.js 

Lets see the complete source code that helps to add Ellipsis effect on different positions in react native.

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';


export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText} numberOfLines={1}  >
         This is a sample Ellipsis Text from Tail React
        </Text>

        <Text style={styles.headerText} numberOfLines={1} ellipsizeMode='head'>
          This is the Sample Ellipsis Text from Head React.
        </Text>

        <Text style={styles.headerText} numberOfLines={1} ellipsizeMode='middle'>
          This is the Sample Ellipsis Text from Middle React Native.
        </Text>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5",
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    padding: 10,
    fontWeight: "bold"
  },
 
});

Screenshot : 

This is all about React Native Ellipsis Text From End, Start, Middle Android/iOS. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.