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

Sometimes, we want to make text bold, italic, or underline in React Native.

In this article, we’ll look at how to make text bold, italic, or underline in React Native.

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

To make text bold, italic, or underline in React Native, we can set various styles.

For instance, we write:

import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Card } from 'react-native-paper';

const styles = StyleSheet.create({
  bold: { fontWeight: 'bold' },
  italic: { fontStyle: 'italic' },
  underline: { textDecorationLine: 'underline' },
});

const App = () => {
  return (
    <View>
      <Text style={styles.bold}>bold</Text>
      <Text style={styles.italic}>italic</Text>
      <Text style={styles.underline}>underlined</Text>
    </View>
  );
};
export default App;

to create the bold style by setting fontWeight to 'bold'.

We create the italic style by setting fontStyle to 'italic'.

And we create the underline style by setting textDecorationLine to 'underline'.

Now we should see bold, italic, and underlined text ordered from top to bottom.

Conclusion

To make text bold, italic, or underline in React Native, we can set various styles.