Atom Lab logo

How to underline text in React Native

Tired of reinventing the wheel?

I'm building a React Native component library - built with Tailwind CSS - designed to help developers build awesome apps in record time.

Find out more

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, }, });
Added text with a Text component

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', }, });
Added underline color

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', }, });
Added a dotted underline

Dashed

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

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

Double

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

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

More Information

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

Copyright 2024 - Atom Lab | Privacy Policy | Terms and Conditions