React Native Grid View : Image messes up the view - ios

Question

I'm building an app that requires a Grid View. So far my grid works fine as you can see on the image below, the red squares are well positioned. Though, when I add an image in each box, it messes up the grid (second picture). Any ideas why ?
This is the screenshots (first image works fine with margins and is centered)
Second image has no more margins in the middle and on the right side
And this is the code that generates the view :
renderData = (data) => {
return (
<View style={styles.box}>
<Text style={styles.boxText}>{data.name}</Text>
// This is what I add to display the image
<Image
source={data.image}
style={styles.boxImage} />
</View>
);
}
renderPage() {
return (
<View style={styles.container}>
<TouchableHighlight style={styles.filterButton}>
<Text style={styles.filterButtonMessage}>
Occasions
</Text>
</TouchableHighlight>
<ListView contentContainerStyle={styles.list}
dataSource={this.state.data2}
renderRow={this.renderData} />
</View>
);
}
var styles = StyleSheet.create({
container: {
flex: 1,
},
list: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center'
},
box: {
width: 150,
backgroundColor: 'red',
height: 150,
alignItems: 'stretch',
margin: 3
},
boxImage: {
flex: 1
},
boxText: {
flex: 1,
fontWeight: '900',
fontSize: 15,
color: 'white',
position: 'absolute',
bottom: 5,
right: 5,
backgroundColor: 'rgba(0,0,0,0)'
}
});

Answer 1

have you tried...
boxImage: {
flex: 1,
width: 150,
height: 150,
},