Merge pull request #16 from fram-x/release/0.2.0

Release/0.2.0

App.js

@@ -24,7 +24,7 @@ export default class App extends Component<Props> {
     return (
       <View style={styles.container}>
         <StyledText 
-          text="Welcome to <b><u>React Native</u> <demo><i>Styled</i> Text</demo></b> demo!"
+          text="Welcome to <b>React <u>Native</u> <demo><i>Styled</i> Text</demo></b> demo!"
           style={styles.welcome}
           textStyles={textStyles}
         />

README.md

@@ -60,7 +60,7 @@ Renders as
 <img src="https://github.com/fram-x/react-native-styled-text/raw/develop/docs/happyStyling.png" width="200">
 
 ### Using custom styles
-For richer styling, you set the `textStyles` property of `StyledText` to an object (`StyleSheet`) containing your custom text styles and apply the styles in the `text` property.
+For richer styling, you set the `textStyles` property of `StyledText` to an object (e.g. `StyleSheet`) containing your custom text styles and apply these styles in the `text` property.
 
 Example:
 
@@ -100,15 +100,37 @@ Renders as
 
 <img src="https://github.com/fram-x/react-native-styled-text/raw/develop/docs/welcome.png" width="280">
 
+## How it works
+
+Internally, the `render` function of `StyledText` parses the value of the `text` property and returns a nested structure of React Native [`Text`](https://facebook.github.io/react-native/docs/text) components.
+
+From the example above:
+
+```javascript
+  <StyledText
+    text="Ha<i>pp</i>y <b>Styling</b>!"
+    style={styles.header}
+  />
+```
+would be transformed to:
+
+```javascript
+  <Text 
+    style={styles.header}
+  >Ha<Text style={defaultStyles.i}>pp</Text>y <Text style={defaultStyles.b}>Styling</Text>!
+  </Text>
+```
+
+So `StyledText` just provides a more compact, readable and flexible coding of nested `Text` components. 
+
 
 ## API
-`StyledText` exposes the following properties:
+In addition to the React Native `Text` properties, `StyledText` supports the following properties:
 
 | Name | Description |
 | ---- | ----------- |
 | text | String with style tags for mixed styling of the text. Each style tag must match one of the styles provided in textStyles or one of the default styles, see below. |
-| style | Base style for the component, typically including layout properties. (Optional) |
-| textStyles | Object (`StyleSheet`) containing definition of the styles used in the provided text. (Optional) |
+| textStyles | Object (e.g. `StyleSheet`) containing definition of the styles used in the provided text. (Optional) |
 
 The following default styles are defined:
 

lib/StyledText/index.js

@@ -1,26 +1,17 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, TextProps } from 'react-native';
 
 import { renderStyledText } from './renderer';
 
-type Props = {
+type Props = TextProps & {
   text: String,
-  style: StyleSheet.Style,
   textStyles: StyleSheet.StyleSheet,
 }
 
-class StyledText extends React.Component<Props> {
-  shouldComponentUpdate = (nextProps) => {
-    return (
-      this.props.text !== nextProps.text ||
-      this.props.style !== nextProps.style ||
-      this.props.textStyles !== nextProps.textStyles
-    );
-  }
-
+class StyledText extends React.PureComponent<Props> {
   render() {
-    const { text, style, textStyles } = this.props;
-    return renderStyledText(text, style, textStyles);
+    const { text, textStyles, ...textProps } = this.props;
+    return renderStyledText(text, textStyles, textProps);
   }
 }
 

lib/StyledText/renderer.js

@@ -29,7 +29,7 @@ const renderMixedText = (mixedText: Mixed, textStyles: Object) => mixedText.map(
     )
 ));
 
-export const renderStyledText = (text, style, textStyles) => {
+export const renderStyledText = (text, textStyles, textProps) => {
   const mixedText = parse(text);
   const styles = textStyles || {}
   verifyTextStyles(mixedText, styles, defaultStyles);
@@ -38,7 +38,7 @@ export const renderStyledText = (text, style, textStyles) => {
 
   return React.createElement(
     Text,
-    { style: style },
+    textProps,
     ...textElements,
   );
 };

lib/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-styled-text",
-	"version": "0.1.4",
+	"version": "0.2.0",
 	"description": "A React Native component for easy rendering of styled text.",
 	"main": "./index.js",
 	"scripts": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-styled-text-ex",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",