Overlapping an icon on React Native - css

Question

I'd like to have an element overlapping onto an image in react native. I'm new in react native but could do this in CSS in 3 lines of code:
container in position relative.
element in position absolute + bottom: 20px.
Here is my react native code and a screenshot of what it looks like.
<ScrollView style={styles.container}>
<Image
style={styles.profileImage}
source={{uri: blabla}}
/>
<View style={styles.iconContainer}>
<ActionIcon
name={'mode-edit'}
color={colorBrand}
onPress={() => console.log('test')}
/>
</View>
<List containerStyle={styles.list}>
<ListItem
title={'Account Settings'}
/>
<ListItem
title={'Notifications'}
/>
<ListItem
title={'Terms & Conditions'}
/>
<ListItem
title={'Privacy Policy'}
/>
<ListItem
title={'Log Out'}
/>
</ScrollView>
and StyleSheet:
const styles = StyleSheet.create({
container: {
flex: 1
},
profileImage: {
height: 250
},
list: {
borderTopWidth: 0,
flex: 1,
marginTop: 0
},
iconContainer: {
alignSelf: 'flex-end',
right: 10,
bottom: 40,
marginBottom: -60,
zIndex: 1
}
})
So it looks like:
So it looks like exactly like I want it. But I am not liking that zIndex, nor that negative bottomMargin.
I first tried with a container of the iconContainer in position relative, then the iconContainer in position absolute. But to have it displayed you had to set a height. Then you have a white space full width and of the set height with the icon at the right. Which pushes the list down and adds a big white space.
Is there any other options?
Cheers

Answer 1

Add the css property, position: 'absolute' to the element you want to overlap.

Answer 2

I will suggest you to wrap your image and icon in a div and then play with position css
Stack Snippet
.wrapper {
margin-bottom: 40px;
position: relative;
display: inline-block;
}
.wrapper i {
position: absolute;
right: 20px;
bottom: -25px;
width: 50px;
height: 50px;
background: #5ab985;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 50px;
border-radius: 50%;
}
.wrapper img {
display: block;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="wrapper">
<img src="http://lorempixel.com/200/200/sports">
<i class="material-icons">mode_edit</i>
</div>