Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[web] Added support for Expo web #58

Merged
merged 3 commits into from
Jun 24, 2020
Merged

[web] Added support for Expo web #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2493995
Removed default export
EvanBacon Mar 20, 2019
f55c471
Merge branch 'master' into master
EvanBacon Oct 25, 2019
c909f64
Update babel.config.js
EvanBacon Jan 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 33 additions & 22 deletions Example/index.android.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,7 @@
'use strict';

import React from 'react';
import ReactNative from 'react-native';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are there any significant changes in this file that need to be reviewed? Most of them look like Formatting changes.

Copy link
Contributor Author

@EvanBacon EvanBacon Oct 25, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The default export of react-native has been removed from web and will be removed from native soon. I opened this PR right after deleting it. It was removed because it causes all of the RN module to be bundled regardless of if you are using them or not.

const {
AppRegistry,
StyleSheet,
View,
} = ReactNative;
import { AppRegistry, StyleSheet, View } from 'react-native';

import ParsedText from 'react-native-parsed-text';

Expand Down Expand Up @@ -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>
);
Expand Down Expand Up @@ -111,7 +123,6 @@ const styles = StyleSheet.create({
hashTag: {
fontStyle: 'italic',
},

});

AppRegistry.registerComponent('Example', () => Example);
53 changes: 34 additions & 19 deletions Example/index.ios.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,13 @@
'use strict';

import React from 'react';
import ReactNative from 'react-native';
EvanBacon marked this conversation as resolved.
Show resolved Hide resolved
const {
import {
AppRegistry,
StyleSheet,
View,
LinkingIOS,
AlertIOS,
} = ReactNative;
} from 'react-native';

import ParsedText from 'react-native-parsed-text';

Expand Down Expand Up @@ -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>
);
Expand Down Expand Up @@ -113,7 +129,6 @@ const styles = StyleSheet.create({
hashTag: {
fontStyle: 'italic',
},

});

AppRegistry.registerComponent('Example', () => Example);
13 changes: 7 additions & 6 deletions babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
module.exports = {
retainLines: true,
compact: true,
comments: false,
presets: ["module:metro-react-native-babel-preset"],
sourceMaps: false
module.exports = function(api) {
EvanBacon marked this conversation as resolved.
Show resolved Hide resolved
if (!!api) {
api.cache(true);
}
return {
presets: ['babel-preset-expo'],
EvanBacon marked this conversation as resolved.
Show resolved Hide resolved
};
};
8 changes: 4 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down Expand Up @@ -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",
Expand Down
20 changes: 13 additions & 7 deletions src/ParsedText.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ const customParseShape = PropTypes.shape({
});

class ParsedText extends React.Component {

static displayName = 'ParsedText';

static propTypes = {
Expand All @@ -42,8 +41,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`);
Expand All @@ -56,10 +55,17 @@ 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) => {
const { style: parentStyle } = this.props
Expand Down
Loading