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:-

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 :

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

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

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 :

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  :

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:

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.

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 :

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 :

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:

For toggle the drawer:

Here is the full Example of V4 Drawer Navigation :

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:

For the toggle drawer:

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

Here is the full Example of V6 Drawer Navigation :

Summary