css - Two column grid in react native flexbox -
this question has answer here:
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 })
Comments
Post a Comment