35

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

8 Answers 8

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.

2
  • 1
    @mrborgen This would be a nice and neat answer. You don't you go ahead and mark this one?
    – Jack
    Commented Jul 14, 2015 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
    Commented Oct 30, 2016 at 18:11
18

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

3
  • I just tried, but then I just get a white screen. The Navigator header is gone too... Do you know why?
    – mrborgen
    Commented Mar 31, 2015 at 12:01
  • Thanks. How did you even think to do that? Do you have any idea why? Commented Jul 1, 2015 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. Commented Jul 7, 2015 at 4:47
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.

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

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);
2
  • MyView is not displaying in navigation, only navigation is displaying
    – sandy
    Commented Apr 4, 2016 at 9:41
  • 1
    This is the only answer that helped me. Important is the style.container in NavigatorIOS.
    – Boomerange
    Commented Oct 6, 2016 at 10:17
1

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

1
  • No... background should mean behind the component. I think you were fine. In native iOS the navigator doesn't really even have a view. Commented Jul 1, 2015 at 17:56
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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.