142

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.

Alex Nolasco
  • 18,750
  • 9
  • 86
  • 81
James Ko
  • 32,215
  • 30
  • 128
  • 239
  • 4
    BTW it's clearly given in the react-native docs on how to perform all these together, so why should people ask a question?. – Ravi Raj May 28 '18 at 05:40
  • 18
    @RaviRaj 50 people upvoted this, so it would seem people find value in this post. Stackoverflow is about finding answers quickly without having to scour through docs. What potential downside do you see? – Tycholiz Nov 05 '20 at 18:52

5 Answers5

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

James Ko
  • 32,215
  • 30
  • 128
  • 239
  • Thanks for posting this. I am copying the idea into [es.so]: [¿Cómo pongo negritas, cursiva o subrayado en React Native?](https://es.stackoverflow.com/q/293594/83) – fedorqui Sep 13 '19 at 13:17
75
<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
},
Shivo'ham 0
  • 1,333
  • 11
  • 19
23

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
Raksha.
  • 479
  • 6
  • 6
12

Only one line solution

<Text style={{fontStyle: 'italic', fontWeight: 'bold', textDecorationLine: 'underline'}}>Bold, Italic & Underline Text</Text>
Asad Ali Choudhry
  • 4,985
  • 4
  • 31
  • 36
8

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')
Mehrad Farahnak
  • 1,033
  • 1
  • 9
  • 18