feat(components): add Grid component (#7)

Author: juanlopez1

src/components/Col/index.js

@@ -5,7 +5,7 @@ import {View} from 'react-native';
 import styles from './styles';
 
 const Col = ({children, style, size}) => (
-    <View style={[{flex: size || 1}, styles.col, style]}>
+    <View style={[{flex: size}, styles.col, style]}>
         {children}
     </View>
 );
@@ -21,7 +21,7 @@ Col.propTypes = {
 };
 
 Col.defaultProps = {
-    size: null,
+    size: 1,
     style: {}
 };
 

src/components/Grid/index.js

@@ -0,0 +1,35 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import {some} from 'lodash';
+
+import Row from '../Row';
+import styles from './styles';
+
+const isRow = children => some(children, child => child.type === Row);
+
+const Grid = ({children, style}) => (
+    <View
+        style={[
+            isRow(children) ? styles.col : styles.row,
+            style
+        ]}
+    >
+        {children}
+    </View>
+);
+
+Grid.propTypes = {
+    children: PropTypes.oneOfType([
+        PropTypes.instanceOf(Component),
+        PropTypes.func,
+        PropTypes.array
+    ]).isRequired,
+    style: PropTypes.shape({})
+};
+
+Grid.defaultProps = {
+    style: {}
+};
+
+export default Grid;

src/components/Grid/styles.js

@@ -0,0 +1,12 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+    col: {
+        flex: 1,
+        flexDirection: 'column'
+    },
+    row: {
+        flex: 1,
+        flexDirection: 'row'
+    }
+});

src/components/Row/index.js

@@ -5,7 +5,7 @@ import {View} from 'react-native';
 import styles from './styles';
 
 const Row = ({children, style, size}) => (
-    <View style={[{flex: size || 1}, styles.row, style]}>
+    <View style={[{flex: size}, styles.row, style]}>
         {children}
     </View>
 );
@@ -21,7 +21,7 @@ Row.propTypes = {
 };
 
 Row.defaultProps = {
-    size: null,
+    size: 1,
     style: {}
 };
 

src/index.js

@@ -1,5 +1,6 @@
 import Button from './components/Button';
 import Col from './components/Col';
+import Grid from './components/Grid';
 import Header from './components/Header';
 import LoadingIndicator from './components/LoadingIndicator';
 import Row from './components/Row';
@@ -12,6 +13,7 @@ export const getFontAwesome = (name, color, size) => ({
 });
 export {Button};
 export {Col};
+export {Grid};
 export {Header};
 export {LoadingIndicator};
 export {Row};