React Native Parsed Text
This library allows you to parse a text and extract parts using a RegExp or predefined patterns. Currently there are 3 predefined types: url, phone and email.
All the props are passed down to a new Text Component if there is a matching text. If those are functions they will receive as param the value of the text.
Proptypes
ParsedText can receive Text PropTypes.
parse: Array of parsed text.
- to use the predefined type:
{type: 'url'}. - to use your own
RegExp:{pattern: /something/}.
renderText: Function called to change the displayed children.
childrenProps : Properties to pass to the children elements generated by react-native-parsed-text.
eg: Your str is 'Mention [@michel:5455345]' where 5455345 is ID of this user and @michel the value to display on interface. Your pattern for ID & username extraction : /\[(@[^:]+):([^\]]+)\]/i Your renderText method :
renderText(matchingString, matches) {
// matches => ["[@michel:5455345]", "@michel", "5455345"]
let pattern = /\[(@[^:]+):([^\]]+)\]/i;
let match = matchingString.match(pattern);
return `^^${match[1]}^^`;
}
Displayed text will be : Mention ^^@michel^^
Example
import ParsedText from 'react-native-parsed-text';
class Example extends React.Component {
static displayName = 'Example';
handleUrlPress(url, matchIndex /*: number*/) {
LinkingIOS.openURL(url);
}
handlePhonePress(phone, matchIndex /*: number*/) {
AlertIOS.alert(`${phone} has been pressed!`);
}
handleNamePress(name, matchIndex /*: number*/) {
AlertIOS.alert(`Hello ${name}`);
}
handleEmailPress(email, matchIndex /*: number*/) {
AlertIOS.alert(`send email to ${email}`);
}
renderText(matchingString, matches) {
// matches => ["[@michel:5455345]", "@michel", "5455345"]
let pattern = /\[(@[^:]+):([^\]]+)\]/i;
let match = matchingString.match(pattern);
return `^^${match[1]}^^`;
}
render() {
return (
<View style={styles.container}>
<ParsedText
style={styles.text}
parse={
[
{type: 'url', style: styles.url, onPress: this.handleUrlPress},
{type: 'phone', style: styles.phone, onPress: this.handlePhonePress},
{type: 'email', style: styles.email, onPress: this.handleEmailPress},
{pattern: /Bob|David/, style: styles.name, onPress: this.handleNamePress},
{pattern: /\[(@[^:]+):([^\]]+)\]/i, style: styles.username, onPress: this.handleNamePress, renderText: this.renderText},
{pattern: /42/, style: styles.magicNumber},
{pattern: /#(\w+)/, style: styles.hashTag},
]
}
childrenProps={{allowFontScaling: false}}
>
Hello this is an example of the ParsedText, links like http://www.google.com or http://www.facebook.com are clickable and phone number 444-555-6666 can call too.
But you can also do more with this package, for example Bob will change style and David too. [email protected]
And the magic number is 42!
#react #react-native
</ParsedText>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
url: {
color: 'red',
textDecorationLine: 'underline',
},
email: {
textDecorationLine: 'underline',
},
text: {
color: 'black',
fontSize: 15,
},
phone: {
color: 'blue',
textDecorationLine: 'underline',
},
name: {
color: 'red',
},
username: {
color: 'green',
fontWeight: 'bold'
},
magicNumber: {
fontSize: 42,
color: 'pink',
},
hashTag: {
fontStyle: 'italic',
},
});
Install
npm install --save react-native-parsed-text
TODO
- Add nested text parsing
![[web] Added support for Expo web](https://avatars.githubusercontent.com/u/9664363?v=4)
0 Dec 13, 2021
1.6k Dec 30, 2022
9.8k Jan 5, 2023
67 Sep 24, 2022
259 Nov 2, 2022
129 Oct 9, 2022
79 Nov 5, 2022
5 Jan 3, 2023
592 Dec 29, 2022
33 Jan 2, 2023
20 Sep 10, 2022
223 Oct 4, 2022
5.7k Jan 9, 2023
24 Oct 30, 2022
441 Jan 6, 2023
159 Dec 23, 2022
23 Aug 10, 2021
16 Apr 24, 2020