React Native Text Highlight is a custom component to highlight the searched word in a sentence using the highlight-words-core.

Support

iOS & Android

Installation

npm install react-native-text-highlighter

Note:

You need to make configuration on iOS and Android by following the instruction from the above dependencies libraries.

Usage

import TextHighlight from 'react-native-text-highlighter';

//...

<TextHighlight
  textToHighlight='The quick brown fox jumps over the lazy dog'
  searchWords={["the", "fox"]}
  fontSize={18}
/>

Properties

Basic

| Prop | Default | Type | Optional | Description | | :----------------- | :-----------: | :--------------: | :--------: | :------------------------------------------------ | | textToHighlight | '' | string | false | The text for the search words to match | | searchWords | [] | array | false | The array of search words | | fontSize | 15 | number | true | The font size of the text | | fontFamily | null | string | true | The font family of the text | | numberOfLines | null | number | true | The number of lines to render the text |

Custom styles

| Prop | Default | Type | Optional | Description | | :-------------------- | :-----------: | :-------: | :--------: | :-------------------------------------------------- | | containerStyle | {...} | style | true | Style of the container of the text | | highlightTextStyle | {...} | style | true | Style of the highlighted text | | textStyle | {...} | style | true | Style of the entire text (highlighted & not highlighted text) |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Made with create-react-native-library