Refactor StyleSheet to support arrays

docs/apis/StyleSheet.md

@@ -9,6 +9,8 @@ outside of the render loop and are applied as inline styles. Read more about to
 
 **create**(obj: {[key: string]: any})
 
+Each key of the object passed to `create` must define a style object.
+
 ## Example
 
 ```js
@@ -24,12 +26,25 @@ const styles = StyleSheet.create({
   },
   activeTitle: {
     color: 'red',
-  },
+  }
 })
 ```
 
 Use styles:
 
+```js
+<View style={styles.container}>
+  <Text
+    style={[
+      styles.title,
+      this.props.isActive && styles.activeTitle
+    ]}
+  />
+</View>
+```
+
+Or:
+
 ```js
 <View style={styles.container}>
   <Text

docs/components/Image.md

@@ -110,11 +110,11 @@ export default class ImageExample extends Component {
         onLoad={this._onLoad.bind(this)}
         resizeMode='cover'
         source={{ uri: user.avatarUrl }}
-        style={{
-          ...styles.base,
-          ...styles[size],
-          ...loadingStyle
-        }}
+        style={[
+          styles.base,
+          styles[size],
+          loadingStyle
+        ]}
       />
     )
   }

docs/components/Text.md

@@ -82,14 +82,14 @@ export default class PrettyText extends Component {
     color: PropTypes.oneOf(['white', 'gray', 'red']),
     size: PropTypes.oneOf(['small', 'normal', 'large']),
     weight: PropTypes.oneOf(['light', 'normal', 'bold'])
-  }
+  };
 
   static defaultProps = {
     ...Text.defaultProps,
     color: 'gray',
     size: 'normal',
     weight: 'normal'
-  }
+  };
 
   render() {
     const { color, size, style, weight, ...other } = this.props;
@@ -97,32 +97,32 @@ export default class PrettyText extends Component {
     return (
       <Text
         ...other
-        style={{
-          ...style,
-          ...styles.color[color],
-          ...styles.size[size],
-          ...styles.weight[weight]
-        }}
+        style={[
+          style,
+          colorStyles[color],
+          sizeStyles[size],
+          weightStyles[weight]
+        ]}
       />
     );
   }
 }
 
-const styles = StyleSheet.create({
-  color: {
-    white: { color: 'white' },
-    gray: { color: 'gray' },
-    red: { color: 'red' }
-  },
-  size: {
-    small: { fontSize: '0.85rem', padding: '0.5rem' },
-    normal: { fontSize: '1rem', padding: '0.75rem' },
-    large: { fontSize: '1.5rem', padding: '1rem' }
-  },
-  weight: {
-    light: { fontWeight: '300' },
-    normal: { fontWeight: '400' },
-    bold: { fontWeight: '700' }
-  }
+const colorStyles = StyleSheet.create({
+  white: { color: 'white' },
+  gray: { color: 'gray' },
+  red: { color: 'red' }
+})
+
+const sizeStyles = StyleSheet.create({
+  small: { fontSize: '0.85rem', padding: '0.5rem' },
+  normal: { fontSize: '1rem', padding: '0.75rem' },
+  large: { fontSize: '1.5rem', padding: '1rem' }
+})
+
+const weightStyles = StyleSheet.create({
+  light: { fontWeight: '300' },
+  normal: { fontWeight: '400' },
+  bold: { fontWeight: '700' }
 })
 ```

docs/components/TextInput.md

@@ -176,10 +176,10 @@ export default class TextInputExample extends Component {
         onBlur={this._onBlur.bind(this)}
         onFocus={this._onFocus.bind(this)}
         placeholder={`What's happening?`}
-        style={{
-          ...styles.default
-          ...(this.state.isFocused && styles.focused)
-        }}
+        style={[
+          styles.default
+          this.state.isFocused && styles.focused
+        ]}
       />
     );
   }

docs/guides/style.md

@@ -1,8 +1,8 @@
 # Style
 
-React Native for Web relies on JavaScript to let you style your application.
-Along with a novel JS-to-CSS conversion strategy, this allows you to avoid
-issues arising from the [7 deadly sins of
+React Native for Web relies on JavaScript to define styles for your
+application. Along with a novel JS-to-CSS conversion strategy, this allows you
+to avoid issues arising from the [7 deadly sins of
 CSS](https://speakerdeck.com/vjeux/react-css-in-js):
 
 1. Global namespace
@@ -53,16 +53,16 @@ A common pattern is to conditionally add style based on a condition:
 
 ```js
 // either
-<View style={{
-  ...styles.base,
-  ...(this.state.active && styles.active)
-}} />
-
-// or
 <View style={[
   styles.base,
   this.state.active && styles.active
 ]} />
+
+// or
+<View style={{
+  ...styles.base,
+  ...(this.state.active && styles.active)
+}} />
 ```
 
 ## Composing styles
@@ -82,7 +82,7 @@ class List extends React.Component {
     return (
       <View style={this.props.style}>
         {elements.map((element) =>
-          <View style={{ ...styles.element, this.props.elementStyle }} />
+          <View style={[ styles.element, this.props.elementStyle ]} />
         )}
       </View>
     );