title: React-native flex - View element does not display
body: <p>I am learning RN and am practising layouts with flex. In the code below the View element with text LOGO appears in the 'footer' but does not render in 'header'.</p>
  
  <pre><code>/**
   * Sample React Native App
   * https://github.com/facebook/react-native
   * @flow
   */
  
  import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    TextInput,
    View
  } from 'react-native';
  
  export default class groceryApp extends Component {
    constructor(props) {
      super(props);
      this.state = {text: 'myState'};
    }
    render() {
      return (
        &lt;View style={styles.container}&gt;
  
          &lt;View style={styles.header}&gt;
            &lt;View style={styles.leftbox}&gt;
              &lt;Text&gt;LOGO&lt;/Text&gt;
            &lt;/View&gt;
          &lt;/View&gt;
  
          &lt;View style={styles.main}&gt;
            &lt;View style={styles.box}&gt;&lt;Text&gt;111&lt;/Text&gt;&lt;/View&gt;
            &lt;View style={styles.box}&gt;&lt;Text&gt;{this.state.text}&lt;/Text&gt;&lt;/View&gt;
            &lt;View style={styles.box}&gt;&lt;/View&gt;
            &lt;View style={styles.box}&gt;&lt;/View&gt;
            &lt;View style={styles.box}&gt;&lt;/View&gt;
            &lt;View style={styles.box}&gt;&lt;/View&gt;
          &lt;/View&gt;
  
          &lt;View style={styles.footer}&gt;
            &lt;View style={styles.leftbox}&gt;
              &lt;Text&gt;LOGO&lt;/Text&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'center', // or 'space-between'
      alignItems: 'stretch',
      // 'flex-start', 'flex-end', 'stretch', 'center'
      // for 'stetch' you have to remove fixed size from secondary from elements
    },
    header: {
      height: 200,
      backgroundColor: 'powderblue',
      flex: 1,
      flexDirection: 'row',
      alignItems: 'flex-start',
    },
    main: {
      height: 450,
      backgroundColor: 'skyblue',
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
      flexWrap: 'wrap',
    },
    footer: {
      height: 200,
      backgroundColor: 'steelblue',
      flex: 1,
      flexDirection: 'row',
      alignItems: 'flex-start',
    },
    box: {
      height: 100,
      width: 100,
      margin: 5,
      backgroundColor: 'green',
    },
    leftbox: {
      height: 50,
      width: 50,
      backgroundColor: 'green',
    },
  });
  
  AppRegistry.registerComponent('groceryApp', () =&gt; groceryApp);
  </code></pre>
  
  <p>What am I missing here? The footer and header class seem identical so how is it different?</p>