react-native-highlight-text

A simple way to highlight text in React Native

Installation

npm install --save react-native-highlight-text

yarn add react-native-highlight-text

Usage

Highlight full text

import Highlight from 'react-native-highlight-text';

<Highlight highlightColor="blue" highlightTextColor="white">
  Highlight the full sentence!
</Highlight>;

Highlight specific parts of the text

import Highlight, { type HighlightSplit } from 'react-native-highlight-text';

const split: HighlightSplit[] = [
  [0, 9],
  [20, 25, 'green', 'orange'],
  [31, 40],
];

<Highlight highlightColor="blue" highlightTextColor="white" split={split}>
  Highlight different parts of a sentence!
</Highlight>;

Highlight using a RegEx

import Highlight from 'react-native-highlight-text';

<Highlight
  highlightColor="blue"
  highlightTextColor="white"
  highlightRegex={/(\d+)/g}
>
  Highlight a sentence with RegEx! 12.234.54.676
</Highlight>;

Highlight specific words

import Highlight from 'react-native-highlight-text';

<Highlight
  highlightColor="blue"
  highlightTextColor="white"
  wordMatch={['matching', 'words', 'sentence!']}
>
  Highlight matching words in a sentence!
</Highlight>;

Highlight component

If both split and highlightRegex props are not provided the full string will be highlighted

| Prop | Type | Default | Description | | ------------------ | -------------------- | ------- | ------------------------------------------------------------------------------------------------------------------ | | highlightColor | string | white | The background color of the highlighted parts of the text | | highlightTextColor | string | black | The text color of the highlighted parts of the text | | style | StyleProp | | Style for the full text | | highlightStyle | StyleProp | | Style for the highlighted parts of the tex | | children | string | | The string to be shown | | split | HighlightSplit[] | | A list of ranges to highlight. Created like [startIndex, endIndex, optional background color, optional text color] | | highlightRegex | RegExp | | A regex used to highlight parts of the text. g flag is required. Will overwrite split and wordMatch props | | wordMatch | string[] | | A list of case-sensitive words to highlight. Will overwrite split prop |

License

MIT