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);

score 62 · Answer 1 · answered Mar 31 '15 at 14:14

62

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.

answered Mar 31 '15 at 14:14

Kevin Whitaker

12,435
12
51
89

1

@mrborgen This would be a nice and neat answer. You don't you go ahead and mark this one? – Jack Jul 14 '15 at 20:36
There is nothing magic about 'wrapper'. Indeed, the samples pass ```style = {{flex: 1}}``` to the NavigatorIOS JSX. Definitely subtle though. It would be nice for this to be called out as compulsory. – MattD Oct 30 '16 at 18:11

score 18 · Answer 2 · answered Mar 31 '15 at 11:55

18

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

answered Mar 31 '15 at 11:55

deanmcpherson

738
5
8

I just tried, but then I just get a white screen. The Navigator header is gone too... Do you know why? – mrborgen Mar 31 '15 at 12:01
Thanks. How did you even think to do that? Do you have any idea why? – Sean Clark Hess Jul 01 '15 at 17:52
React native styling uses the flexbox model with a few changes, the flex: 1 property is simply telling the component to use all of the available space. Its similar to saying 100% height in this instance. – deanmcpherson Jul 07 '15 at 04:47

score 9 · Answer 3 · answered Apr 07 '15 at 14:27

9

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.

answered Apr 07 '15 at 14:27

ilansas

5,899
6
21
27

This worked for me, looks like you were following the react-native tutorials on egghead.io :P – Jayem Sep 10 '16 at 13:42

score 6 · Answer 4 · answered Mar 31 '15 at 12:45

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);

MyView is not displaying in navigation, only navigation is displaying — sandy, Apr 04 '16 at 09:41
This is the only answer that helped me. Important is the style.container in NavigatorIOS. — Boomerange, Oct 06 '16 at 10:17

score 1 · Answer 5 · answered Jun 16 '16 at 13:38

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',
  }
});

score 0 · Answer 6 · answered Apr 09 '15 at 02:52

0

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.

answered Apr 09 '15 at 02:52

koriner

113
2
7

No... background should mean behind the component. I think you were fine. In native iOS the navigator doesn't really even have a view. – Sean Clark Hess Jul 01 '15 at 17:56

score 0 · Answer 7 · answered Dec 01 '15 at 06:55

0

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

answered Dec 01 '15 at 06:55

passol

195
4
12

score 0 · Answer 8 · answered May 07 '17 at 22:05

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',
}}/>

Component won't render within NavigatorIOS - React Native

8 Answers8