title: Two column grid in react native flexbox
body: <p>I'm trying to build a 2 column grid in react native. I have 4 square, each should occupy half width of the screen and there will be a total of 2 columns in this case. </p>
  
  <p>Here is the code: </p>
  
  <pre><code> let profileMetricsArray = [{
    title: localization.session_count,
    value: this.state.sessionCount
  },
  {
    title: localization.hours_used,
    value: this.state.hoursUsed
  },
  {
    title: localization.day_streak,
    value: this.state.dayStreak
  },
  {
    title: localization.session_count,
    value: this.state.sessionCount
  }].map((item, i) =&gt; {
    return  &lt;View style={globalStyle.profileMetrics}&gt;
  
                &lt;Text style={globalStyle.profieText}&gt; {item.title}&lt;/Text&gt;
  
                &lt;Text style = {globalStyle.profileValues}&gt; {item.value}  &lt;/Text&gt;
              &lt;/View&gt;
  })
  </code></pre>
  
  <p>Inside render function </p>
  
  <pre><code>&lt;View style={globalStyle.profileMetricsContainer}&gt;
              {profileMetricsArray}
              &lt;/View&gt;
  </code></pre>
  
  <p>Styles: </p>
  
  <pre><code>profileMetricsContainer: {
    flexDirection:'row',
    justifyContent:'center',
    flex: 1
  },
  profileMetrics: {
    flex: 0.5,
    margin: 10,
    borderRadius: 10,
    paddingBottom: 20,
    backgroundColor: 'white'
  },
  </code></pre>
  
  <p>However, with the above code what happens is each square takes 25% width of the screen and appears in a single column. How can this be fixed ?</p>