How could I just highlight the exat word?

[ramisalem]

Hi, thanks for such an awesome package, I am looking for a way that I could highlight the exact word in the searchWords property, for example, the value of the textToHighlight is "form and the searchWords is for what if do not want to highlight the first three letters in the text but I want to highlight the searchWords values only and only if it comes as exact as it is in searchWords

thanks in advance

[MohiniGupta04]

For this you may save the searchKey into state using setState and pass this searchkey to the searchWords props of Highlighter like this example below:

This is your text input to enter the search keyword:
<TextInput placeholder='Search for initials' onChangeText={(text)=>{this.setState({searchKey: text})}} />

And your Highlighter component would look like this
<Highlighter
highlightStyle={{backgroundColor:'yellow'}}
searchWords={[this.state.searchKey]}
textToHighlight='Your text goes here.....'
/>

[tushgup]

@MohiniGupta04 I'm still not clear how your comment resolves the issue @ramisalem described. I just found this package but I only want to try and highlight an exact match, not partial matches within a longer word... Any solutions?

[JoeyFenny]

I just figured out how accomplish using the code below. (I'm using lodash)

<TextInput
  ref={_input}
  onChangeText={onChangeValue}
  multiline
  placeholderTextColor={Colors.darkGrey}
  autoCapitalize="none"
  style={styles.textInput}
  placeholder={
    state.editComment
      ? 'Update comment...'
      : 'Write a comment...'
  }>
  {_.flatMap(
    value.split(' ').map((word: string) => {
      if (state[articleID].blacklistedWords[word]) {
        return (
          <Text style={styles.highlightStyle}>{word}</Text>
        );
      } else {
        return <Text>{word}</Text>;
      }
    }),
    (word, index, array) =>
      array.length - 1 !== index // .join(" ") throws [Object, object] so manually add spaces between array elements
        ? [word, <Text> </Text>]
        : word,
  )}
</TextInput>