How to Highlight Specific Words in React Native Text

By Rashid •  September 10th, 2023 • 

React Native is a versatile framework that enables you to build mobile apps using JavaScript. Often, you’ll want to highlight certain words in a text string to grab the user’s attention.

In this blog post, we will learn how to highlight specific words within a text string in React Native.

What You Will Need

The Example Code

Let’s dive into the example code and understand how it works.

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

const highlightWords = (string, wordsToHighlight) => {
  return string
    .split(' ')
    .map((word, i) => (
      <Text key={i}>
        {wordsToHighlight.includes(word.toLowerCase()) ? (
          <Text style={styles.highlighted}>{word} </Text>
        ) : (
          `${word} `

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
          'Here is a text with some very important words that need to be highlighted',
          ['important', 'highlighted'],

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    justifyContent: 'center',
  text: {
    fontSize: 20,
  highlighted: {
    backgroundColor: 'yellow',

export default App;
react native text highlight words

The highlightWords Function

This function takes in two parameters:

The function splits the string into an array of words and then maps over these words.

For each word, the function checks whether it exists in the wordsToHighlight array. If it does, it wraps the word with a Text component with a highlighted style. Otherwise, it returns the word as is.

The App Component

This is the main React Native component. It uses the highlightWords function to process the text and highlight the words “important” and “highlighted”.


The styles object contains three styles:

The example code offers a straightforward way to highlight specific words in a text string in React Native. It uses the Text component to selectively apply styles based on the words you want to emphasize. This is particularly useful for drawing attention to key information within an app.


Keep Reading