DARNNavigator

Easiest way to navigate from any view to any other view in your React Native application. This is for all those beginners who were struggling to find an easy way to use the Navigator and NavigatorIOS isn't sufficient to fulfill their needs.

Usage

To be clear, this is more of a scheme rather than an external library.

• To start with copy the file DARNNavigator.js into the root of your project folder.
  in your index.ios.js or index.android.js add the reference
  

var Navigation = require('./DARNNavigator');

Delete everything from the return of the render method and add
<Navigation></Navigation> and you are all set up.

Initial View

So to have particular view as your initial view, lets say Home.js, give an id inside the constructor of Home.js

constructor(props) {
  super(props);
  this.state = {
	id:'home'
  }
  }

And in the DARNNavigator.js add a reference, by

• First add in the beginning
  

var Home = require('./Home');

• Assign initialRouteID = 'home'
  
• Inside navigatorRenderScene method add case -
  

case 'home':
	return (<Home navigator={navigator} route={route} title="Home"/>);

You are now all setup with your initial view. Run your project to test.

Navigation

Lets say we want to navigate to a DetailsPage.js view from Home, then you start by adding the reference to the DARNNavigator.js just as you did in case of Initial view.
Give the detailspage an id in its constructor.(Lets say 'details')
Add a case for this id in the DARNNavigator.js file.

To trigger the navigation,
you can either push or replace using

this.props.navigator.push({
      id: 'details'   
      });

This will push the detailspage over your Home page.

Passing Data

Push the props while navigating. For eg.

this.props.navigator.push({
      id: 'details',
      passProps: {
      // Your Props
      }
      });

In the 'details' view, get the data as

var dataFromLastPage = this.props.route.passProps;