React Native Text Highlight

React Native component used to highlight character within a word. This is a part of ar-react-native-text-highlight.

Check out a example.

Installation

Using npm:

npm i --save ar-react-native-text-highlight

Using yarn:

yarn add ar-react-native-text-highlight

Usage

To use it, just provide it a search text and searchable word with if searchable true or false.

import {TextHighlight} from 'ar-react-native-text-highlight';

<TextHighlight
  text={`Anand Rakesh`}
  isSearchable={true}
  highlightedColor={'yellow'}
  searchText={'Ra An'}
/>;

And the Highlighter component will highlight all occurrences of search terms within the text: Note - This is all the dummy data which are used in example.

Props

| Property | Type | Required? | Description | | :--------------- | :------ | :-------: | :---------------------------------------------------------------------------------------------------------- | | text | String | ✓ | The text which is need to display | | style | Object | | Styles applied to text | | isSearchable | Boolean | | if you want to search(hightlight) character in word pass as true value or else false default value is false | | highlightedColor | String | | Apply any color you want to show in highlighted text Default value is yellow wrapper | | searchText | String | | Searchable text value. |

License

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