• Stars
    star
    1,193
  • Rank 39,220 (Top 0.8 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 9 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Parse text and make them into multiple React Native Text elements

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

More Repositories

1

ReactNativeSampleApp

Example app in React Native: sort of like twitter/tumblr
JavaScript
929
star
2

rails_engines_example

Ruby
399
star
3

empujar

When you need to push data around, you push it. A node.js ETL tool.
JavaScript
138
star
4

forklift

Forklift: Moving big databases around. A ruby ETL tool.
Ruby
136
star
5

react-native-zendesk-chat

React Native Wrapper around Zendesk Chat v2
Java
130
star
6

resque-bus

Use resque as a message bus!
127
star
7

demoji

Replace emojis as to not blow up utf8 MySQL.
Ruby
41
star
8

offshore

Remote Factories for your tests
Ruby
29
star
9

waistband

Ruby tools for Elastic Search
Ruby
29
star
10

storehouse

Distributed Rack Caching
Ruby
25
star
11

statusbot

Monitor your uptime automagically with statuspage.io
JavaScript
18
star
12

playbook

Api Groundwork: Versioning, Routing, Adapter Pattern, and API Standards
Ruby
12
star
13

sudojs

JavaScript
9
star
14

react-component-extension

Namespaced Higher Order Components
JavaScript
9
star
15

tests_doc

Rspec request specs recorded as Markdown files
Ruby
8
star
16

pie

apple, for now.
JavaScript
8
star
17

screenpress

Visual regression prevention for Capybara
Ruby
6
star
18

dashing-screenshots

Record your dashboard
Ruby
6
star
19

geojson

public geojson shapes and such
6
star
20

node-resquebus

It's ResqueBus... in Node!
JavaScript
5
star
21

smyte

For fraud checking
Ruby
4
star
22

esid

Simple command-line tool to dump document _source from ElasticSearch Lucene indexes.
Java
4
star
23

shrinker

Shrink urls inside a text and store those urls inside a backend.
Ruby
4
star
24

icloud-photo

Use a mac and this gem to upload photos it iCloud photo stream
Ruby
3
star
25

route_counter

Count on your Rails routes.
Ruby
2
star
26

dv8

Hit Rails.cache instead of your DB
Ruby
2
star
27

taskrabbit.github.com

CSS
2
star
28

sailthru-proxy

hacking Sailthru link tracking
JavaScript
2
star
29

tresque

Patterns for Resque usage at TaskRabbit
Ruby
1
star
30

state_event

State machine with logging
Ruby
1
star
31

doc_tests

Ruby
1
star
32

interview_public

Ruby
1
star