React native Question posted in
The official React Native documentation can be found here.

React native – react-native-highlight-words package is not highlighting apostrophe (" ' ")

I am using the react-native-highlight-words package to highlight the matching search result, when I encounter words with apostrophe eg: l’areal, mommy’s etc, these are not getting highlighted. words with other special characters are getting highlighted.

type here<Highlighter
            style={styles.searchResultTxt}
            highlightStyle={styles.highlightedStyle}
            searchWords={[searchParam, 'Doctor', "'"]}
            textToHighlight={renderDisplayText(data)}
            ellipsizeMode={'tail'}
            numberOfLines={1}
            autoEscape={true}
          />

const renderDisplayText = item => {
    let txtDisplay = item?.title || '';
    if (item?.subTitle !== null && item.subTitle !== '') {
      txtDisplay += ' in ' + item.subTitle;
    }

    return txtDisplay;
  };

I tried adding apostrophe in the searchWords array, but it is highlighting only the apostrophe.
Couldn’t find enough resources to find a similar issue. Can someone help me find a fix to highlight words with apostrophe?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This issue was because of discrepancy between types of apostrophes i.e (') and (’), found out simple press on apostrophe on an iPhone will give curved apostrophe, holding the same would give a straight apostrophe


  2. 0

    Try to change prop in your <Highlighter> component.

    autoEscape={false}

    This may disables the automatic escaping of special characters, including apostrophes. Now, the searchWords array will match the entire word, including the apostrophe, leading to proper highlighting.

    Further if you need more control so you can also create a custom Regex for it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search