React-native: NavigatorIOS component not visible when used within TabBarIOS

[hacksparrow]

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)

[angeloashmore]

I think this may be an issue with your styles as I have been able to implement what you are trying.

Try this out and see if it comes into view:

var styles = StyleSheet.create({

  // ...

  view: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
  }

  // ...

});

[hacksparrow]

Thanks for the suggestion, but it didn't have any effect. Maybe share a simplified version of your implementation?

[kennydee]

Got the same problem here with a simpler version maybe :
Just replace the index.ios.js of a new project by this :

'use strict';

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

var myPage = React.createClass({
  render: function () {
    return (
      <View>
        <Text>Hello</Text>
        <Text>World</Text>
      </View>
    )
  }
})

var tabBar = React.createClass({
  render: function() {
    return (
       <TabBarIOS>
        <TabBarIOS.Item title="React Native" selected={true}>
          <NavigatorIOS initialRoute={{ title: 'React Native', component: myPage }} />
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  }
});

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

Thanks

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

[tjwudi]

@nickhudkins Good solution, thanks! I am facing this issue too. But the paddingTop: 64 appears to be a magic number, somehow. Is there any way to automatically inset view inside NavigatorIOS?

[kennydee]

@nickhudkins Good catch. Thanks !
Now this works :

'use strict';

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

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

var tabBar = React.createClass({
  render: function() {
    return (
       <TabBarIOS>
        <TabBarIOS.Item title="React Native" selected={true}>
          <NavigatorIOS style={styles.nav} initialRoute={{ title: 'React Native', component: myPage }} />
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  }
});

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

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

I think this is a little tricky anyway, and before closing this issue, maybe we can improve this ?
Maybe with a little bit of clarification in the docs ? or better, maybe do something in NavigatorIOS as what @tjwudi said ?

This is problematic i think for new users, because, this is basically the first example of React Native code you will see on the http://facebook.github.io/react-native/ website :) !

thanks all

[hacksparrow]

This is clearly a documentation issue; #504 is also related to this.

As of now, the flex property is always required for NavigatorIOS to display its content. I will find the relevant doc file and send a PR.

Closing this.

[elado]

@hacksparrow Aside from the docs issue, @tjwudi has a good point about paddingTop: 64 being a magic number.

[nickhudkins]

@elado, 64 may be a magic number in this case, but, the ability to place content under the header (since translucency is now a thing) is a feature and therefore the developer should be responsible for ensuring what content should display unobstructed by the header. It is a documented number, and not one that is worth querying for unless apple plans on releasing a new nav bar height sometime soon. (In my personal opinion). If this number COULD vary I would say let's do something different but I believe it can be treated effectively as a constant. That is, until apple releases iOS 12 and all of this goes out the window ;)

[bigparksh]

64 is just a magic number. It'll probably cause problems in future cases. You could solve the issue by wrapping the View within ScrollView in the render function.

<ScrollView>
    <View>
    </View>
</ScrollView>

[hzhu]

:+1: @nickhudkins

[jerry-sjtu]

@nickhudkins Thanks for saving my time.