Add multiple styles to multiple strings

[alz10]

const text = "Hello Albert Good Morning"
<Highlighter
      highlightStyle={{ color: 'red' }}
      searchWords={["Hello", "Morning"]}
      textToHighlight={text}
/>

This line of code changes only the words "Hello" and "Morning" to a fontColor of red but i would also like to change the color of "Albert" and "Good" to blue at the same time. How can i achieve that?

This something i wanted to achieve

[bvaughn]

What have you tried? It's nice to show what you've tried before asking a question. 😄

You can achieve what you want by styling the unhighlighted content:

<div style={{ color: "blue" }}>
  <Highlighter
    highlightStyle={{
      backgroundColor: "transparent",
      color: "red"
    }}
    searchWords={["Hello", "Morning"]}
    textToHighlight={text}
  />
</div>

Here's a demo: https://codesandbox.io/s/3109v20x1

[alz10]

Sorry, im using React Native not React. We dont use <div></div> in RN and the above code example i use is exactly the code im using.

[bvaughn]

This component only supports React DOM. I don't understand how you would be using it with React Native.

The above code you pasted is only a small portion of the app. This is why it's helpful to provide a full repro. In this case, I would have seen the React Native renderer and known right away that what you were trying to do would not be supported. 😄

[alz10]

someone created a library for react native, react-native-highlight-words which is inspired by this library and this is exactly what i am using now and by the way let me fix my question. This is exactly what i wanted to achieve

const text = "What do you do after school? I do aerobics after school."
<Text>
     <Highlighter
           highlightStyle={{ color: 'red' }}
           searchWords={["What", "do"]}
           textToHighlight={text}
     />
</Text>

So my question is how can i change the color of the words after and school to color blue while the unsearchWords will remain default to black color

[bvaughn]

This (react-highlight-words) is not that (react-native-highlight-words) library. This library does not support React Native. So you can't use it to do any of what you're asking about with React Native.

Please ask your question there.

[alz10]

I actually do but there's still no response :( so i asked here may be someone can help me

[bvaughn]

You asked only 7 hours ago (1:30am where I am), and on the weekend. Neither myself nor the maintainer of that library are being paid to answer questions about these projects, let alone overnight or on the weekend.

Please be considerate of maintainers. 😄

In general, questions like this belong on Stack Overflow anyway. GitHub issues are for reporting bugs or requesting new features.

[alz10]

Someone ask the same question as mine and it's been 1yr and there's still no response. Check it here look

[bvaughn]

That's really not relevant. Again, this is not the same project so it's not appropriate to ask your question here. 😕

If the maintainer of that project decided not to answer questions- that's fine. You aren't paying him and he's under no obligation to answer questions.

I'm locking this thread because it's not productive.