Keeping a component 50% bottom to its top component - css

Question

I'm trying to make a profile page ui, Where the profile data like name and bio container will stay 50% to the bottom of its top component which is cover picture right now.
So this is my React Native code,
<View style={styles.container}>
<View style={styles.coverContainer}>
</View>
<View style={styles.profileDataContainer}>
</View>
<View style={styles.intrestsContainer}>
</View>
<View style={styles.topicsContainer}>
</View>
</View>
And current styles,
const styles = StyleSheet.create({
container: {
},
coverContainer: {
height : 200,
backgroundColor : 'blue'
},
profileDataContainer: {
marginHorizontal : 30,
backgroundColor: 'white',
height : 200,
shadowColor: "#e5e5e5",
shadowOffset: {
width: 0,
height: 2
},
shadowRadius: 2,
shadowOpacity: 1.0,
elevation : 4,
marginTop : -100,
}
});
I have added marginTop : -100 to make it look like the structure I want.
So this is what it looks like right now after adding marginTop to -100, But that's not responsive, When I increase the size of that white block. It doesn't stay in center anymore.
Need Help on how to do that :(

Answer 1

You can do it using percentage instead of logical pixels like in this example :
const WindowHeight = Dimensions.get('window').height;
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.headerBackground}/>
<View style={styles.header}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: 'grey',
},
headerBackground: {
height: '30%',
width: '100%',
backgroundColor : 'blue'
},
header: {
height: '30%',
width: '80%',
marginTop: WindowHeight * -0.15,
backgroundColor : 'white'
}
});
In this example I set the height of the blue background and the white header to 30% of the window's height, and the marginTop to -15% of the window's height (I have to use Dimensions because if I use a percentage it'll be the percentage of the width...)
You can run my example on snack : https://snack.expo.io/Hyd7ChplX

Answer 2

You can nest your profileDataContainer in your coverContainer and place it absolute with top 50%. Hope you can convert it yourself to your React Native code...
Example:
.coverContainer{
height: 200px;
background-color: blue;
position: relative;
width: 100%;
}
.profileDataContainer {
position: absolute;
right: 10%;
left: 10%;
display: block;
top: 50%;
background-color: red;
height: 200px;
}
<div class="coverContainer"><div class="profileDataContainer"></div></div>