Handling navigation in react native

reactlogo
reactlogo

Handling navigation in react native has been quite an issue for me and my colleagues since juggling from navigator to navigationExperimental then trying reactnative router flux and many routing solutions made our projects a real mess especially while handling back button functionalities for android side.There is always that little performance/experience gap which gets left behind when you compare navigation experience between native apps and JS native apps when your apps are complex and have to display heavy content.

Recently I came across sample movie app created by June Domingo.(You can find the link to try out the app on android from his github page here) and felt that the navigation used by the app was almost close to native app experience.So I decided to give react native navigation from wix a try and write this article simultaneously.I am going to restrict myself to handle android part in this tutorial and cover ios in later ones when I get time.

Below are the steps to create a basic app boilerplate with react native navigation:

Create a new project :

react-native init projectname

Here my final package.json with all the modules from which you can alter your project’s package.json accordingly:

Then run:

npm install && react-native link

Now you need to modify android/ios app files which can be found here:

For android:link

For ios:link

Once finished run the following commands :

For android on linux:

For ios on mac:

 

So lets start structuring your:

Remove all the contents from index.android.js and simply paste the following code:

Create a new src folder in project directory with app.android.js and app.ios.js

Create pages folder within src which will contain all your app pages or screens.Next create a global folder within pages for storing global modules and project folder to store  main app pages.Create the other folders as shown:

filesofreactnativenavigation
filesofreactnativenavigation

Design your drawer inside global folder based on your usecase and pages that you need to.

Next register your screens in screens.js as follows:

Here replace interview with your own page.

Now edit app.android.js in the following manner:

You can also have a tabbar based navigation for ios platform by referring to documentation in github page of react-native-navigation.

I have enlisted almost all of available navigator styles, please use only those that you require.

You can also have tabs at the top using the following code:

Here is screenshot of the final app with three tabs at the top:

reactnativenavigation
reactnativenavigation

You can choose redux to handle data flow in app or not thats entirely upto you.In the next tutorial I will cover how to customize drawer,handle on screen navigation and passprops to various screens so stay tuned.

Share post-
About Saurabh Mhatre 71 Articles
Currently working in web and hybrid application development

1 Comment

Comments are closed.