A React Native port of react-highlight-words. This component is used to highlight words within a larger body of text.


1.0.13 years ago3 years agoMinified + gzip package size for @jonny/react-native-highlight-words in KB


React Native Highlight Words

React Native component used to highlight words within a larger body of text. This is a port of react-highlight-words.

Check out a demo using Exponent.


Using npm:

npm i --save react-native-highlight-words


To use it, just provide it with an array of search terms and a body of text to highlight:

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

  highlightStyle={{backgroundColor: 'yellow'}}
  searchWords={['and', 'or', 'the']}
  textToHighlight='The dog is chasing the cat. Or perhaps they're just playing?'

And the Highlighter component will highlight all occurrences of search terms within the text:

screen shot 2015-12-19 at 8 23 43 am


Property Type Required? Description
autoEscape Boolean Escape characters which are meaningful in regular expressions
highlightStyle Object Styles applied to highlighted text
sanitize Function Process each search word and text to highlight before comparing (eg remove accents); signature (text: string): string
searchWords Array Array of search words
style Object Styles applied to the text wrapper
textToHighlight String Text to highlight matches in


MIT License - fork, modify and use however you want.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.