flexbox - Responsive grid in React Native & Flex -

i'm want create simplest 2 column grid listview

item | item item | item 

i saw post creating grid , worked - listview grid in react native

i couldn't understand how make grid responsive? how can set size of item 50%?

i know new language wish have more detailed guides / documents.

you can achieve using react-native-easy-grid library.

as 2x2 layout, can use following way. first import library

import {grid,row,col} 'react-native-easy-grid' 

code:

export default class stackoverflow extends component {   constructor(props) {     super(props);     const ds = new listview.datasource({rowhaschanged: (r1, r2) => r1 !== r2});     this.state = {       datasource: ds.clonewithrows([         'item'       ])     };   }    render() {     return (       <view style={{flex:1,padding:50}}>        <listview           datasource={this.state.datasource}           renderrow={(rowdata) => <grid>         <row style={styles.container}>           <col style={[styles.container,{backgroundcolor:'yellow'}]}><text>{rowdata}</text></col>           <col style={[styles.container,{backgroundcolor:'green'}]}><text>{rowdata}</text></col>         </row>         <row style={styles.container}>           <col style={[styles.container,{backgroundcolor:'skyblue'}]}><text>{rowdata}</text></col>           <col style={[styles.container,{backgroundcolor:'orange'}]}><text>{rowdata}</text></col>         </row>       </grid>}         />       </view>     );   } }  const styles = stylesheet.create({   container: {     alignitems:'center',     justifycontent:'center'   }, }); 

the result :

explaination: created 2x2 layout using react-native-easy-grid library using components grid, row, col. beauty need not mention flexdirection attributes, works. then, passed component renderrow prop of listview element.