react-native-parsed-text
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.22 • Public • Published

    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. foo@gmail.com
              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

    Install

    npm i react-native-parsed-text

    DownloadsWeekly Downloads

    34,378

    Version

    0.0.22

    License

    MIT

    Unpacked Size

    20.6 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar