Highlight match words

[frontendjorge]

is't possible highlight match words with a custom style?

[lesmo]

Given that rendering the result is totally in your hands, it should be possible to just check your searchTerms and compare them to do some highlighting while rendering your list.

For example, using react-native-highlight-words and building on the README example:

import Highlighter from 'react-native-highlight-words';

{filteredEmails.map(email => {
  return (
    <TouchableOpacity onPress={()=>alert(email.user.name)} key={email.id} style={styles.emailItem}>
      <View>
        <Highlighter
          highlightStyle={{backgroundColor: 'yellow'}}
          searchWords={[searchTerm]}
          textToHighlight={email.user.name}
        />
        <Highlighter
          style={styles.emailSubject}
          highlightStyle={{backgroundColor: 'yellow'}}
          searchWords={[searchTerm]}
          textToHighlight={email.subject}
        />
      </View>
    </TouchableOpacity>
  )
})}