I am encountering an issue with my profile image in the header component. The source of the image is coming from the database as a string array. However, when I fetch the user picture from the database, it appears slightly cut off from the top, giving the impression that the user's head is cut off. The image is displayed in a view with borderRadius to create a circular shape.
Attempts I have made to resolve the issue:
resizeMode: 'cover',
resizeMode: 'contain',
position:'absolute',
bottom: 0,
Unfortunately, none of these solutions have worked so far.
Any assistance with this issue would be greatly appreciated. Thank you.
PS: I have searched through numerous (more than 10) topics on StackOverflow but have been unable to find a solution.
Update
Below 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;
}
Below 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',
}
});