Difference Between React Native Stack Navigator V4 vs V6

What is react native navigation?

React Navigation is a standalone library that enables the implementation of navigation functionality in a React Native application. React Navigation is used for managing the presentation, and transition between multiple screens.

There are a few types of navigation built-in mobile applications. These are Stack navigation, Tabbed navigation & Drawer navigation. It provides 100% native platform navigation on both iOS and Android for React Native apps.

Package Installation:-

On V4:- npm install react-navigation

On V5:- npm install @react-navigation/native

On V6 we have Installing dependencies less than V4 these are react-native-screens, react-native-safe-area-context But on V4 react-native-reanimated ,react-native-gesture-handler, react-native-screens, react-native-safe-area-context, @react-native-community/masked-view After Installing all the packages we have to manually link the dependencies for React Native 0.59 version and lower. Also, need to configure jetifier to support dependencies using AndroidX whereas in react native V6 it gets linked automatically in React Native 0.60 and higher versions.

Let’s start with the implementation 

Creating A React Native Stack Navigator

On V4:-

Creating A React Native Stack Navigator | Mindbowser

createStackNavigator is a function that returns a React component. It takes a route configuration object containing 1 property: Screen. createAppContainer is a function that returns a React component and takes as a parameter the React component created by the createStackNavigator and can be directly exported from App.js to be used as our App’s root component.

Installing a React Native Stack Navigator

npm install react-navigation-stack 

Stack Navigator Dependencies:-

npm install @react-native-community/masked-view 

npm install react-native-safe-area-context

Here is the full Example of V4 Navigation :

Example Of React Native Stack Navigator | Mindbowser

In React Native, the component exported from App.js is the entry point or root component for the app.

React Native App Container | Mindbowser

On V6:-

createNativeStackNavigator is a function that returns an object containing 2 properties: Screen and Navigator. Both of them are React components used for configuring the navigator. The Navigator should contain Screen elements as its children to define the configuration for routers.

Installing a React Native Stack Navigator

npm install @react-navigation/native-stack

Installing a React Native Stack Navigator | Mindbowser

NavigationContainer is a component that manages our navigation tree and contains the navigation state. This component must wrap all navigator’s structures. Usually, we’d render this component at the root of our app, which is usually the component exported from App.js.

Here is the full Example of V6 Navigation :

Example of Installing a React Native Stack Navigator | Mindbowser

Passing parameters to routes:-

On V4:- 

In this version, we pass params to a route by putting them in an object as a second parameter to the navigation.navigate function: this.props.navigation.navigate(‘RouteName’, {  params go here }) from the screen which screen we want to sent and we get that param this.props.navigation.getParam(paramName, defaultValue) on our respective screen through getParam method. As an alternative to getParam, we can use this.props.navigation.state.params. It is null if no parameters are specified.

On V6:-

In this version, we pass params to a route by putting them in an object as a second parameter to the navigation.navigate function: navigation.navigate(‘RouteName’, { params go here }) from the screen which screen we want to sent and we get that param route.params on our respective screen through route.params method. We can update the screen’s params with navigation.setParams. Initial params can be passed via the initialParams prop on the Respective Screen and should contain the minimum data required to show a screen.

Configuring the header bar:-

On V4:-

On this version of navigation, we have a static property called navigationOptions which is either an object or a function that returns an object that contains various configuration options. There are three key properties to customizing the style of header: headerStyle, headerTintColor, and headerTitleStyle.Inside of navigation we have used these props to display our style and there we use for the header title is the title.

Here is the full Example of V4 Header Styling  :

Example of V4 Header Styling | Mindbowser

We can customize the header inside of the options prop of screen components. The navigationOptions prop can be an object or a function. When it is a function, it is provided with an object with the navigation prop, screenProps and navigationOptions on it . We also specific shared navigationOptions in the stack navigator to write our header stylings. We can set buttons in the header through the headerLeft and headerRight properties in navigationOptions .The back button is fully customizable with headerLeft, but if we want to change the title or image, the other navigationOptions are headerBackTitle, headerTruncatedBackTitle, and headerBackImage.

On V6:-

On this version of navigation, we have an options prop which is either an object or a function that returns an object that contains various configuration options. In this version, we are using the same props but we use it inside options props and also the props which we  use for the header title is the title.

Here is the full Example of V6 Header Styling:

Example of V6 Header Styling | Mindbowser

We can customize the header inside of the options prop of  screen components. The options prop can be an object or a function. When it is a function, it is provided with an object with the navigation and route prop. We also specific shared screenOptions in the stack navigator to write our header stylings. We can set buttons on V6 with same props in side options props. The back button is fully customizable with headerLeft, but if you just want to change the title or image, the other options are headerBackTitle, headerBackTitleStyle and headerBackImageSource and  can use a callback for the options prop to access navigation and route objects.

On V6

We can use a nested navigator which renders a navigator inside a screen of another navigator. We can also pass params in this nested navigator.

Nested Navigator | Mindbowser

Creating Tab navigation:-

The most common style of navigation in mobile apps is Tab Navigation. It uses tabs on the bottom of the screen or on the top below the header or even instead of a header.

The Bottom style provides an extra design effect to the tab bar at the bottom of the screen. The design makes it easy to switch among the different screens. A user can navigate from one screen to another very easily by just clicking the tab. The tab screen components are not mounted until the screens are first focused. 

It uses createBottomTabNavigator and also use createMaterialBottomTabNavigator and createMaterialTopTabNavigator to add tabs to  applications.

On V4:-

We customize the Tab Navigation by using navigationOptions for customization  . Inside this NavigationOptions we write our styling codes as we use in Stack Navigation. There are few props used inside the tab Navigation these are tabBarIcon , tabBarIcon, tintColor,tabBarOptions,activeTintColor,inactiveTintColor. A tab navigator contains a stack and if wants to hide the tab bar on specific screens. We add badges to icons inside the Tab Navigator for Showing its notification badges and it gets user attention.

Installation Tab Navigator:-

npm install react-navigation-tabs

Here is the full Example of V4 Tab Navigation :

Installation Tab Navigator | Mindbowser

On V6:-

OnV6  is no different  from V4 . V6 uses the same props for execution of its Tab Navigation But it customized all the props inside options instead of navigationOptions and it’s simple to use and write because it is similar to how you would customize a native stack navigator. We add badges to icons inside the Tab Navigator for Showing its notification badges and it gets user attention. Due to uses being the same as Stack Navigation we can  hide the tab bar on specific screens.

Installation Tab Navigator:-

npm install @react-navigation/bottom-tabs

Here is the full Example of V6 Tab Navigation :

Installation Tab Navigator | Mindbowser

Creating Drawer navigation :- 

React Native Navigation Drawer is a very popular component in mobile apps because  it manages the number of app options in a very easy manner. A user can navigate from one screen to another screen very easily by just pulling out the drawer.

Common pattern in navigation is to use a drawer from the left (sometimes right) side for navigating between screens.

It uses createDrawerNavigator to add a drawer to applications.

On V4:- 

This version of drawer navigation there is DrawerNavigatorConfig and contentOptions for DrawerItems and Screen Navigation Options.

Installation Drawer Navigator:-

npm install react-navigation-drawer

To open and close drawer, use the below helpers to open and close the drawer:

Installation Drawer Navigator | Mindbowser

For toggle the drawer:

Installation Drawer Navigator | Mindbowser

Here is the full Example of V4 Drawer Navigation :

Example of V4 Drawer Navigation | Mindbowser

On V6

On this version, drawer navigation opens and closes via gestures.This version of drawer navigation has a property that is options , inside these options add all the styling props regarding the operations and other functionalities. 

Installation Drawer Navigator:-

npm install @react-navigation/drawer

Drawer Navigator Dependencies:-

npm install react-native-gesture-handler 
npm install react-native-reanimated

On V6 Drawer uses a slide animation by default provided by iOS.Headers are shown by default in the drawer and don’t need extra stack navigators.

To open and close drawer, use the below helpers to open and close the drawer:

Steps to open and close the drawer | Mindbowser

For the toggle drawer:

For the toggle drawer | Mindbowser

It would like to determine if drawer is open or closed, you can do the below :

Toggle Drawer | Mindbowser

Here is the full Example of V6 Drawer Navigation :

Example of V6 Drawer Navigation | Mindbowser

Summary

react native stack navigator | Mindbowser

coma

Conclusion

In this article, we saw in detail the Differentiation and implementation of React Native Stack Navigator V4 vs V6 and how to use it. 

Satyabrata

Tech Expert

Satyabrata is a React Native Developer with around 2.8+ years of experience in developing mobile applications. Skills like developing clean and reusable code, Creating responsive Mobile pages, API integration etc. 

Get in touch for a detailed discussion.

Hear From Our 100+ Customers
coma

Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.

author
ADDIE WOOTTEN
CEO, SMILINGMIND
coma

We had very close go live timeline and MindBowser team got us live a month before.

author
Shaz Khan
CEO, BuyNow WorldWide
coma

They were a very responsive team! Extremely easy to communicate and work with!

author
Kristen M.
Founder & CEO, TotTech
coma

We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.

author
Chacko Thomas
Co-Founder, TEAM8s
coma

Mindbowser is one of the reasons that our app is successful. These guys have been a great team.

author
Dave Dubier
Founder & CEO, MangoMirror
coma

Mindbowser was very helpful with explaining the development process and started quickly on the project.

author
Hieu Le
Executive Director of Product Development, Innovation Lab
coma

The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.

author
Alex Gobel
Co-Founder, Vesica
coma

Mindbowser is professional, efficient and thorough. 

author
MacKenzie R
Consultant at XPRIZE
coma

Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.

author
Laurie Mastrogiani
Founder, S.T.A.R.S of Wellness
coma

MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app.” “They had put together fantastic wireframes for us.

author
Bennet Gillogly
Co-Founder, Flat Earth
coma

They're very tech-savvy, yet humble.

author
Uma Nidmarty
CEO, GS Advisorate, Inc.
coma

Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.

author
Katie Taylor
Founder, Child Life On Call
coma

As a founder of a budding start-up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity.

author
Radhika Kotwal
Founder of Courtyardly
coma

The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!

author
Michael Wright
Chief Executive Officer, SDOH2Health LLC
coma

They are focused, patient and; they are innovative. Please give them a shot if you are looking for someone to partner with, you can go along with Mindbowser.

author
David Cain
CEO, thirty2give
coma

We are a small non-profit on a budget and they were able to deliver their work at our prescribed budgets. Their team always met their objectives and I'm very happy with the end result. Thank you, Mindbowser team!!

author
Bart Mendel
Founder, Mindworks
coma

Mindbowser was easy to work with and hit the ground running, immediately feeling like part of our team.

author
George Hodulik
CEO, Stealth Startup, Ex-Google