react-nativereact-native-text

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.


Solution

  • <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