How to display half of the image over another image in react native

Question

I am making an app in react-native in which I have to display the profile pic of the user . I want to make UI of somewhat this type . As in the image attached we can see that the profile pic is slightly shifted upward which is having image background.

I have written code but the whole profile pic is shifted above

render() {

        return (
            <Container style={{ backgroundColor: '#FFFFFF', }}>




                <Content>



                    <Image source={{ uri: 'https://firebasestorage.googleapis.com/v0/b/reactnativechatapp-6f7eb.appspot.com/o/Ontro%20Copy%209.png?alt=media&token=2ede2451-0a14-4988-a9e2-ba88bab2c844' }}
                        style={styles.image}>



                        <View style={{
                            flexDirection: 'row', alignItems: 'flex-end', marginTop: 15,
                            justifyContent: 'flex-start', marginLeft: 20,
                            flex: 1
                        }}>
                            <Thumbnail source={{ uri: 'https://placeimg.com/640/480/people' }} />

                        </View>


                    </Image>






                    <View style={{
                        flexDirection: 'row', alignItems: 'flex-start',
                        justifyContent: 'flex-start', marginLeft: 40,
                        backgroundColor: '#FFFFFF', flex: 1
                    }}>


                        <View style={{ flexDirection: 'column', marginTop: 10, marginBottom: 15 }}>
                            <Text style={{ color: '#9F2232', marginLeft: 15, fontSize: 22, }}>Cecelia Fletcher</Text>


                            <Text style={{ color: '#9E9C9E', marginLeft: 15, fontSize: 12, }}>West Mambalam</Text>
                        </View>



                    </View>

                    <Separator />

How to make this type of UI for profile picture which is in the image attached.

Answer 1

If your profile image is going to be of the same height and width you can give your thumbnail position absolute and give it a top value and a left value to give the same result.

EDIT

render() {

    return (
        <Container style={{ backgroundColor: '#FFFFFF', }}>




            <Content>



                <Image source={{ uri: 'https://firebasestorage.googleapis.com/v0/b/reactnativechatapp-6f7eb.appspot.com/o/Ontro%20Copy%209.png?alt=media&token=2ede2451-0a14-4988-a9e2-ba88bab2c844' }}
                    style={styles.image}/>


                 <View style={{
                        flexDirection: 'row', alignItems: 'flex-end', 
                        marginTop: 15,
                        justifyContent: 'flex-start', marginLeft: 20,
                        flex: 1,
                        position: 'absolute',
                        top: 30,
                        left: 16,
                    }}>
                        <Thumbnail source={{ uri: 'https://placeimg.com/640/480/people' }} />

                    </View>




                <View style={{
                    flexDirection: 'row', alignItems: 'flex-start',
                    justifyContent: 'flex-start', marginLeft: 40,
                    backgroundColor: '#FFFFFF', flex: 1
                }}>


                    <View style={{ flexDirection: 'column', marginTop: 10, marginBottom: 15 }}>
                        <Text style={{ color: '#9F2232', marginLeft: 15, fontSize: 22, }}>Cecelia Fletcher</Text>


                        <Text style={{ color: '#9E9C9E', marginLeft: 15, fontSize: 12, }}>West Mambalam</Text>
                    </View>



                </View>

                <Separator />

Try this. I basically removed your thumbnail from the image tag and gave it a position absolute. You can mess around with the top and left items.