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.
|
1 2 3 |
import React, { Component } from 'react'; import { View, StyleSheet, Text } from 'react-native'; |
2. Create a parent View in render’s return block.
|
1 2 3 4 5 6 7 8 9 10 11 |
render() { return( <View style = { styles.MainContainer }> </View> ); } |
3. Now finally we would Create 3 Text component in Root View with Ellipsis Clipped Text.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
render() { return( <View style = { styles.MainContainer }> <Text style={styles.TextStyle} numberOfLines = { 1 } > This is the Sample Ellipsis Text for Ellipsis from End. </Text> <Text style={styles.TextStyle} numberOfLines = { 1 } ellipsizeMode = 'head'> This is the Sample Ellipsis Text for Ellipsis from Start. </Text> <Text style={styles.TextStyle} numberOfLines = { 1 } ellipsizeMode = 'middle'> This is the Sample Ellipsis Text for Ellipsis from Middle. </Text> </View> ); } |
4. Create Style for View and Text component.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const styles = StyleSheet.create( { MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, TextStyle: { textAlign: 'center', fontSize: 20, padding: 10, color: '#000' } }); |
5. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
import React, { Component } from 'react'; import { View, StyleSheet, Text } from 'react-native'; export default class App extends Component<{}> { render() { return( <View style = { styles.MainContainer }> <Text style={styles.TextStyle} numberOfLines = { 1 } > This is the Sample Ellipsis Text for Ellipsis from End. </Text> <Text style={styles.TextStyle} numberOfLines = { 1 } ellipsizeMode = 'head'> This is the Sample Ellipsis Text for Ellipsis from Start. </Text> <Text style={styles.TextStyle} numberOfLines = { 1 } ellipsizeMode = 'middle'> This is the Sample Ellipsis Text for Ellipsis from Middle. </Text> </View> ); } } const styles = StyleSheet.create( { MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, TextStyle: { textAlign: 'center', fontSize: 20, padding: 10, color: '#000' } }); |
Screenshot in Android device:
Screenshot in iOS device :
Nice.
Could you do a tutorial on how to auto font size change to fit the content?
Thanks.
Thanks for your suggestion Taha, i will soon upload a new tutorial regarding to your query :).
I am eagerly waiting for the tutorial of (real time) push notification using php, mysql, android in react native
Rohit i will soon publish a tutorial regarding to your query 🙂 .