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.

2

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:

1

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

0

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>

1

You can see all possible att in this page

for example ...

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

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.