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
; Component static displayName = 'Example'; { LinkingIOS; } { AlertIOS; } { AlertIOS; } { AlertIOS; } { // matches => ["[@michel:5455345]", "@michel", "5455345"] let pattern = /\[:\]/i; let match = matchingString; return `^^^^`; } { return <View style=stylescontainer> <ParsedText style=stylestext parse= type: 'url' style: stylesurl onPress: thishandleUrlPress type: 'phone' style: stylesphone onPress: thishandlePhonePress type: 'email' style: stylesemail onPress: thishandleEmailPress pattern: /Bob|David/ style: stylesname onPress: thishandleNamePress pattern: /\[:\]/i style: stylesusername onPress: thishandleNamePress renderText: thisrenderText pattern: /42/ style: stylesmagicNumber pattern: /#/ style: styleshashTag 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 foo@gmailcom And the magic number is 42! #react #react-native </ParsedText> </View> ; } const styles = StyleSheet;
Install
npm install --save react-native-parsed-text
TODO
- Add nested text parsing