Handling navigation in react native-part 2

reactlogo
reactlogo

In the previous post we saw basic setup of reactnative navigation in our app.In this tutorial we are are going to cover how to customize drawer and handle navigation between different screens.

First let us create a basic drawer using the following code:

Here we have created a simple drawer in which on every item click we use various methods of navigator.

The showmodal method opens the page as modal popup,poptoRoot method removes all the documents present on the stack and shows passed document.

We registered the drawer in screens.js in previous tutorial here:

In order to pass control from one screen to other we can use the following method:

Here title is the name of screen to be displayed on top on the page,screen take the page to be displayed as argument and passProps is used to pass props to child pages.

Please keep in mind that at the time of writing this article the navigation module was still in its experimental stage and any updates in the module might have breaking changes to your code.

Thats it for today’s tutorial.In the next tutorial we will cover how to integrate redux with react native navigation so stay tuned.

Kindly mention your doubts,recommendations,appreciations in the comments section.

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

2 Comments

Comments are closed.