React Native Image front of other view - css

Question

I want to write stylesheet to display a loyout like this image:
avatar:
And I write code like this:
<View style={styles.header}></View>
<View style={styles.meInfor}>
<Image style={styles.avatar}
source={require('../../images/cristiano-ronaldo.jpg')} />
</View>
and style:
header:{
width: width,
height: 100,
backgroundColor: '#1270BA',
},
meInfor:{
width: width,
backgroundColor: '#FFFFFF',
alignItems: 'center',
justifyContent: 'center',
},
avatar: {
marginTop: -50,
width: 100,
height: 100,
borderRadius: 100,
}
I use marginTop: - 50 to pull the avatar to top, but the result like this:
bad result:
How can i do to style this avatar like the first image?

Answer 1

Try this code it run well on my case
Component
import React, { Component } from 'react';
import { Text, Image, View, StyleSheet, Dimensions } from 'react-native';
export default class App extends Component {
render() {
const {header, meInfor, avatar, container} = styles;
return (
<View style={container}>
<View style={header}></View>
<View style={meInfor}></View>
<Image style={avatar}
source={{uri: 'http://infosahabat.com/wp-content/uploads/2015/12/Permainan-Bola-Besar.jpg'}}
/>
</View>
);
}
}
And this for the style
Style
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'lightgray',
},
header:{
height: 100,
backgroundColor: '#1270BA',
},
meInfor:{
backgroundColor: '#FFF',
top: 0,
height: 50,
width: (Dimensions.get('window').width),
},
avatar: {
position: 'absolute',
top: 50,
left: (Dimensions.get('window').width / 2) - 50,
alignItems: 'center',
width: 100,
height: 100,
borderColor: 'black',
borderWidth: 1,
borderRadius: 100,
}
});

Answer 2

Change your stylesheet like this
header : {
width: width,
height: 100,
backgroundColor: '#1270BA'
},
meInfor : {
position: 'absolute',
width: width,
alignItems: 'center',
justifyContent: 'center'
},
avatar : {
marginTop: 50,
width: 100,
height: 100,
borderRadius: 100
}