title: React Native create text highlight styled Text component in Text component by function
body: <p>I am currently working on small project.</p>
  <p>What I am trying to do is to create text hightlight in my speech to text react native app</p>
  <p>My project has Flask API server to detect text data whether it is voice phishing or not.</p>
  <p>I am using [react-native-voice]<a href="https://github.com/react-native-voice/voice" rel="nofollow noreferrer">https://github.com/react-native-voice/voice</a> for speech to text</p>
  <p>my react native app will send text data segment every 5 seconds to Flask API server to find out whether it is voice phishing or not then Flask API server will return score that is 0 to 1 so over 0.5 is voice phishing</p>
  <p>anyway what i am trying to say is that <strong>when the text data is considered to be voice phishing (score over 0.5) text data on my app will be highlighted</strong></p>
  <p>here is my TextBox Component code</p>
  <p>is that possible my setHighlight function</p>
  <p>input</p>
  <pre><code>hi my name is woo young from Well Bing Bank give me your account my number is 112-22314-12314. Thank you.
  </code></pre>
  <p>return</p>
  <pre><code>hi my name is woo young from Well Bing Bank
  &lt;Text style={styles.highlighted}&gt;
   give me your account
  &lt;Text&gt;
  my number is 112-22314-12314. Thank you.
  </code></pre>
  <p>but it returns</p>
  <pre><code>hi my name is woo young from Well Bing Bank
  [object Object]
  my number is 112-22314-12314. Thank you.
  </code></pre>
  <pre><code>import { Text, View, StyleSheet } from &quot;react-native&quot;;
  
  const NO_WIDTH_SPACE = '​';
  const highlight = string =&gt;
    string.split(' ').map((word, i) =&gt; (
      &lt;Text key={i}&gt;
        &lt;Text style={styles.highlighted}&gt;{word} &lt;/Text&gt;
        {NO_WIDTH_SPACE}
      &lt;/Text&gt;
    ));
  export default class TextBox extends Component {
    
    setHighlight = (string, array) =&gt; {
      for (let i = 0; i &lt; (array.length)/2; i++) {
        let seg = string.slice(array[2*i], array[2*i+1])
        let firstIdx = string.slice(0, array[2*i-1])
        let lastIdx = string.slice(array[2*i+2], array.length)
        let segText = highlight(seg)
        let result = firstIdx + segText + lastIdx
        return result
      }
    }
  
  
    render = () =&gt; {
      return(
        &lt;View style={styles.textBox}&gt;
          {this.props.partialResults.map((result, index) =&gt; {
            const hightlightText = this.setHighlight(result,[3,4])
            return (
              &lt;Text style={styles.resultText} key={`partial-result-${index}`}&gt;
                { hightlightText }
              &lt;/Text&gt;
            )
          })}
      &lt;/View&gt;
      )
    }
  }
  
  
  const styles = StyleSheet.create({
    textBox: {
      marginTop: 10,
      width: 330,
      height: 400,
      backgroundColor: &quot;white&quot;,
      borderWidth: 2,
      padding: 10,
      borderColor: &quot;dodgerblue&quot;
    },
    resultText: {
      fontSize: 18
    },
    highlighted: {
      padding:2,
      backgroundColor: 'red',
    },
  })
  </code></pre>