How to underline text in React Native

2/28/2022

Request, Deliver, Revise, Done

Get unlimited UI Design & React Development for a fixed monthly price

50% off your first month

Introduction

When you have a block of text and you want to emphasise part of it, you'll usually want to use a text underline. In CSS you'd reach for the text-transform property, but it might not be immediately obvious how to do this in React Native.

In React Native there are three style properties that allow us to create and style an underline. In this article I'll show you some examples and how to use them.

Adding some text

To get started let's add a simple Text component with some lorem ipsum:

import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        Fusce ultrices massa nec diam semper, ac consequat lorem vestibulum. Ut sed est at est
        scelerisque faucibus sed ut tellus. Sed tincidunt finibus sagittis. Ut convallis nulla ut
        dui venenatis, id convallis dui bibendum. Morbi ullamcorper mi non nibh interdum pretium.
        Nullam id ex mi. Aliquam erat volutpat.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  text: {
    fontSize: 18,
    lineHeight: 26,
  },
});

Adding a simple underline using the textDecorationLine property

We'll then add a nested Text component which we'll use to add our underline style to - the same way we'd use a span or a strong tag in HTML.

///
export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        Fusce ultrices massa nec diam semper, ac consequat lorem vestibulum. Ut sed est at est
        scelerisque faucibus sed ut tellus.{' '}
        <Text style={styles.underline}>Sed tincidunt finibus sagittis</Text>. Ut convallis nulla ut
        dui venenatis, id convallis dui bibendum. Morbi ullamcorper mi non nibh interdum pretium.
        Nullam id ex mi. Aliquam erat volutpat.
      </Text>
    </View>
  );
}
///

To add our underline style, we use the textDecorationLine property, and set the value to 'underline':

///
const styles = StyleSheet.create({
  ///
  underline: {
    textDecorationLine: 'underline',
  },
});

Added nested text component with underline

Adding a color

If we want to add a color to our underline, we need to add the textDecorationColor property and set it to the value of the color we want to use:

///
const styles = StyleSheet.create({
  ///
  underline: {
    textDecorationLine: 'underline',
    textDecorationColor: 'red',
  },
});

TextDecorationStyle dotted

You can also change the type of underline, just like you can in CSS, using the textDecorationStyle property. For example, if we want to add a dotted underline, we set textDecorationStyle to 'dotted':

///
const styles = StyleSheet.create({
  ///
  underline: {
    textDecorationLine: 'underline',
    textDecorationColor: 'red',
    textDecorationStyle: 'dotted',
  },
});

Dashed

If you want to add a dashed underline, set textDecorationStyle to 'dashed':

///
const styles = StyleSheet.create({
  ///
  underline: {
    textDecorationLine: 'underline',
    textDecorationColor: 'red',
    textDecorationStyle: 'dashed',
  },
});

Double

To add a double underline, set textDecorationStyle to 'double':

///
const styles = StyleSheet.create({
  ///
  underline: {
    textDecorationLine: 'underline',
    textDecorationColor: 'red',
    textDecorationStyle: 'double',
  },
});

More Information

For a full list of available Text style props, you can check out the React Native documentation page.