title: Adjacent JSX elements must be wrapped in an enclosing tag
body: <p>I want to have a navigation bar at the bottom and a toolbar at the top of every page in my React-Native app. However, if I create these two elements in the index.ios.js file, I get the error: "Adjacent JSX elements must be wrapped in an enclosing tag". If I put  tags surrounding the Navigator and NavBar I just see a blank screen in my app. What should I do? Here is what my render function looks like in index.ios.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>render() {
      return (
        &lt;Navigator
          initialRoute={{name: 'Login'}}
          renderScene={this.renderScene}
          navigationBar={
            &lt;Navigator.NavigationBar
            style={ styles.nav }
            routeMapper={ NavigationBarRouteMapper } /&gt;
          }
          /&gt;
          &lt;NavBar /&gt;
      );
    }</code></pre>
  </div>
  </div>
  </p>