Component won't render within NavigatorIOS - React Native

Question

I can't get this simple NavigatorIOS test to work. The console log in My View triggeres, and I can get it to render if I skip the NavigatorIOS component, and render MyView directly. However, when MyView is triggered from a component within the NavigatorIOS component, it won't render anything else than 'My NavigatorIOS test'.

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


 var navigation = React.createClass ({
  render: function() {
    return (
      <NavigatorIOS
            initialRoute={{
              component: MyView,
              title: 'My NavigatorIOS test',
              passProps: { myProp: 'foo' },
      }}/>
    );
  },
});


var MyView = React.createClass({
  render: function(){
    console.log('My View render triggered');
    return (
        <View style={styles.container}>
        <Text style={styles.welcome}>
          Hello there, welcome to My View
        </Text>
      </View>
    );
  }
});


var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});


AppRegistry.registerComponent('navigation', () => navigation);

Answer 1

I had a similar problem. I added the following to my Stylesheet:

...
wrapper: {
  flex: 1,
}...

and then gave the NavigatorIOS component the wrapper style. That fixed the issue.

Answer 2

Add the container style to NavigatorIOS, it needs to be flex:1 to show the child component properly ( I had the same issue).

Answer 3

I ran into the same issue, my mistake was in the styles :

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

I had to remove justifyContent and alignItems from there. Problem solved for me.