NavigatorIOS component not visible when used within TabBarIOS

The NavigatorIOS component is rendered but not visible when used within TabBarIOS. However, it is visible in the Chrome and Xcode debuggers.

Rendered App

Chrome Debugger View

Xcode Captured View Hierarchy

App Code

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TabBarIOS,
  NavigatorIOS
} = React;

var ApplePage = React.createClass({
  render: function () {
    return (
      <View style={styles.view}>
        <Text style={styles.text}>Hello</Text>
        <Text style={styles.text}>World</Text>
      </View>
    )
  }
})

var MainView = React.createClass({

  getInitialState: function() {
    return {
      selectedTab: 'appleTab',
      notifCount: 0,
      presses: 0,
    };
  },

  render: function () {
    return (

      <TabBarIOS>
        <TabBarIOS.Item
          title="Apple Tab"
          icon={_icon('more')}
          selected={this.state.selectedTab === 'appleTab'}
          onPress={() => {
            this.setState({
              selectedTab: 'appleTab',
            });
          }}>

          <NavigatorIOS
            initialRoute={{
              title: 'Apple',
              component: ApplePage,
            }}
          />

        </TabBarIOS.Item>
      </TabBarIOS>
    )
  }
})

function _icon(imageUri) {
  return {
    uri: imageUri,
    isStatic: true
  };
}

var styles = React.StyleSheet.create({
  text: {
    color: 'black',
    backgroundColor: 'white',
    fontSize: 50,
    marginTop: 100
  },
  container: {
    flex: 1
  }
})

AppRegistry.registerComponent('MartialApp', () => MainView)

[nickhudkins]

The View that NavigatorIOS creates has no dimensions, toss a style that has {flex: 1} on it, and paddingTop: 64, flex: 1 on the myPage View and you’ll be all set 😃

var styles = StyleSheet.create({
  nav: {
    flex: 1
  },
  myPage: {
    flex: 1,
    backgroundColor: 'orange',
    paddingTop: 64
  }
});

[jerry-sjtu]

@nickhudkins Thanks for saving my time.