show 2 items per row[react native]

Question

I am learning react native and in all the tutorials i see ListView has been used with only 1 items per row. I have not used ListView, though. I have only 6 items that has to

Answer 1

To make a 2 row grid using ListView you could use this code as an example:

renderGridItem( item ){
    return (
        
            
                {item.fields.name.charAt(0).toUpperCase()}
            
        
        {item.fields.name} 
    
    );
}

renderCategories(){

    var listItems = this.dsinit.cloneWithRows(this.state.dataSource);

    return (
        
             this.renderGridItem(item)}
            />
        
    );
}

const styles = StyleSheet.create({
    grid: {
        justifyContent: 'center',
        flexDirection: 'row',
        flexWrap: 'wrap',
        flex: 1,
    },
    gridItem: {
        margin:5,
        width: 150,
        height: 150,
        justifyContent: 'center',
        alignItems: 'center',
    },
    gridItemImage: {
        width: 100,
        height: 100,
        borderWidth: 1.5, 
        borderColor: 'white',
        borderRadius: 50,
    },
    gridItemText: {
        marginTop: 5,
        textAlign:'center',
    },
});

Change styles to choose how many rows you want to see on screen. This code is responsive.