Ly Maneug Ly Maneug - 1 year ago 100
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>

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download