August 25th, 2022

How To Make Part Of The Text Bold In React Native

There will likely be times when you want to make only a part of the given Text element bold in React Native.

Likewise, you may want the word (or set of words) to be underlined or italicized. Basically, you want to modify only a subset of word(s) provided within a Text element.

This is a fairly common operation in web development in general, we can just do as follows:

<p>Hello, I am <b>bold</b>, I am <u>underlined</u> and I am <i>italicized!</i>

That’s straight forward enough, right?

But how do we do something similar in React Native? We don’t want to make the full Text element bold — but only a part of it. Only a few of the words.

Well, it works in (kind of) the same way. Let’s take a look.

Making text bold in React Native

Assuming you have a Text element, like so:

<Text>I am some text</Text>

To make all of the text bold, you could apply some styling, like this:

<Text style={styles.boldText}>I am bold text</Text>

...

// With styles...
const styles = StyleSheet.create({
    boldText: {
        fontWeight: 'bold'
    }
})

But how do we apply the bold styling to only part of the text?

For that, we can simply wrap the required word(s) with either:

Another Text component
A custom component built for this very purpose

Each of these components would be responsible for adding the relevant styling to the child element(s) it encloses. In this case, it would apply styling to make the children (one or more words) bold.

Let’s look over both solutions in turn.

Nesting Text components to make part of the text bold

If you aren’t aware already, it’s possible to nest Text components in React Native as follows:

<Text>I am <Text style={styles.boldText}>bold</Text> text</Text>
...

// With styles...
const styles = StyleSheet.create({
    boldText: {
        fontWeight: 'bold'
    }
})

This means that the class responsible for the bold styling (or underlined, or italicized, or any other variation of styling) can be easily applied to only specific parts of the parent Text.

This isn’t unique to Text components, as you may have realised; nesting components in this way is an important pattern promoted by React (and by extension, React Native).

Using a custom component to target individual words

A nicer approach would be to have a custom component that’s directly responsible for styling specific words in some way, instead:

const BoldText = props => (
    <Text
        style={{
            fontWeight: 'bold'
        }}>
        {props.children}
    </Text>
)

We can then easily re-use this component as follows:

<Text>I am <BoldText>bold</BoldText> text</Text>

Neat, right?

In my opinion, this approach is preferable to using a nested Text component directly. There are several reasons for this:

The relevant styles live in the BoldText component and don’t need declaring in each affected component (or they don’t need sharing via some other means)
The code is more clear and cohesive, it’s immediately obvious what purpose this BoldText component is serving here and we don’t need to add styling to a new Text element each time

What’s props.children here?

You may have noticed we are outputting props.children in this component.

This simply refers to whatever content we are wrapping with our component. Our component itself is effectively the parent; the items it is wrapping are its children.

The BoldText component wraps only the parts of the text element that should be made bold!

children is a special prop in this regard; and it’s important to get to grips and become familiar with how this prop actually works.

For now, just know that you can build a component that wraps other components or elements, then access these nested components or elements via the children prop, as demonstrated above.

In our case, we are simply applying some basic styling to the children before outputting them once again.

Underline specific parts of the Text element

You can apply any kind of styling to individual words in this very manner.

For the sake of completeness, here’s another tiny function that can be used to underline specific words in React Native, instead:

const UnderlinedText = props => (
    <Text
        style={{
            textDecorationLine: 'underline'
        }}>
        {props.children}
    </Text>
)

Italicize specific words

And lastly, to make only a subset of the words within the parent Text element italic:

const ItalicText = props => (
    <Text
        style={{
            fontStyle: 'italic'
        }}>
        {props.children}
    </Text>
)

I’m using inline styles here for the sake of ease, you can of course declare your own StyleSheet here, too.

React (and thus React Native) is all about the composition of components, it promotes reusing and nesting components in this manner to create clearer and more cohesive code.

Consolidating the components above

As you can see, each of these components are more or less doing the same thing — but with a slight variation each time. Formatting text, essentially.

Each component is designed to modify only a part of the relevant Text component in which it is nested.

To consolidate these functionalities, however, we can create only a single component — but pass in a prop each time, instead.

The prop would determine what operation we perform on the component’s children (making the children bold, underlining them and so on).

const Format = ({ children, operations = [] }) => {
    const style = {}
    if (operations.includes("bold")) {
        style.fontWeight = "bold"
    }
    if (operations.includes("underline")) {
        style.textDecorationLine = "underline"
    }
    if (operations.includes("bold")) {
        style.fontStyle = "italic"
    }
    return (
        <Text style={style}>
            {children}
        </Text>
    )
}

So we’re effectively just merging the functionalities of the previous components together into one consolidated package.

It’s possible to easily apply multiple styles here, now, due to the operations prop. This is an array that can contain multiple values, and thus, we can apply multiple different types of styling as and when required.

We can use the new Format component as follows:

<Text>I am <Format operations={["bold", "underline"]}>some</Format> text, formatted <Format operations={["italic"]}>in different</Format> ways!</Text>

In closing

That just about wraps up our simple examples.

As you can see, making only part of the text bold, underlined or italicized in React Native is fairly straight forward.

You just need to adapt your way of thinking and get familiar with how props.children works to quickly and easily solve problems like this one in future!

Check out the React Native section for more React Native-specific articles.

We’ve also got a lot of articles on the topic of React in general.