[web] Added support for Expo web

Example/index.android.js

@@ -5,12 +5,7 @@
 'use strict';
 
 import React from 'react';
-import ReactNative from 'react-native';
-const {
-  AppRegistry,
-  StyleSheet,
-  View,
-} = ReactNative;
+import { AppRegistry, StyleSheet, View } from 'react-native';
 
 import ParsedText from 'react-native-parsed-text';
 
@@ -45,22 +40,39 @@ class Example extends React.Component {
       <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},
-            ]
-          }
+          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 },
+          ]}
         >
-          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. You should mention [@michel:5455345] about that. [email protected]
-          And the magic number is 42!
-          #react #react-native
+          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. You
+          should mention [@michel:5455345] about that. [email protected] And the
+          magic number is 42! #react #react-native
         </ParsedText>
       </View>
     );
@@ -111,7 +123,6 @@ const styles = StyleSheet.create({
   hashTag: {
     fontStyle: 'italic',
   },
-
 });
 
 AppRegistry.registerComponent('Example', () => Example);

Example/index.ios.js

@@ -5,14 +5,13 @@
 'use strict';
 
 import React from 'react';
-import ReactNative from 'react-native';
-const {
+import {
   AppRegistry,
   StyleSheet,
   View,
   LinkingIOS,
   AlertIOS,
-} = ReactNative;
+} from 'react-native';
 
 import ParsedText from 'react-native-parsed-text';
 
@@ -47,22 +46,39 @@ class Example extends React.Component {
       <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},
-            ]
-          }
+          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 },
+          ]}
         >
-          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. You should mention [@michel:5455345] about that. [email protected]
-          And the magic number is 42!
-          #react #react-native
+          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. You
+          should mention [@michel:5455345] about that. [email protected] And the
+          magic number is 42! #react #react-native
         </ParsedText>
       </View>
     );
@@ -113,7 +129,6 @@ const styles = StyleSheet.create({
   hashTag: {
     fontStyle: 'italic',
   },
-
 });
 
 AppRegistry.registerComponent('Example', () => Example);

babel.config.js

@@ -1,7 +1,6 @@
-module.exports = {
-  retainLines: true,
-  compact: true,
-  comments: false,
-  presets: ["module:metro-react-native-babel-preset"],
-  sourceMaps: false
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-parsed-text",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "Parse text and make them into multiple React Native Text elements",
   "main": "src/ParsedText.js",
   "scripts": {
@@ -30,11 +30,11 @@
     "@babel/core": "7.1.5",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "23.6.0",
+    "babel-preset-expo": "^5.1.1",
     "jest": "23.6.0",
-    "metro-react-native-babel-preset": "0.49.0",
+    "react": "16.6.0-alpha.8af6728",
     "react-native": "0.57.4",
-    "react-test-renderer": "16.6.0-alpha.8af6728",
-    "react": "16.6.0-alpha.8af6728"
+    "react-test-renderer": "16.6.0-alpha.8af6728"
   },
   "author": "jrichardlai",
   "license": "MIT",

src/ParsedText.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactNative from 'react-native';
+import { Text } from 'react-native';
 import PropTypes from 'prop-types';
 
 import TextExtraction from './lib/TextExtraction';
@@ -11,25 +11,25 @@ export const PATTERNS = {
 };
 
 const defaultParseShape = PropTypes.shape({
-  ...ReactNative.Text.propTypes,
+  ...Text.propTypes,
   type: PropTypes.oneOf(Object.keys(PATTERNS)).isRequired,
 });
 
 const customParseShape = PropTypes.shape({
-  ...ReactNative.Text.propTypes,
-  pattern: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)]).isRequired,
+  ...Text.propTypes,
+  pattern: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)])
+    .isRequired,
 });
 
 class ParsedText extends React.Component {
-
   static displayName = 'ParsedText';
 
   static propTypes = {
-    ...ReactNative.Text.propTypes,
+    ...Text.propTypes,
     parse: PropTypes.arrayOf(
       PropTypes.oneOfType([defaultParseShape, customParseShape]),
     ),
-    childrenProps: PropTypes.shape(ReactNative.Text.propTypes),
+    childrenProps: PropTypes.shape(Text.propTypes),
   };
 
   static defaultProps = {
@@ -42,8 +42,8 @@ class ParsedText extends React.Component {
   }
 
   getPatterns() {
-    return this.props.parse.map((option) => {
-      const {type, ...patternOption} = option;
+    return this.props.parse.map(option => {
+      const { type, ...patternOption } = option;
       if (type) {
         if (!PATTERNS[type]) {
           throw new Error(`${option.type} is not a supported type`);
@@ -56,14 +56,21 @@ class ParsedText extends React.Component {
   }
 
   getParsedText() {
-    if (!this.props.parse)                       { return this.props.children; }
-    if (typeof this.props.children !== 'string') { return this.props.children; }
-
-    const textExtraction = new TextExtraction(this.props.children, this.getPatterns());
+    if (!this.props.parse) {
+      return this.props.children;
+    }
+    if (typeof this.props.children !== 'string') {
+      return this.props.children;
+    }
+
+    const textExtraction = new TextExtraction(
+      this.props.children,
+      this.getPatterns(),
+    );
 
     return textExtraction.parse().map((props, index) => {
       return (
-        <ReactNative.Text
+        <Text
           key={`parsedText-${index}`}
           {...this.props.childrenProps}
           {...props}
@@ -73,13 +80,13 @@ class ParsedText extends React.Component {
   }
 
   render() {
-    // Discard custom props before passing remainder to ReactNative.Text
+    // Discard custom props before passing remainder to Text
     const { parse, childrenProps, ...remainder } = { ...this.props };
 
     return (
-      <ReactNative.Text ref={ref => (this._root = ref)} {...remainder}>
+      <Text ref={ref => (this._root = ref)} {...remainder}>
         {this.getParsedText()}
-      </ReactNative.Text>
+      </Text>
     );
   }
 }