Position an image inside of a View - css

Question

I have a profile image in my header component and the source of it comes from database as a string array. What my problem is when i fetch user picture from database, it is slightly cutted from the top. So the head of user use looks like cutted. The image is in a view with borderRadius in order to make it circular.
What i tried:
resizeMode: 'cover',
resizeMode: 'contain',
position:'absolute',
bottom: 0,
and none of them are worked so far.
If you help me i will be appreciated,
thanks.
PS: i have looked several(more than 10) topics in stackoverflow and i could not make it.
Update
Here is my Header Component:
<View style={styles.container}>
<View style={styles.backButtonContainer} >
{isBackButtonIconVisible ? this._renderBackButtonIcon() : null}
</View>
<View style={styles.textContainer} >
<Text style={styles.text}>{text}</Text>
</View>
<View style={styles.profileButtonContainer}>
{isProfileIconVisible ? this._renderProfileIcon() : null}
{isProfilePictureVisible ? this._renderProfilePicture() : null}
</View>
</View>
Rendering Profile Picture:
_renderProfilePicture() {
let profileIcon = (
<View style={styles.profileButtonContainer} >
<CircularProfilePicture
onPress={this.props.onProfilePress}
ProfilePictureSourceUri={this.props.ProfilePictureSourceUri}
></CircularProfilePicture>
</View>
);
return profileIcon;
}
Here is my CircularProfilePicture component
class CircularProfilePicture extends Component {
render() {
const {onPress} = this.props;
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => onPress()}
>
<Image source={{ uri: 'data:image/png;base64,' + this.props.ProfilePictureSourceUri }}
style={styles.image} />
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10,
},
image:{
width: 55,
height: 60,
alignSelf: 'center',
resizeMode: 'cover',
}
});

Answer 1

try this:
padding:3px; // putting your image in the middle of div, setting in px the
value you need
position:absolute;
width: 200px; // the value that you have designed your div
height: 200px; //the value that you have designed your div
border-radius:30%; // set the value you need;
-moz-border-radius: 30%; //ancient mozzila versions
-webkit-border-radius:30%; //ancient chrome or Safari versions

Answer 2

If I understand you correctly I think the style props alignItems and justifyContent might help you center the Image inside the View. Either that or position the View absolute and use flex: 1 on the Image to make it take upp all available space in the View.