title: why does react native display a scene above a navigator navbar component?
body: <p>Consider this screenshot,</p>
  
  <p><a href="https://i.stack.imgur.com/PtYwl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PtYwl.png" alt="enter image description here"></a>
  The white area on top represents a generic <code>&lt;View&gt;</code> component while the green/blue combination represents an app specific <code>&lt;NavBar&gt;</code> component mounted to the <code>&lt;Navigation&gt;</code> obj by setting the prop <code>navigationBar=</code></p>
  
  <p>main code from index.ios.js </p>
  
  <pre><code>var {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      Navigator,
  } = React;
  
  var styles = StyleSheet.create({
      mainContent:{
          flex:1
      },
  });
  
  class BioStream extends React.Component{
      render() {
          return (
              &lt;Navigator navigationBar={&lt;NavBar /&gt;} renderScene={ (route, nav) =&gt; &lt;View style={styles.mainContent}&gt;&lt;Text&gt;'some text'&lt;/Text&gt;&lt;/View&gt;  } /&gt;
          );
      }
  };
  
  AppRegistry.registerComponent('BioStream', () =&gt; BioStream);
  </code></pre>
  
  <p>and main code from the <code>NavBar</code> component definition file, </p>
  
  <pre><code>var React = require('react-native');
  
  var {
      AppRegistry,
      StyleSheet,
      Text,
      View,
  } = React;
  
  var styles = StyleSheet.create({
      mainContainer:{
          flex:1
      },
  
      toolbar:{
          backgroundColor:'#81c04d',
          paddingTop:20,
          paddingBottom:10,
          flexDirection:'row',
          borderColor: 'black',
          borderWidth: 1
      },
  
      toolbarButton:{
          width: 50,
          color:'#fff',
          textAlign:'center'
      },
  
      toolbarTitle:{
          color:'#fff',
          textAlign:'center',
          fontWeight:'bold',
          flex:1
      },
  
      content:{
          backgroundColor:'blue',
          flex:1                //Step 2
      }
  });
  
  class NavBar extends React.Component{
      render() {
          return (
           &lt;View style={styles.mainContainer} &gt;
              &lt;View style={styles.toolbar}&gt;
                  &lt;Text style={styles.toolbarButton}&gt;Add&lt;/Text&gt;
                  &lt;Text style={styles.toolbarTitle}&gt;This is the title&lt;/Text&gt;
                  &lt;Text style={styles.toolbarButton}&gt;Like&lt;/Text&gt;
              &lt;/View&gt;
              &lt;View style={styles.content}&gt;
              &lt;/View&gt;
           &lt;/View&gt;
          )
      }
  };
  
  module.exports = NavBar;
  </code></pre>
  
  <p>What am I failing to understand about how this layout (and/or the general nature of react native layouts) should be constructed?  It is my intent to place the navbar consistently in all scenes at the top of the frame and have all scene content/code get rendered below.</p>