Image Background Usage

Question

I am working on a mobile app project with react-native. I got stuck when I was doing the profile screen styling. I want it to look like this image but I can not figure out how to layout the image background and avatar placement like this. If I go for image height and width, image gets half of its height and if a go for flex I couldn't place avatar inside of the image background.

Answer 1

you need to use resizeMode="cover" in your ImageBackground this will scall image from center read docs here

and put profile image inside ImageBackground with position : 'absolute'

set status bar props to hide status bar background color

this is the code

first import { View, ImageBackground, Image, StatusBar } from "react-native";

<View style={{flex : 1}}>

        <StatusBar barStyle="dark-content" backgroundColor="transparent" translucent/>

        <ImageBackground
            style={{width : '100%', aspectRatio : 1.6}}
            resizeMode="cover"
            source={{uri : /*your cover image url here*/}}>

            <View style={{
                position : 'absolute',
                bottom : -50,
                height : 100,
                width : 100,
                borderRadius : 50,
                overflow : 'hidden',
                alignSelf : "center",
                borderWidth : 1,
                borderColor : "#aaa"}}>

                <Image
                    source={{uri : /*your profile image url here*/}}
                    style={{height : 100, width : 100}}/>

            </View>

        </ImageBackground>
    </View>

and this my results

Answer 2

Have you tried using height: '100%' and width: '100%' in your ImageBackground style?