I would like to highlight a multiline text in a React Native app by changing the text's background color. The problem is that the background color changes in the whole text area, not just under the words.

class Example extends Component {
  render() {
    const text = '...';

    return (
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>
          {text}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  textContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    width: 200,
  },
  textStyle: {
    backgroundColor: 'red',
  },
});

The code above results in something that looks like this:

But I would like it to look like this:

I can get that result by splitting the text and adding the background color to the individual words:

class Example extends Component {
  render() {
    const text = '...';

    const brokenText = text.split(' ').map(word => (
      <Text style={styles.textStyle}>{word} </Text>
    ));

    return (
      <View style={styles.textContainer}>
        {brokenText}
      </View>
    );
  }
}

But splitting the text into individual words doesn't seem like the best solution, and has a huge performance cost. Is there any cleaner way to do it?

I would like to highlight a multiline text in a React Native app by changing the text's background color. The problem is that the background color changes in the whole text area, not just under the words.

class Example extends Component {
  render() {
    const text = '...';

    return (
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>
          {text}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  textContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    width: 200,
  },
  textStyle: {
    backgroundColor: 'red',
  },
});

The code above results in something that looks like this:

But I would like it to look like this:

I can get that result by splitting the text and adding the background color to the individual words:

class Example extends Component {
  render() {
    const text = '...';

    const brokenText = text.split(' ').map(word => (
      <Text style={styles.textStyle}>{word} </Text>
    ));

    return (
      <View style={styles.textContainer}>
        {brokenText}
      </View>
    );
  }
}

But splitting the text into individual words doesn't seem like the best solution, and has a huge performance cost. Is there any cleaner way to do it?

• javascript
• android
• ios
• react-native
• flexbox

• have you tried using something like a text-shadow? I'm not sure what the react native equivalent would be – Felipe Commented Aug 17, 2017 at 19:44
• @Felipe textShadow has a different look (it's a blurred shadow under the text), and doesn't really work well for highlighting the text :/ – Bruno Brugger Commented Aug 17, 2017 at 20:03
• true, I was thinking maybe with some hacky usage but it didn't work out. what about if you split by new line instead of by character, similar to this stackoverflow.com/questions/16597304/… – Felipe Commented Aug 18, 2017 at 14:41

5 Answers 5

This is still not proper but I had it rendering as you expect by adding an invisible character (no-width space here) between each word, so the text breaks on it which has no background color. Here is the code :

const NO_WIDTH_SPACE = '​'; // This is a special char you should copy and paste, not an empty string!

const Example = () => {
  const highlight = string =>
    string.split(' ').map((word, i) => (
      <Text key={i}>
        <Text style={styles.highlighted}>{word} </Text>
        {NO_WIDTH_SPACE}
      </Text>
    ));

  return (
    <Text>
      Some regular text {highlight('with some properly highlighted text')}
    </Text>
  );
}

const styles = StyleSheet.create({
  highlighted: {
    backgroundColor: 'yellow',
  },
});

Here is a Snack where you can see the result and play with it : https://snack.expo.io/@adesurirey/properly-highlight-text-with-react-native

It can surely be improved, I'll be happy to have feedback.

Here i have done you can look.

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

export default class App extends Component {
  render() {
    const array =["Change code in the editor and watch it change on your phone! and fine."];
    return (
      <View style={styles.container}>
        <Text>
        {array.map(t=> (
            <Text style={styles.paragraph}>{t}</Text>))}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  paragraph: {
    backgroundColor: 'red'
  },
});

Try using

react-highlight-words library which can meet your need or use react-native-highlight-words library.

Both of these libraries are derived from the node package highlight-words-core

This simple function with Lodash

  const highLightWord = (word, highlight) => {
    const match = _.words(word, RegExp(highlight)); // "Aku"
    const notMatch = _.replace(word, match, ""); // "rana"
    return (
      <View style={{ flexDirection: "row" }}>
        <Text style={{ backgroundColor: "yellow" }}>{match}</Text>
        <Text>{notMatch}</Text>
      </View>
    );
  };

return (
 {highListSearch("Akurana", "Aku")}
)

I believe the issues is the display css property on your component.

Your component seems to be rendering with display: block; instead of display: inline;

See example: https://jsfiddle.net/oorangecchicken/2qkey6o9/