css - Two column grid in react native flexbox -

this question has answer here:

• react native flexbox - how percentages || columns || responsive || grid etc 2 answers

i'm trying build 2 column grid in react native. have 4 square, each should occupy half width of screen , there total of 2 columns in case.

here 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) => {   return  <view style={globalstyle.profilemetrics}>                <text style={globalstyle.profietext}> {item.title}</text>                <text style = {globalstyle.profilevalues}> {item.value}  </text>             </view> }) 

inside render function

<view style={globalstyle.profilemetricscontainer}>             {profilemetricsarray}             </view> 

styles:

profilemetricscontainer: {   flexdirection:'row',   justifycontent:'center',   flex: 1 }, profilemetrics: {   flex: 0.5,   margin: 10,   borderradius: 10,   paddingbottom: 20,   backgroundcolor: 'white' }, 

however, above code happens each square takes 25% width of screen , appears in single column. how can fixed ?

have tried using dimensions calculate grid item? work me

import {dimensions} 'react-native'    const {width, height} = dimensions.get('window')    const style = stylesheet.create({    griditem: width/2  })