In react native how to arrange image button - ios

Question

I'm new to react native.
I need to arrange 8 image button in 4 rows and 2 columns.I tried with flexDirection, but it's not work(confuse).
Actually i need to arrange my 8 image like below image in react native.(I need only 4 -rows,2 columns)
Please help me..
my code
`
container:{
backgroundColor: '#ccffcc',
flex:1,
flexDirection: ('row'),
//paddingTop: 40,
//alignItems :'center',
padding:10
},
button1:{
flex:1,
// width : 100,
// height: 100,
flexDirection:'row',
backgroundColor : '#ff9933',
//alignSelf:'flex-start',
marginTop: 70,
margin: 20,
//justifyContent:'center'
},
button2:{
//flex:1,
//flexDirection:'column',
alignSelf:'center',
//height :50,
//backgroundColor : '#ff9933',
//alignSelf:'flex-start',
margin: 20,
marginTop:-30,
//justifyContent:'center'
},
button3:{
//flex:1,
flexDirection: 'column',
// width : 100,
// height: 100,
backgroundColor : '#ff9933',
alignSelf:'flex-start',
// marginTop:100,
margin: 20,
justifyContent:'center'
},
button4:{
//flex:1,
// flexDirection: 'row',
//height :50,
//backgroundColor : '#ff9933',
alignSelf:'flex-start',
margin: 20,
// marginTop:30,
justifyContent:'center'
},
button5:{
flex:1,
flexDirection:'column',
// width : 100,
// height: 100,
backgroundColor : '#ff9933',
alignSelf:'flex-end',
//marginTop:50,
margin: 20,
justifyContent:'center'
},
button6:{
flexDirection:'column',
flex:1,
//height :50,
//backgroundColor : '#ff9933',
alignSelf:'flex-end',
margin: 20,
// marginTop:30,
justifyContent:'center'
},
button7:{
flexDirection:'column',
flex:1,
// width : 100,
// height: 100,
backgroundColor : '#ff9933',
alignSelf:'flex-end',
// marginTop:100,
margin: 20,
justifyContent:'center'
},
button8:{
flexDirection:'column',
flex:1, //height :50,
//backgroundColor : '#ff9933',
alignSelf:'flex-end',
margin: 20,
// marginTop:30,
justifyContent:'center'
},`

Answer 1

You can do this by calculating the width of the container, then simply dividing the width by the number of items you need per row:
Check out this example I set up, also pasted the code below.
"use strict";
var React = require("react-native");
var { AppRegistry, StyleSheet, Text, View, Dimensions, ScrollView } = React;
var width = Dimensions.get("window").width - 20;
var images = [1, 2, 3, 4, 5, 6, 7, 8];
var SampleApp = React.createClass({
render: function() {
var icons = images.map((image, i) => {
return (
<View key={i} style={styles.listItemContainer}>
<View style={styles.listItem}>
<Text style={{ backgroundColor: "transparent" }}>
Image {image}
</Text>
</View>
</View>
);
});
return (
<ScrollView style={{ flex: 1, paddingLeft: 10, paddingRight: 10 }}>
<View style={styles.container}>
<View style={styles.list}>{icons}</View>
</View>
</ScrollView>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1
},
list: {
flexDirection: "row",
flexWrap: "wrap",
flex: 1,
marginTop: 50
},
listItemContainer: {
width: width / 4,
height: width / 4
},
listItem: {
backgroundColor: "#ededed",
borderRadius: 15,
margin: 10,
flex: 1
}
});
AppRegistry.registerComponent("SampleApp", () => SampleApp);

Answer 2

you can use react native grid view here :
https://github.com/lucholaf/react-native-grid-view