Navigator and Custom navigationBar

[iq-dot]

Hi guys,

I am trying to use the Navigator to create a custom navigation bar by supplying my own view however I am not sure I am doing it right, here is my code:

      <Navigator
          style={styles.wrapper}
          navigationBar={MyNav}
          initialRoute={{
          component: MyView,
          title: 'MyTitle'
          }}
        renderScene={(route, navigator) =>
          React.createElement(route.component, {navigator})
        }
          />

...

var MyNav = React.createClass({
  render: function(){
    return (
        <View><Text>NavBar</Text></View>
    );
  }
});

What I end up getting is a small section at the bottom, am I meant to style it and put it at the top? Any styling tips here appreciated.

Also how do I get access to the 'route' object passed in to the navigator? If I log this.props, it has 'MyTitle' on the output along with other stuff but I am not quite sure what the object key is to access it.

Any help on this appreciated as I couldn't get much on the docs.

[mwilc0x]

I really like using using react-native-navbar with Navigator

If you're interested in rolling your own you could look at his component to get an idea how he is styling it. If you wanted to use that, you could do someting like:

var NavigationBar = require('react-native-navbar');

<Navigator
  style={styles.wrapper}
  navigationBar=<NavigationBar title="NavBar" />
  initialRoute={{
    component: MyView,
    title: 'MyTitle'
  }}
  renderScene={(route, navigator) =>
    React.createElement(route.component, {navigator})
  }
 />

[iq-dot]

Thanks I'll look into that one