ListView grid in React Native -

i'm building simple app in react native fetches listings remote json source , displays them on screen.

so far, using excellent example here, i've managed results display using listview components in rows (i.e. 1 result per row, see screenshot). need results display in grid, i.e. 3 6 items per row, depending on screen size , orientation.

what best way these results grid? can use listview this, or one-per-row results? i've tried playing around flexbox styles but, since react doesn't seem accept % values , listview doesn't accept styles, haven't yet had success.

you need use combination of flexbox, , knowledge listview wraps scrollview , takes on properties. in mind can use scrollview's contentcontainerstyle prop style items.

var testcmp = react.createclass({     getinitialstate: function() {       var ds = new listview.datasource({rowhaschanged: (r1, r2) => r1 !== r2});       var data = array.apply(null, {length: 20}).map(number.call, number);       return {         datasource: ds.clonewithrows(data),       };     },      render: function() {       return (         <listview contentcontainerstyle={styles.list}           datasource={this.state.datasource}           renderrow={(rowdata) => <text style={styles.item}>{rowdata}</text>}         />       );     } }); 

just listview dummy data. note use of contentcontainerstyle. here's style object:

var styles = stylesheet.create({     list: {         flexdirection: 'row',         flexwrap: 'wrap'     },     item: {         backgroundcolor: 'red',         margin: 3,         width: 100     } }); 

we tell container want items in wrapping row, , set width of each child object.