React native navigation – The better way

When you are learning react native, the inbuilt navigator of react native is good enough i.e.

http://facebook.github.io/react-native/releases/0.43/docs/navigator.html

and

http://facebook.github.io/react-native/releases/0.43/docs/navigatorios.html

Because while learning we only have to deal with few screens. But, when we move from learning stage to developing professional apps we find the inbuilt navigator quite cumbersome and not very systematic.

Now, there is a good navigation solution available which can be used to keep things tidy. React Navigation (https://www.npmjs.com/package/react-navigation) is a module that makes navigation from screen to screen very systematic, clean, and graceful.

Lets see how to use this module in our application.

First we need to install it using npm install command like this :

Next, we can use it in our index file of app like this :

Our login.js file looks like this :

And, our home.js file looks like this

Here is the demo of above code: