Soban Arshad
Apr 23 · 6 min read

Deep Dive Into React Navigation

Well, hope you are doing good and enjoying React Native, building cool and efficient apps.

Okay, so what I personally realized there is much more space to write on react navigation, as the basic information is given by official site but yet there is a lot of hurdles for beginners

How to deal with nested navigators”

So, here are some of the basics of navigation.

First of all find the way your upcoming app will be. For example, which pattern your application will follow.

Let me describe it briefly, in your application there is a lot of navigators, it may be stack navigator, or tab navigator, or drawer navigator, or switch navigator, or might be the combination of navigators.

Lets talk about all of them.

Stack Navigator:

When you want to use a sub-screen you use stack navigator, lets talk against an example, you are working with a social media application, and there are a lot of profiles of your friends and family, what you want is, when ever you click on a profile, the complete profile should be opened in front of your eyes.

At screen you have different profiles, but when you clicked lets say ‘abc’ profile, a screen is opened containing all the information about ‘abc’ profile. This is how stack navigator works.

Stack Navigator also tracks the history of navigation, like, at abc profile screen if you press back button you’ll automatically redirected to the previous screen.

const myNavigator =createStackNavigator ({

Home: { screen : HomeScreen },

Profile: { screen : ProfileScreen },

Setting: { screen : SettingScreen }

} ,

initialRouteName : ‘Home’,

navigationOptions : {

title : ‘Home’,

headerTitle : ‘Home’,

headerStyle : {

// here are the style for example

color : ‘#093284’,

backgroundColor : ‘#123876’

}

}

);

In above code we are creating a basic stack navigator as first argument we set the screens that will come under this navigator and as second parameter we set configs of stack navigator, there are two ways to deal with configs, either to set where you declare your navigator, inside screen component,

as

static navigationOptions

We set initialRouteName as Home screen, this will make sure the very first screen of this navigator will be Home screen, in other case if we don’t set initialRouteName then by default it picks the first screen of navigator. Yet the best practice is to mention you first scree.

You can also carry the information along with your navigation

this.props.navigation.navigate( “Screen Name” , { dataYouWantToCarryAlong } )

Second parameter can carry the data/details to next screen, you are going to.

You see how simple is that. For official documentation

Switch Navigator:

What the heck is Switch Navigator, Basically switch navigator is kind of switch we use in home appliances, or technically it’s 0 or 1, Let say we start the application and now we are checking if user is login or not, if login then go to appStack other wise go to LoginStack. Switch navigator mostly used in this case, obviously there are many other use cases as well where one can apply switch navigator.

Configurations are pretty same as stack navigators

const myNavigator =createSwitchNavigator ({

AuthCheck: { screen : AuthScreen },

Login: { screen : LoginScreen },

App: { AppStack }

} ,

initialRouteName : ‘AuthCheck’,

);

Tab Navigator:

Tab Navigator is used to make tabs inside your app. For example, in instagram you see bottomTabNavigator where pofile, search, home icons are displayed and on click you go to that specific screen

const myNavigator =createBottomTabNavigator ({

Home: { screen : HomeScreen },

Search: { screen : SearchScreen },

Profile: { screen : ProfileScreen}

} ,

initialRouteName : ‘Home’,

);

Drawer Navigator:

Drawer navigator is, the screen appears when you swipe left or right on screen, and often a half width screen appears containing different screen names, comes from right side or left side

const myNavigator =createDrawerNavigator ({

Home: { screen : HomeScreen },

Search: { screen : SearchScreen },

Profile: { screen : ProfileScreen}

} ,

initialRouteName : ‘Home’,

);

Inside drawer navigator configs, you can set drawer width, drawer position etc. More you can search from official documention.

Let’s talk about less addressed portion and that is nested navigators.

We’ll make use cases as will talk accordingly.

=> StackNavigator inside SwitchNavigator

You want to make a nested navigator and that is stack inside switch, how will you do that?

Base navigator is switc navigator lets make it

const switch = createSwitchNavigator({

Auth : { screen : “AuthCheckScreen” },

LoginStack : { LoginStack },

AppStack : { AppStack }

)}

The case, in switch navigator your first screen is AuthCheckScreen and at that screen you are checking if user if login or not, if user is login then fo to AppStack other wise go to LoginStack.

LoginStack contains further screens in stack navigator as login screen, forgetPasswordScreen and SignUp Screen.

And AppStack contains all the screens of your app for example HomeScreen, ProfileScreen, SettingScreen etc.

lets make LoginStack

const LoginStack =createStackNavigator ({

Login : { screen : LoginScreen },

ForgetPassword : { screen : ForgetPasswordScreen },

SignUp : { screen : SignUpScreen }

} ,

initialRouteName : “Login”

)}

now make AppStack

const AppStack = createStackNavigator ({

Home : { screen : HomeScreen },

Profile : { screen : ProfileScreen },

Setting : { screen : SettingScreen }

} ,

initialRouteName : “Home”

)}

now you see we have already make nested navigator inside our switch navigator, we made two stack navigators named as AppStack and LoginStac, and inside our switch navigator we have defined both of these stacks. You see? Yeah!!!

How Cool…

=> BottomTabNavigator inside SwitchNavigator:

Now the case is you want to make a switch navigator that contains a BottomTabNavigator inside.

Okay lets copy and paste above said switch navigator

const switch = createSwitchNavigator({

Auth : { screen : “AuthCheckScreen” },

LoginStack : { LoginStack },

AppStack : { AppStack }

)}

By now Auth and LoginStack are same as previous but we’ll change AppStack

const AppStack = createBottomTabNavigator ({

Home : { screen : HomeScreen },

Profile : { screen : ProfileScreen },

Setting : { screen : SettingScreen }

} ,

initialRouteName : “Home”

)}

And yes we are done. That’s all !.!.!

Now you have AppStack as BottomTabNavigator.

Any complexity?

Okay let’s talk about a more complex but easy system,

=> Complete Application Navigators

Okay, so the case is you want an app where first of all you’ll check if user is login or not, then if login you’ll redirect user to AppStack where tab navigator switch navigator and drawer navigator are there to welcome user :D

okay the case is, you want to keep your drawer through out the application.

How will you code that, Let’s see.

const TabNav =createBottomTabNavigator ({

Profile : { screen : ProfileScreen },

Home : { screen : HomeScreen },

Notification : { screen : NotificationScreen }

} ,

initialRouteName : “Home”

)}

const AppStack = createDrawerNavigator({

TabNav : { TabNav },

Setting : { screen : SettingScreen},

LogOut : { screen : ConfirmLogOutScreen }

} ,

initialRouteName : “TabNav”

)}

const LoginStack =createStackNavigator ({

Login : { screen : LoginScreen },

ForgetPassword : { screen : ForgetPasswordScreen },

SignUp : { screen : SignUpScreen }

} ,

initialRouteName : “Login”

)}

const switch = createSwitchNavigator({

Auth : { screen : “AuthCheckScreen” },

LoginStack : { LoginStack },

AppStack : { AppStack }

)}

Be sure that you have already install react-native-gesture-handler through yarn add / npm i react-native-gesture-handler –save

This way you can access your drawer through gesture, or swipe left / right.

And if you dont want to keep your drawer navigator through out the application you can make AppStack as TabNavigator and then inside tab navigator you can make a drawer navigator, this way drawer navigator will be provided only on the tab’s specific screen where you define the drawer.

const TabNav =createBottomTabNavigator ({

Drawer : { Drawer },

Home : { screen : HomeScreen },

Notification : { screen : NotificationScreen }

} ,

initialRouteName : “Home”

)}

I hope you enjoyed, any ambiguities/doubts are welcomed, kindly comment your issues down and we’ll address that as soon as humanly possible

Applause / Critics are awaited. . .

FaceBook LinkedIn Twitter Github

React Native by Soban Arshad

This publication will give you beginner to advance level knowledge of react native, this is all made on the based of hands on experience of software engineer.

Soban Arshad

Written by

Software Engineer (React Native) at Kwanso.

React Native by Soban Arshad

This publication will give you beginner to advance level knowledge of react native, this is all made on the based of hands on experience of software engineer.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade