title: How to properly highlight text in React Native?
body: <p>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.</p>
  
  <pre><code>class Example extends Component {
    render() {
      const text = '...';
  
      return (
        &lt;View style={styles.textContainer}&gt;
          &lt;Text style={styles.textStyle}&gt;
            {text}
          &lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    textContainer: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      width: 200,
    },
    textStyle: {
      backgroundColor: 'red',
    },
  });
  </code></pre>
  
  <p>The code above results in something that looks like this: <img src="https://i.stack.imgur.com/ANxTP.png" alt="current output"></p>
  
  <p>But I would like it to look like this: <img src="https://i.stack.imgur.com/BYQos.png" alt="expected output"></p>
  
  <p>I can get that result by splitting the text and adding the background color to the individual words:</p>
  
  <pre><code>class Example extends Component {
    render() {
      const text = '...';
  
      const brokenText = text.split(' ').map(word =&gt; (
        &lt;Text style={styles.textStyle}&gt;{word} &lt;/Text&gt;
      ));
  
      return (
        &lt;View style={styles.textContainer}&gt;
          {brokenText}
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>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?</p>