title: react native navigator view does not render
body: <p>I am making an simple iOS app using react-native and having some problems with navigator I delcared two views but got nothing rendered but a blank page
  The followed is my code:</p>
  
  <pre><code>'use strict';
  var Dimensions = require('Dimensions');
  
  import React, {
    Component,
    StyleSheet,
    MapView,
    Text,
    View,
    Animated,
    Navigator,
    TouchableHighlight,
    TouchableOpacity,
    Image,
    PropTypes,
    Modal
  
  } from 'react-native';
  
  var {
    height: deviceHeight,
    width: deviceWidth
  } = Dimensions.get('window');
  
  var BasicConfig = Navigator.SceneConfigs.FloatFromLeft;
  
  var CustomLeftToRightGesture = Object.assign({}, BasicConfig.gestures.pop, {
    snapVelocity:8,
    edgeHitWidth: deviceWidth,
  });
  
  
  var CustomSceneConfig = Object.assign({}, BasicConfig, {
    springTension: 100,
    springFriction: 1,
    gestures:{
      pop:CustomLeftToRightGesture,
    }
  });
  
  var MainMap = React.createClass({
  
    watchID: (null: ?number),
  
    getInitialState: function() {
      return {
        latitude: 0,
        longitude: 0,
        initialPosition: 'unknown',
        lastPosition: 'unknown',
      };
    },
  
    openMenu(){
      this.props.navigator.push({id: 2,});
    },
  
    render: function(){
        console.log("123456")
        return (
        &lt;View style = {styles.container}&gt;
          &lt;View style = {styles.TopBarContainer}&gt;
            &lt;TouchableOpacity style={styles.toolbarButton}
                onPress={this.openMenu}&gt;
                &lt;Text style={styles.toolbarButtonText}&gt;{"MENU"}&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
            &lt;Text style={styles.toolbarTitle}&gt;{"Simply Park"}&lt;/Text&gt;
            &lt;TouchableOpacity style={styles.toolbarButton}
                onPress={this.openSeacrh}&gt;
                &lt;Image source={require('image!search')} style={styles.toolbarSeacrhImage}/&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
          &lt;MapView
              style={styles.map}
              showsUserLocation={true}
              followUserLocation={true}
          /&gt;
        &lt;/View&gt;
        );
    }
  
  });
  
  
  var ControlPanel = React.createClass({
    _handlePress(){
      this.props.navigator.pop();
    },
  
    render: function() {
      console.log("paaaaaaaaanel")
      return (
        &lt;View style={styles.container}&gt;
          &lt;Text style={styles.controlText}&gt;{"Control Panel"}&lt;/Text&gt;
          &lt;TouchableOpacity style={styles.button} onPress={this._handlePress}&gt;
            &lt;Text&gt;{"Close Drawer"}&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      )
    }
  });
  
  var Main = React.createClass({
    _renderScene(route, navigator){
      if (route.id === 2){
        console.log("id is 2");
        return &lt;ControlPanel navigator={navigator} /&gt;
      }else{
        console.log("id is 1");
        return &lt;MainMap navigator={navigator} /&gt;
      }
    },
  
    _configureScene(route){
      return CustomSceneConfig;
    },
  
    render(){
      console.log("hihihihihihi");
      return(
      &lt;Navigator
        initialRoute={{
          id: 1,
        }}
        renderScene = {this._renderScene}
        configureScene = {this._configureScene}
      /&gt;
    );
    }
  
  });
  
  
  const styles = StyleSheet.create({
    container: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      justifyContent: 'flex-end',
      alignItems: 'center',
    },
  
    TopBarContainer:{
      position: 'absolute',
      backgroundColor: '#3b5998',
      top: 0,
      left: 0,
      right: 0,
      bottom: 580,
      flexDirection:'row'
    },
  
    toolbarButton:{
  
      paddingTop:35,
      paddingLeft: 7,
      width: 50,
      alignItems:'center'
    },
    toolbarButtonText:{
      paddingTop: 5,
      color:'#fff',
      fontWeight: 'normal',
      fontSize: 13,   
    },
  
    toolbarTitle:{
      paddingTop:35,
      color:'#fff',
      textAlign:'center',
      fontWeight:'bold',
      fontSize: 18,
      flex:1,
    },
  
    toolbarSeacrhImage:{
      paddingTop: 20,
      width: 18,
      height:18,
    },
  
    map: {
      position: 'absolute',
      top: 70,
      left: 0,
      right: 0,
      bottom: 0,
    },
    controlText: {
      color: 'white',
    },
    button: {
      backgroundColor: 'white',
      borderWidth: 1,
      borderColor: 'black',
      padding: 10,
      bottom: 500,
    },
  });
  
  module.exports = Main;
  </code></pre>
  
  <p>I put console.log() for debug use. The debug texts displayed properly on the debug xcode dubug console however the MainMap view is not displayed. I am wondering if this is a problem with my view styles but no clue after several tries.</p>