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 :
Also Read :
React Native Convert Text to Upper Case Lower Case on Button Click
IF-Else & Nested IF-Else conditional statement in React Native example
Execution failed for task processDebugResources Android Error React Native
Set onClickListener onPress on Button in React Native Android iOS
Add Show Image Icon Inside Button in React Native Application
