react-native highlight word and make it clickable - reactjs

Question

I'm developing a react-native app in which I've to highlight #tagged word in paragraph and make that word clickable. I used react-native-highlight-words library and it works fine except click event. I also changed it core library for click event but it hangs my system and not work perfectly as solution is given in this link. I also got an array of #tagged words are coming in paragraph but how to give style to that particular word that's I don't know.
My Code
import Highlighter from 'react-native-highlight-words';
export default class LikeComponent extends Component {
constructor(props) {
super(props);
this.state = {highlightWordArray: []};
}
componentDidMount() {
postText = this.props.postData.details;
var regexp = new RegExp('#([^\\s]*)','g');
postText = postText.match(regexp);
if(postText != null) {
this.setState({highlightWordArray: postText});
}
}
render() {
return (
<Highlighter
highlightStyle={{color: 'red'}}
searchWords={this.state.highlightWordArray}
textToHighlight={this.props.postData.details}
onPress={(value) => console.warn(value)}
/>
)}
}
Is there any solution to highlight #taggeed word in this.props.postData.details and make it clickable?
Thank you.

Answer 1

Actually currently react-native-highlight-words is just a react-native wrapper of highlight-words-core. It gives a component to use in react-native. I checked its library and there is no onPress event is attached to Text components in react-native-highlight-words.
If you want to perform onPress then you have to write onpress functions in core library that is react-native-highlight-words.
Create two new onPress function in Highlighter.js as,
Highlighter.propTypes = {
...
...
onPressNormalText: PropTypes.func,
onPressHighlightedText: PropTypes.func
};
Then add this onPress functions in Highlighter as,
export default function Highlighter({..., ..., onPressNormalText, onPressHighlightedText}) {
...
...
...
}
Finally add this functions on Text components of Highlighter.js,
return (
<Text style={style} {...props} onPress={onPressNormalText}>
{chunks.map((chunk, index) => {
const text = textToHighlight.substr(chunk.start, chunk.end - chunk.start);
return !chunk.highlight ? (
text
) : (
<Text onPress={onPressHighlightedText} key={index} style={chunk.highlight && highlightStyle}>
{text}
</Text>
);
})}
</Text>
);
So finally your Highlighter.js with onPress events looks like,
import React from "react";
import { Text, TouchableOpacity } from "react-native";
import { findAll } from "highlight-words-core";
import PropTypes from "prop-types";
Highlighter.propTypes = {
autoEscape: PropTypes.bool,
highlightStyle: Text.propTypes.style,
searchWords: PropTypes.arrayOf(PropTypes.string).isRequired,
textToHighlight: PropTypes.string.isRequired,
sanitize: PropTypes.func,
style: Text.propTypes.style,
onPressNormalText: PropTypes.func,
onPressHighlightedText: PropTypes.func
};
/**
* 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,
onPressNormalText,
onPressHighlightedText,
style,
...props
}) {
const chunks = findAll({ textToHighlight, searchWords, sanitize, autoEscape });
return (
<Text style={style} {...props} onPress={onPressNormalText}>
{chunks.map((chunk, index) => {
const text = textToHighlight.substr(chunk.start, chunk.end - chunk.start);
return !chunk.highlight ? (
text
) : (
<Text onPress={onPressHighlightedText} key={index} style={chunk.highlight && highlightStyle}>
{text}
</Text>
);
})}
</Text>
);
}
Now you can use Highlighter.js as,
<Highlighter
highlightStyle={{ backgroundColor: "yellow" }}
searchWords={["and", "or", "the"]}
textToHighlight="The dog is chasing the cat. Or perhaps they re just playing?"
onPressNormalText={() => console.log("normal text is clickeddd!")}
onPressHighlightedText={() => console.log("highlighted text is clickked!")
/>
And all done :)
Or if you dont want to do all this, just use my forked version of this library, https://github.com/adityasonel/rn-highlight-words