How do I make text bold, italic, or underline in React Native?
React NativeReact Native-AndroidReact Native-IosReact Native-TextReact Native Problem Overview
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 quesiton below.
React Native Solutions
Solution 1 - React Native
<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: https://snack.expo.io/BJT2ss_y7
Solution 2 - React Native
<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
},
Solution 3 - React Native
use only
<Text style={styles.textStyle}>I'm Underline!</Text>
const styles = StyleSheet.create({
textStyle: {
textDecorationLine: 'underline'
}
})
Other decorations are :
- none
- underline
- line-through
- underline line-through
Solution 4 - React Native
Only one line solution
<Text style={{fontStyle: 'italic', fontWeight: 'bold', textDecorationLine: 'underline'}}>Bold, Italic & Underline Text</Text>
Solution 5 - React Native
You can see all possible att in this page https://reactnative.dev/docs/text
for example ...
textDecorationLine: enum('none', 'underline', 'line-through', 'underline line-through')