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

React NativeReact Native-AndroidReact Native-IosReact Native-Text

React 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 :

  1. none
  2. underline
  3. line-through
  4. 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')

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJames KoView Question on Stackoverflow
Solution 1 - React NativeJames KoView Answer on Stackoverflow
Solution 2 - React NativeShivo'ham 0View Answer on Stackoverflow
Solution 3 - React NativeRaksha.View Answer on Stackoverflow
Solution 4 - React NativeAsad Ali ChoudhryView Answer on Stackoverflow
Solution 5 - React NativeMehrad FarahnakView Answer on Stackoverflow