Make Image Fit Inside a View React native - react-native

Question

there's a gap above the Image inside the View. Im trying to make it fit the Image inside my View
My Output
What i want to achieve
Here is my code
import React from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import THEME from '../../constants/theme.constants';
import SmallButton from './SmallButton';
import default_pp from '../../assets/default_pp.png';
import thumbnail_post from '../../assets/thumbnail_post.png';
function PostServiceProvider({user, ratings, rate, description}) {
return (
<View style={styles.container}>
<View style={styles.headerPost}>
<Image source={default_pp} style={styles.profilePicContainer} />
<TouchableOpacity style={{marginLeft: 10}}>
<Text style={styles.priceText}>{user}</Text>
</TouchableOpacity>
<View style={{position: 'absolute', right: 5}}>
<Text>{ratings}</Text>
</View>
</View>
<View style={styles.cardContainer}>
<Image source={thumbnail_post} style={styles.thumbnailImg} />
<View style={styles.rateContainer}>
<Text style={styles.text}>Daily Rate: </Text>
<Text style={styles.priceText}>Php 400</Text>
<View style={styles.buttonContainer}>
<SmallButton label="Hire" />
</View>
</View>
<View style={styles.br} />
<View style={{padding: 20}}>
<Text numberOfLines={2} style={styles.text}>
{description}
</Text>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: '100%',
borderRadius: 50,
borderColor: 'transparent',
marginTop: 20,
},
headerPost: {flexDirection: 'row', alignItems: 'center'},
profilePicContainer: {
height: 40,
width: 40,
borderRadius: 50,
borderWidth: 1,
},
cardContainer: {
width: '100%',
flex: 1,
borderColor: 'rgba(0,0,0,0.2)',
borderRadius: 10,
borderWidth: 0.5,
marginTop: 10,
alignItems: 'center',
},
thumbnailImg: {width: '100%', height: 300},
rateContainer: {
flexDirection: 'row',
alignItems: 'center',
width: '100%',
padding: 20,
},
buttonContainer: {width: '22%', position: 'absolute', right: 15},
br: {height: 1, width: '90%', backgroundColor: 'rgba(0,0,0,0.1)'},
text: {color: THEME.FONT_FADE},
priceText: {fontWeight: 'bold', fontSize: 17},
});
export default PostServiceProvider;

Answer 1

Add resizeMode="cover" props in your image component like this :
... your previous code
<View style={styles.cardContainer}>
<Image source={thumbnail_post} style={styles.thumbnailImg} resizeMode="cover" />
... your rest of code