
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 newText
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.