CODEWITHSUNDEEP
cssreactjsreact-native
AlkanV
AlkanV

Reputation: 501

Position an image inside of a View

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',
    }
});

Upvotes: 0

Views: 504

Answers (2)

Johannes Nyman
Johannes Nyman

Reputation: 319

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.

Upvotes: 0

FGalanB
FGalanB

Reputation: 7

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

Upvotes: 1

Related Questions