Strike Through Text is mostly used in e-commerce applications where seller gives some discount to its customers. Strike Through Text is basically a Cross Line Out Text where the text is cut through a line in the middle of the. The strength line in draw in the middle of text and go strength to end of text. So in this tutorial we would going to Create Strike Through Text in React Native Android iOS App using textDecorationLine: ‘line-through’ text style.
Contents in this project Create Strike Through Text in React Native Android iOS App :
1. Import StyleSheet, View and Text component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, 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
12
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
3. Create a Text component in Root View and call TextStyle CSS style class. This class is our main class.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
render() {
return (
<View style={styles.MainContainer}>
<Text style={ styles.TextStyle}>
Sample Strike Through Text
</Text>
</View>
);
}
|
4. Create 2 CSS style classes in your project. The MainContainer class is for Root View and the TextStyle for Text component. Now we would call the textDecorationLine: ‘line-through’ style property of Text. This property would make the text Strike Through.
|
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 :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
TextStyle: {
textAlign: ‘center’,
fontSize: 20,
textDecorationLine: ‘line-through’,
textDecorationStyle: ‘solid’,
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
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text } from ‘react-native’
export default class Mynewproject extends Component {
render() {
return (
<View style={styles.MainContainer}>
<Text style={ styles.TextStyle}>
Sample Strike Through Text
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
TextStyle: {
textAlign: ‘center’,
fontSize: 20,
textDecorationLine: ‘line-through’,
textDecorationStyle: ‘solid’,
color: ‘#000’
}
});
|
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
React Native Latest Function Component Example Tutorial
Example of React Native Action Button | Floating Action Button
React Native Show SuperScript SubScript Text in Android iOS Example
RNCSafeAreaView was not found in the UIManager React Native iOS Error Solution
Create Multi Line Text Breaking Text Line From Middle in React Native
