textDecorationLine: ‘underline’ style property of Text component is used to create Underline Text in both Android and iOS react native application. So in this tutorial we would going to create react native app with Underline Text component.
Contents in this project Create Underline Text In React Native :
1. Import AppRegistry, StyleSheet, View and Text component in your project.
1
2
3
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, View, Text } from ‘react-native’;
|
2. Create Root View in render’s return block with Text component.
1
2
3
4
5
6
7
8
9
10
11
|
render() {
return (
<View style={styles.MainContainer}>
<Text style={ styles.TextStyle } >Sample Text Component Text</Text>
</View>
);
}
|
3. Create 2 style classes in your project. MainContainer style for Root View and TextStyle class for Text component. Now set textDecorationLine: ‘underline’ style in TextStyle .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
TextStyle: {
textAlign: ‘center’,
fontSize: 20,
textDecorationLine: ‘underline’,
}
});
|
4. 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
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, View, Text } from ‘react-native’;
export default class MainProject extends Component {
render() {
return (
<View style={styles.MainContainer}>
<Text style={ styles.TextStyle } >Sample Text Component Text</Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
TextStyle: {
textAlign: ‘center’,
fontSize: 20,
textDecorationLine: ‘underline’,
}
});
|
Screenshot in iOS device :
Screenshot in Android device :