Image is overflowing outside the size of FlatList single grid - image

Question

I am currently working on making a grid using FlatList component of the react-native library. I am trying to insert images inside the grids formed inside the FlatList component, but when I am trying to insert the images, the images do not completely fill the particular grid, ther is always the down part of the image which is not displayed in the grid.
Code for the component:
import React, { Component } from 'react';
import { View , StyleSheet, FlatList, Text, Dimensions, Image } from 'react-native';
export const HomeGrid = () => {
return (
<FlatList
data={data}
renderItem={({item}) => (
<View style={styles.itemContainer}>
<Image
style={{flex: 1, width: size, height: size }}
source = {item.value}
/>
</View>
)}
keyExtractor={item => item.id}
numColumns={numColumns} />
);
}
const data = [
{id: 'a', value: require('../photos/photo3.jpg')},
{id: 'b', value: require('../photos/photo2.jpeg')},
{id: 'c', value: require('../photos/photo4.jpg')},
{id: 'd', value: require('../photos/photo3.jpg')},
{id: 'e', value: require('../photos/photo2.jpeg')},
{id: 'f', value: require('../photos/photo4.jpg')}
];
const numColumns = 2;
const size = Dimensions.get('window').width/numColumns;
const styles = StyleSheet.create({
itemContainer: {
width: size,
height: size,
},
item: {
flex: 1,
backgroundColor: 'lightblue',
}
});
What could be the workaround for this?