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 :
Also Read :
React Native Change Text Component Height Width Dynamically
React Native User Registration using PHP MySQL Database PART-1 – Creating PHP API
What is the Main Difference Between React Native and ReactJS
React Native Show Error Message if Image load failed Not Found on Server
How to Set-Change Button Background Color in React Native Android iOS
