alignItems not working correctly. React Native flexbox yoga [duplicate]

Here is the code example: Expected behavior is that it should show a view with a green background. When alignItems: 'center' is set on the container, the view with a green background is not shown. Removing alignItems: 'center' from the container style shows green view. Can someone explain why it's working like that, and is that not a bug in layout system? Thanks in advance.

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';


export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
       <View style={{flex: 1, backgroundColor:'green'}}>
       </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});