title: 2 column layout with flexBox on React Native
body: <p>I'm trying to do a two column layout in React Native from a list of items. It only seems to work if I define the width of the items, I would like to define just a percentage of the parent width (0.5 would make a 2 column layout, but 0.25 would make a 4 column one). Can this be done?</p>
  
  <pre class="lang-js prettyprint-override"><code>export default class App extends Component {
    render() {
      return (
        &lt;View style={[styles.container, {width:width}]}&gt;
          &lt;View style={styles.item}&gt;&lt;Text&gt;{'item1'}&lt;/Text&gt;&lt;/View&gt;
          &lt;View style={styles.item}&gt;&lt;Text&gt;{'item2'}&lt;/Text&gt;&lt;/View&gt;
          &lt;View style={styles.item}&gt;&lt;Text&gt;{'item3'}&lt;/Text&gt;&lt;/View&gt;
          &lt;View style={styles.item}&gt;&lt;Text&gt;{'item4'}&lt;/Text&gt;&lt;/View&gt;
          &lt;View style={styles.item}&gt;&lt;Text&gt;{'item4'}&lt;/Text&gt;&lt;/View&gt;
          &lt;View style={styles.item}&gt;&lt;Text&gt;{'item5'}&lt;/Text&gt;&lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: 'row',
      flexWrap: 'wrap',
    },
    item :{
      flex: 0.5, //why this doesnt work???
      // width: 150, //using fixed item width instead of flex: 0.5 works
      height: 100,
      padding: 10,
      backgroundColor: 'red',
      // flexGrow: 1,
      // flexShrink: 0,
    }
  });
  </code></pre>
  
  <p>You can play with it here: <a href="https://snack.expo.io/SyBjQuRxm" rel="noreferrer">https://snack.expo.io/SyBjQuRxm</a></p>
  
  <p>Css working equivalent: <a href="https://codepen.io/klamping/pen/WvvgBX?editors=110" rel="noreferrer">https://codepen.io/klamping/pen/WvvgBX?editors=110</a></p>
  
  <p>Obviously I could do something like creating a container for each column, but that's not the point:</p>
  
  <pre class="lang-js prettyprint-override"><code>render() {
      return (
        &lt;View style={[styles.container, {width:width}]}&gt;
          &lt;View style={styles.column1}&gt;
               &lt;View style={styles.item}&gt;&lt;Text&gt;{'item1'}&lt;/Text&gt;&lt;/View&gt;
               &lt;View style={styles.item}&gt;&lt;Text&gt;{'item2'}&lt;/Text&gt;&lt;/View&gt;
               &lt;View style={styles.item}&gt;&lt;Text&gt;{'item3'}&lt;/Text&gt;&lt;/View&gt;
          &lt;/View&gt;
          &lt;View style={styles.column2}&gt;
               &lt;View style={styles.item}&gt;&lt;Text&gt;{'item4'}&lt;/Text&gt;&lt;/View&gt;
               &lt;View style={styles.item}&gt;&lt;Text&gt;{'item4'}&lt;/Text&gt;&lt;/View&gt;
               &lt;View style={styles.item}&gt;&lt;Text&gt;{'item5'}&lt;/Text&gt;&lt;/View&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  </code></pre>