I have a React Native App and i have a Search Bar and a FlatList. When I Search something in the SearchBar the text has to be highlighted in the list.

Single string search works fine:

But now when I type “visit hour” neither visit or hour gets highlighted

I am using a function for highlighting the text. SearchBar value is stored as this.state.value and I am passing it as props. The logic I am using inside renderItem of Flatlist is as below

 getHighlightedText = text =>{ 
                const{ value }=this.props
                const parts = text.split(newRegExp(`(${value})`,'gim'));      
                console.log('split:', parts);
               return(  <Text>
                           {
                            parts.map(part =>(part.toLowerCase()=== value.toLowerCase())?
                           <Text style={{backgroundColor:'red'}}>{part}</Text>
                            : part)}
                           </Text>);
                          }


return
<Text>{getHighlightedText(Desc)}</Text>;

This works fine when I search one word. For Example if my flat list has 2 items – “My Dog” and “Her Cat”. If my Search Text is “Dog” then Dog is highlighted in red. But if I Search “M Dog” or “M D” then nothing gets Highlighted. It has to highlight characters rather than words. Please help me fix the code!!!!!