{"id":4001,"url":"https://github.com/taskrabbit/react-native-parsed-text","last_synced_at":"2025-05-14T16:14:55.979Z","repository":{"id":2275452,"uuid":"46068307","full_name":"taskrabbit/react-native-parsed-text","owner":"taskrabbit","description":"Parse text and make them into multiple React Native Text elements","archived":false,"fork":false,"pushed_at":"2023-06-09T06:21:16.000Z","size":1349,"stargazers_count":1232,"open_issues_count":41,"forks_count":161,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-05-07T12:45:31.282Z","etag":null,"topics":["parsing","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/taskrabbit.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-11-12T17:16:33.000Z","updated_at":"2025-03-20T08:49:03.000Z","dependencies_parsed_at":"2023-07-05T20:31:41.389Z","dependency_job_id":null,"html_url":"https://github.com/taskrabbit/react-native-parsed-text","commit_stats":{"total_commits":106,"total_committers":21,"mean_commits":"5.0476190476190474","dds":0.5566037735849056,"last_synced_commit":"fded31e2012959d1d4c3ade0e47e4d826e732fd0"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taskrabbit%2Freact-native-parsed-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taskrabbit%2Freact-native-parsed-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taskrabbit%2Freact-native-parsed-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taskrabbit%2Freact-native-parsed-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taskrabbit","download_url":"https://codeload.github.com/taskrabbit/react-native-parsed-text/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254000911,"owners_count":21997448,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["parsing","react-native"],"created_at":"2024-01-05T20:16:58.122Z","updated_at":"2025-05-14T16:14:55.933Z","avatar_url":"https://github.com/taskrabbit.png","language":"JavaScript","funding_links":[],"categories":["Components","JavaScript","Others"],"sub_categories":["UI"],"readme":"# React Native Parsed Text\n\nThis library allows you to parse a text and extract parts using a `RegExp` or predefined patterns.\nCurrently there are 3 predefined types: `url`, `phone` and `email`.\n\nAll 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.\n\n## Proptypes\n\n`ParsedText` can receive [Text PropTypes](https://facebook.github.io/react-native/docs/text.html).\n\n`parse`: Array of parsed text.\n* to use the predefined type: `{type: 'url'}`.\n* to use your own `RegExp`: `{pattern: /something/}`.\n\n`renderText`: Function called to change the displayed children.\n\n`childrenProps` : Properties to pass to the children elements generated by react-native-parsed-text.\n\neg:\nYour str is ```'Mention [@michel:5455345]'``` where 5455345 is ID of this user and @michel the value to display on interface.\nYour pattern for ID \u0026 username extraction : ```/\\[(@[^:]+):([^\\]]+)\\]/i```\nYour renderText method :\n```\nrenderText(matchingString, matches) {\n  // matches =\u003e [\"[@michel:5455345]\", \"@michel\", \"5455345\"]\n  let pattern = /\\[(@[^:]+):([^\\]]+)\\]/i;\n  let match = matchingString.match(pattern);\n  return `^^${match[1]}^^`;\n}\n```\nDisplayed text will be : ```Mention ^^@michel^^```\n\n## Example\n\n```javascript\nimport ParsedText from 'react-native-parsed-text';\n\nclass Example extends React.Component {\n  static displayName = 'Example';\n\n  handleUrlPress(url, matchIndex /*: number*/) {\n    LinkingIOS.openURL(url);\n  }\n\n  handlePhonePress(phone, matchIndex /*: number*/) {\n    AlertIOS.alert(`${phone} has been pressed!`);\n  }\n\n  handleNamePress(name, matchIndex /*: number*/) {\n    AlertIOS.alert(`Hello ${name}`);\n  }\n\n  handleEmailPress(email, matchIndex /*: number*/) {\n    AlertIOS.alert(`send email to ${email}`);\n  }\n\n  renderText(matchingString, matches) {\n    // matches =\u003e [\"[@michel:5455345]\", \"@michel\", \"5455345\"]\n    let pattern = /\\[(@[^:]+):([^\\]]+)\\]/i;\n    let match = matchingString.match(pattern);\n    return `^^${match[1]}^^`;\n  }\n\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cParsedText\n          style={styles.text}\n          parse={\n            [\n              {type: 'url',                       style: styles.url, onPress: this.handleUrlPress},\n              {type: 'phone',                     style: styles.phone, onPress: this.handlePhonePress},\n              {type: 'email',                     style: styles.email, onPress: this.handleEmailPress},\n              {pattern: /Bob|David/,              style: styles.name, onPress: this.handleNamePress},\n              {pattern: /\\[(@[^:]+):([^\\]]+)\\]/i, style: styles.username, onPress: this.handleNamePress, renderText: this.renderText},\n              {pattern: /42/,                     style: styles.magicNumber},\n              {pattern: /#(\\w+)/,                 style: styles.hashTag},\n            ]\n          }\n          childrenProps={{allowFontScaling: false}}\n        \u003e\n          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.\n          But you can also do more with this package, for example Bob will change style and David too. foo@gmail.com\n          And the magic number is 42!\n          #react #react-native\n        \u003c/ParsedText\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF',\n  },\n\n  url: {\n    color: 'red',\n    textDecorationLine: 'underline',\n  },\n\n  email: {\n    textDecorationLine: 'underline',\n  },\n\n  text: {\n    color: 'black',\n    fontSize: 15,\n  },\n\n  phone: {\n    color: 'blue',\n    textDecorationLine: 'underline',\n  },\n\n  name: {\n    color: 'red',\n  },\n\n  username: {\n    color: 'green',\n    fontWeight: 'bold'\n  },\n\n  magicNumber: {\n    fontSize: 42,\n    color: 'pink',\n  },\n\n  hashTag: {\n    fontStyle: 'italic',\n  },\n\n});\n```\n\n![](https://cloud.githubusercontent.com/assets/159813/11152673/d5fe86f0-89e8-11e5-8b5e-f3c06bdc1b6b.gif)\n\n## Install\n\n`npm install --save react-native-parsed-text`\n\n## TODO\n\n* Add nested text parsing\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaskrabbit%2Freact-native-parsed-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaskrabbit%2Freact-native-parsed-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaskrabbit%2Freact-native-parsed-text/lists"}