Component won't render within NavigatorIOS - React Native - ios

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.

Answer 4

I had the same issue. Turned out I had to add some margin to the top of the view inside the MyView component.
Try this:
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
NavigatorIOS,
Text,
View,
} = React;
var navigation = React.createClass ({
render: function() {
return (
<NavigatorIOS
style={styles.container}
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.wrapper}>
<Text style={styles.welcome}>
Hello there, welcome to My View
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
},
wrapper: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
marginTop: 80
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
AppRegistry.registerComponent('navigation', () => navigation);

Answer 5

I meet the same problem. For me, that is the style problem. I create and use a new style property containerNV for NavigatorIOS. That solved my problem.
var styles = StyleSheet.create({
containerNV: {
flex: 1,
backgroundColor: '#05FCFF',
}
});

Answer 6

I had a similar issue too (stupidly) as I'd given the NavigatorIOS a background colour, which meant it covered up the actual component inside it for some reason.

Answer 7

I had a similar issue when I use Navigator , and nothing help of up answers.
So I use this.forceUpdate(); to force Update in button press function

Answer 8

Had the same issue. Nothing was rendering inside my main screen. After 2 hours I decided to remove the <View> element I was wrapping my navigator with, and suddenly everything worked.
In a nutshell, I went from this:
<View>
<NavigatorIOS
style={styles.container}
initialRoute={{
component: MainPage,
title: 'MainPage',
}}/>
</View>
to this
<NavigatorIOS
style={styles.container}
initialRoute={{
component: MainPage,
title: 'MainPage',
}}/>