clauderic / react-native-highlight-words Goto Github PK

Hello, I want to use this package to find words dynamically and I don t know to get position of highlighted word to use scrollTo.

How can we add Padding and other styles into highlighted words?

In my current project, we're using Typescript. So, to add support to this package I needed to add a file .d.ts with type-checks.

If you guys believe that it could be a good idea adding an index.d.ts file into this project I can contribute doing this.

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

This package stopped working after upgrading react native to 0.69 due to ViewPropTypes being deprecated and removed from react native. Updating the package to use "deprecated-react-native-prop-types" resolved the issue.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-highlight-words/index.js b/node_modules/react-native-highlight-words/index.js
index e15cc90..4dab0dc 100644
--- a/node_modules/react-native-highlight-words/index.js
+++ b/node_modules/react-native-highlight-words/index.js
@@ -2,14 +2,15 @@ import React from 'react';
 import {Text} from 'react-native';
 import {findAll} from 'highlight-words-core';
 import PropTypes from 'prop-types';
+import  { TextPropTypes} from 'deprecated-react-native-prop-types';
 
 Highlighter.propTypes = {
     autoEscape: PropTypes.bool,
-    highlightStyle: Text.propTypes.style,
+    highlightStyle: TextPropTypes.style,
     searchWords: PropTypes.arrayOf(PropTypes.string).isRequired,
     textToHighlight: PropTypes.string.isRequired,
     sanitize: PropTypes.func,
-    style: Text.propTypes.style
+    style: TextPropTypes.style
 };
 
 /**

This issue body was partially generated by patch-package.

output:
Total highlighted word : 4

Hi. Thank you for the package.
Please add autoEscape={true} in README Usage example. I think it will be useful.

Why is autoEscape default value false?

A lingering warning still on RN 0.47.1:

ExceptionsManager.js:73 Warning: PropTypes has been moved to a separate package. Accessing React.PropTypes is no longer supported and will be removed completely in React 16. Use the prop-types package on npm instead. (https://fb.me/migrating-from-react-proptypes)
reactConsoleErrorHandler @ ExceptionsManager.js:73
printWarning @ warning.js:35
warning @ warning.js:59
get @ react.development.js:2133
(anonymous) @ index.js:101
loadModuleImplementation @ require.js:174
guardedLoadModule @ require.js:126
_require @ require.js:110
(anonymous) @ index.js:1
loadModuleImplementation @ require.js:174
guardedLoadModule @ require.js:126
_require @ require.js:110
(anonymous) @ components.js:30
loadModuleImplementation @ require.js:174
guardedLoadModule @ require.js:126
_require @ require.js:110
(anonymous) @ index.ios.js:88
loadModuleImplementation @ require.js:174
guardedLoadModule @ require.js:119
_require @ require.js:110
(anonymous) @ redux-logger.js:1
executeApplicationScript @ debuggerWorker.js:40
(anonymous) @ debuggerWorker.js:65

In [project]/node_modules/react-native-highlight-words/index.js, the index.js referenced in above log:

const text = "What do you do after school? I do aerobics after school."
<Text>
     <Highlighter
           highlightStyle={{ color: 'red' }}
           searchWords={["What", "do"]}
           textToHighlight={text}
     />
</Text>

This something i wanted to achieve

Hi!
Thanks for an awesome package. However, it would be even more awesome if the option to pass down the text props that should be applied to the text wrapper. One issue we have now is that the allowFontScaling prop never takes effect on the highlighted word (props are only passed down to the parent Text wrapper. Maybe another prop on the component called "highLightProps" or similar can be introduced?

Reference: https://facebook.github.io/react-native/docs/text.html#allowfontscaling

hello.

There is a bug if the text to higliht start with a "+"
for example

const display = "+ Laburnocytisus adami" ;

<Highlighter
    highlightStyle={thisstyles.highlighter}
    searchWords={[this.state.valueForModal]}
    textToHighlight={display}
    style={thisstyles.fontSize15}
 />

return this error :

   SyntaxError: SyntaxError: Invalid regular expression: /+/: Nothing to repeat

any idea to fix it ? thx

H there!

I see that support for React 16 was added. Thank you!
It would be great if it can be released on NPM so we can upgrade.

Thank you for an awesome module!

Hi, I'm trying to build my app to deploy on the app store, but this warning is not letting me, it asking me to have react v15.5.0, but i'm currently using v17.0.1,

is there anything I can do to make this warning go way and still use react v17.0.1?

Hi guys,
Thank you for simple and very useful Highlighter component.
Is it possible to set property of Text components like numberOfLines, ellipsizeMode to Highlighter ?
I've added above properties to style but its not working.

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

Can someone form repository creators confirm that if this package is still maintained? If not we can look for any alternative?

Thanks for nice package, it's useful for my app. But, actually my app use <Textarea> for input/output some text. How to implement or maybe combine this package to <Textarea> component?

Sorry my bad english, hopefully you understand my question ^^

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-highlight-words/index.js b/node_modules/react-native-highlight-words/index.js
index e15cc90..15f0b34 100644
--- a/node_modules/react-native-highlight-words/index.js
+++ b/node_modules/react-native-highlight-words/index.js
@@ -2,14 +2,15 @@ import React from 'react';
 import {Text} from 'react-native';
 import {findAll} from 'highlight-words-core';
 import PropTypes from 'prop-types';
+import { TextPropTypes } from 'deprecated-react-native-prop-types';
 
 Highlighter.propTypes = {
     autoEscape: PropTypes.bool,
-    highlightStyle: Text.propTypes.style,
+    highlightStyle: TextPropTypes.style,
     searchWords: PropTypes.arrayOf(PropTypes.string).isRequired,
     textToHighlight: PropTypes.string.isRequired,
     sanitize: PropTypes.func,
-    style: Text.propTypes.style
+    style: TextPropTypes.style
 };
 
 /**

This issue body was partially generated by patch-package.

Hi guys!

I'm trying to highlight multiple words, but some of them need to have a different color, just like this:

For now I can only get the red part to work. Do you know how can I also add the blue part?