How do I make text bold, italic, or underline in React Native?

Surprisingly there isn't one question that groups these all together yet on Stack Overflow; there hasn't been an answer on SO for italics or underline, in fact, only this question for bold. I self-answered this question below.

5 Answers

<Text style={styles.bold}>I'm bold!</Text> <Text style={styles.italic}>I'm italic!</Text> <Text style={styles.underline}>I'm underlined!</Text> const styles = StyleSheet.create({ bold: {fontWeight: 'bold'}, italic: {fontStyle: 'italic'}, underline: {textDecorationLine: 'underline'} }) 

Working demo on Snack:

In this Example of React Native Underline Text, we will see how can you underline the Text using the Stylesheet property textDecorationLine.

<View style={styles.MainContainer}> <Text style={styles.TextStyle}>Example of Underline Text</Text> </View> 

TextStyle: { textAlign: 'center', fontWeight: 'bold' fontStyle: 'italic' fontSize: 20, textDecorationLine: 'underline', //line-through is the trick }, 

There are other decorations :

1. none
2. underline
3. line-through
4. underline line-through

use only

<Text style={styles.textStyle}>I'm Underline!</Text> const styles = StyleSheet.create({ textStyle: { textDecorationLine: 'underline' } }) 

Other decorations are :

1. none
2. underline
3. line-through
4. underline line-through

Only one line solution

<Text style={{fontStyle: 'italic', fontWeight: 'bold', textDecorationLine: 'underline'}}>Bold, Italic & Underline Text</Text> 

You can see all possible att in this page

for example ...

textDecorationLine: enum('none', 'underline', 'line-through', 'underline line-through')