Fixed #29: Update the package to use deprecated-react-native-prop-types and keep compatibility with react native 0.69.x

README.md

@@ -1,20 +1,19 @@
 # React Native Highlight Words
-React Native component used to highlight words within a larger body of text. This is a port of [react-highlight-words](https://github.com/bvaughn/react-highlight-words).
 
-Check out a [demo](https://getexponent.com/@clauderic/react-native-highlight-words) using Exponent.
+React Native component used to highlight words within a larger body of text. This is a port of [react-highlight-words](https://github.com/bvaughn/react-highlight-words).
 
 ## Installation
-Using [npm](https://www.npmjs.com/package/react-native-highlight-words):
+
 ```
-npm i --save react-native-highlight-words
+npm i --save @javier.alejandro.castro/react-native-highlight-words
 ```
 
 ## Usage
 
 To use it, just provide it with an array of search terms and a body of text to highlight:
 
 ```jsx
-import Highlighter from 'react-native-highlight-words';
+import Highlighter from '@javier.alejandro.castro/react-native-highlight-words';
 
 <Highlighter
   highlightStyle={{backgroundColor: 'yellow'}}
@@ -27,17 +26,19 @@ And the `Highlighter` component will highlight all occurrences of search terms w
 
 <img width="368" alt="screen shot 2015-12-19 at 8 23 43 am" src="https://cloud.githubusercontent.com/assets/29597/11914033/e3c319f6-a629-11e5-896d-1a5ce22c9ea2.png">
 
-
 ## Props
 
-| Property        | Type          | Required? | Description                                                                                                             |
-|:----------------|:--------------|:---------:|:------------------------------------------------------------------------------------------------------------------------|
-| autoEscape      | Boolean       |           | Escape characters which are meaningful in regular expressions                                                           |
-| highlightStyle  | Object        |           | Styles applied to highlighted text                                                                                      |
-| sanitize        | Function      |           | Process each search word and text to highlight before comparing (eg remove accents); signature `(text: string): string` |
-| searchWords     | Array<String> |     ✓     | Array of search words                                                                                                   |
-| style           | Object        |           | Styles applied to the text wrapper                                                                                      |
-| textToHighlight | String        |     ✓     | Text to highlight matches in                                                                                            |
+| Property           | Type          | Required? | Description                                                                                                             |
+| :----------------- | :------------ | :-------: | :---------------------------------------------------------------------------------------------------------------------- |
+| autoEscape         | Boolean       |           | Escape characters which are meaningful in regular expressions                                                           |
+| highlightStyle     | Object        |           | Styles applied to highlighted text                                                                                      |
+| sanitize           | Function      |           | Process each search word and text to highlight before comparing (eg remove accents); signature `(text: string): string` |
+| searchWords        | Array<String> |     ✓     | Array of search words                                                                                                   |
+| style              | Object        |           | Styles applied to the text wrapper                                                                                      |
+| textToHighlight    | String        |     ✓     | Text to highlight matches in                                                                                            |
+| onPress            | Function      |           | onPress event for normal text                                                                                           |
+| onPressHighlighted | Function      |           | onPress event for highlighted text (returns text that clicked)                                                          |
 
 ## License
+
 MIT License - fork, modify and use however you want.

index.d.ts

@@ -0,0 +1,47 @@
+import { TextStyle, StyleProp, TextProps } from "react-native";
+import React from "react";
+
+type HighlighterProps = {
+  /**
+   * Escape characters which are meaningful in regular expressions
+   */
+  autoEscape?: boolean;
+
+  /**
+   * Styles applied to highlighted text
+   */
+  highlightStyle?: StyleProp<TextStyle>;
+
+  /**
+   * Process each search word and text to highlight before comparing (eg remove accents);
+   */
+  sanitize?: (text: string) => string;
+
+  /**
+   * This function is called on press.
+   */
+  onPress?: ((event: GestureResponderEvent) => void) | undefined;
+
+  /**
+   * This function is called on press of the highlighted text.
+   */
+  onPressHighlighted?: ((text: string) => void) | undefined;
+
+  /**
+   * Array of search words
+   */
+  searchWords: string[];
+
+  /**
+   * Styles applied to the text wrapper
+   */
+  style?: StyleProp<TextStyle>;
+
+  /**
+   * Text to highlight matches in
+   */
+  textToHighlight: string;
+} & TextProps;
+
+declare const Highlighter: React.FC<HighlighterProps>;
+export default Highlighter;

index.js

@@ -1,47 +1,66 @@
-import React from 'react';
-import {Text} from 'react-native';
-import {findAll} from 'highlight-words-core';
-import PropTypes from 'prop-types';
+import React from "react";
+import { Text } from "react-native";
+import { findAll } from "highlight-words-core";
+import PropTypes, { oneOfType } from "prop-types";
+import { TextPropTypes } from "deprecated-react-native-prop-types";
 
 Highlighter.propTypes = {
     autoEscape: PropTypes.bool,
-    highlightStyle: Text.propTypes.style,
-    searchWords: PropTypes.arrayOf(PropTypes.string).isRequired,
+    highlightStyle: TextPropTypes.style,
+    searchWords: oneOfType([
+        PropTypes.arrayOf(PropTypes.string),
+        PropTypes.arrayOf(PropTypes.instanceOf(RegExp))
+    ]).isRequired,
     textToHighlight: PropTypes.string.isRequired,
     sanitize: PropTypes.func,
-    style: Text.propTypes.style
+    style: TextPropTypes.style
 };
 
 /**
-* Highlights all occurrences of search terms (searchText) within a string (textToHighlight).
-* This function returns an array of strings and <Text> elements (wrapping highlighted words).
-*/
+ * Highlights all occurrences of search terms (searchText) within a string (textToHighlight).
+ * This function returns an array of strings and <Text> elements (wrapping highlighted words).
+ */
 export default function Highlighter({
     autoEscape,
     highlightStyle,
     searchWords,
     textToHighlight,
     sanitize,
+    onPress,
+    onPressHighlighted,
     style,
     ...props
 }) {
-    const chunks = findAll({textToHighlight, searchWords, sanitize, autoEscape});
+    const chunks = findAll({
+        textToHighlight,
+        searchWords,
+        sanitize,
+        autoEscape
+    });
 
     return (
-        <Text style={style} {...props}>
+        <Text style={style} {...props} onPress={onPress}>
             {chunks.map((chunk, index) => {
-                const text = textToHighlight.substr(chunk.start, chunk.end - chunk.start);
+                const text = textToHighlight.substr(
+                    chunk.start,
+                    chunk.end - chunk.start
+                );
 
-                return (!chunk.highlight)
-                    ? text
-                    : (
-                        <Text
-                            key={index}
-                            style={chunk.highlight && highlightStyle}
-                        >
-                            {text}
-                        </Text>
-                    );
+                return !chunk.highlight ? (
+                    text
+                ) : (
+                    <Text
+                        key={index}
+                        style={chunk.highlight && highlightStyle}
+                        onPress={
+                            onPressHighlighted
+                                ? () => onPressHighlighted(text)
+                                : undefined
+                        }
+                    >
+                        {text}
+                    </Text>
+                );
             })}
         </Text>
     );