title: Column inside Grid takes half width in react-native-base
body: <p>I am using <a href="https://github.com/GeekyAnts/NativeBase" rel="nofollow noreferrer">React Native Base</a> for my iPad app and I am putting two <code>Col</code> components inside a <code>Grid</code> component like this:</p>
  
  <pre><code>&lt;Container style={styles.container}&gt;
    &lt;Header style={styles.header}&gt;
      &lt;Body&gt;
        &lt;Title&gt;Header&lt;/Title&gt;
      &lt;/Body&gt;
    &lt;/Header&gt;
    &lt;Content style={styles.mainContent}&gt;
      &lt;Grid&gt;
        &lt;Col style={styles.leftContent}&gt;
        &lt;/Col&gt;
        &lt;Col style={styles.rightContent}&gt;
        &lt;/Col&gt;
      &lt;/Grid&gt;
    &lt;/Content&gt;
  &lt;/Container&gt;
  </code></pre>
  
  <p>My Stylesheet is like this: </p>
  
  <pre><code>const styles = StyleSheet.create({
    container: {
      backgroundColor: '#ccc'
    },
    mainContent: {
      marginTop: 10,
    },
    header: {
      backgroundColor: '#fff'
    },
    leftContent: {
      width: 340,
      height: 686,
      backgroundColor: "green",
      marginLeft: 5,
    },
    rightContent: {
      width: 614,
      height: 686,
      backgroundColor: "yellow",
      marginLeft: 10,
      marginRight: 5,
    },
  </code></pre>
  
  <p>Both <code>Col</code> are taking almost equal width not the given width. How should I make these components to take given width?</p>