Ly Maneug Ly Maneug - 1 month ago 7x
React JSX Question

React Native: Why don't flex justifyContent and alignItems work for child <View/>?

In React Native, I have a child view inside another view, but it doesn't center in the middle of the page. But if the child view is not inside the parent view and alone, it centers fine in the middle of page.

How can I make it so that the child view centers to the middle of the page while being inside another view (parentView)?

Here is the code:

render() {

return (
<View id="parentView">
flex: 1,
justifyContent: 'center',
alignItems: 'center',
<Text>Center This to Middle of Page</Text>
<Text>Don't center me</Text>


Just add flex:1 to your parent View. I made a working example for you: