I am encountering an issue in React Native where a child view inside another view is not centering in the middle of the page. However, if the child view is not nested inside the parent view and stands alone, it does center properly in the middle of the page.
How can I adjust this so that the child view centers to the middle of the page while still being nested inside another view (parentView)?
Below is the code snippet:
render() {
return (
<View id="parentView">
<View
id="childView"
style={
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
>
<Text>Center This to Middle of Page</Text>
</View>
<View
id="childViewTwo"
>
<Text>Don't center me</Text>
</View>
</View>
);
}