How To: Side Menu

Hey All,

I wanted to add this as it was needed for a side menu to work properly. I was able to get it working using a commit provided by @johnmorehouse - thanks! Essentially this allows you to open a route from the MAIN Section of your App (where the actual Router is defined). Since we use customAction to open a menu, that is in the main section, therefore requires something like this to work properly.

Basically you need to add this below the "onForward" function in the index.js of the react-native-router module. It is important to note the use of "replace" instead of "push" - this is because push will cause errors if navigating to the same scene more than one time. Using "replace" does seem to kill the animation though! :

openRoute: function(route) {
    route.index = this.state.route.index + 1 || 1;
    this.refs.navigator.replace(route);
},

Then create a ref="navigator" to the navigator component towards the bottom of index.js:

  <Navigator
    ref="navigator"
    initialRoute={this.props.firstRoute}
    navigationBar={navigationBar}
    renderScene={this.renderScene}
    onDidFocus={this.onDidFocus}
  />

Now when you create your make sure you add a ref for it:

 <Router ref="router" headerStyle={styles.router} firstRoute={toHomeTiles} customAction={this.openMenu} />

And you can now tell the router to open a specific scene easily from any function in your top-level component:

this.refs.router.openRoute(newRoute);