React Native Create Ellipsis Clipped Text in React Native iOS Android

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.

Contents in this project Create Ellipsis Clipped Text in React Native iOS Android App:

1. Import View, StyleSheet and Text component in your project.

2. Create a parent View in render’s return block.

3. Now finally we would Create 3 Text component in Root View with Ellipsis Clipped Text.

4. Create Style for View and Text component.

5. Complete source code for App.js File :

Screenshot in Android device:

Create Ellipsis Clipped TextScreenshot in iOS device :

4 Comments

  1. Nice.
    Could you do a tutorial on how to auto font size change to fit the content?
    Thanks.

  2. I am eagerly waiting for the tutorial of (real time) push notification using php, mysql, android in react native

Leave a Reply

Your email address will not be published.