Using React Navigation 4.0 in React Native apps

Hello Guys, Here is how to use React Navigation 4.0 in React Native apps. After the important updates of the React Native 0.60+, Here is React Navigation 4.0. I am sure many of you who have started the project with the updated React Navigation 4.0 have experienced the changes they did in the latest version.

So let me start with the updates in React Navigation 4.0.

In React Navigation 4.0 version they have extracted out the navigators to separate repos. Which means while adding the react-navigation in your app you also have to add the navigator as per your need.

Here is the list of individual packages for the each navigator:

  • createStackNavigator – react-navigation-stack
  • createDrawerNavigator – react-navigation-drawer
  • createBottomTabNavigator – react-navigation-tabs
  • createMaterialTopTabNavigator – react-navigation-tabs

We will also need to install react-native-reanimated package in case of react-navigation-drawer and react-navigation-tabs. This is React Native’s animated library reimplemented and used inย react-navigation-drawer and react-navigation-tabs. For more about react-native-reanimated visit here.

How to Use React Navigation 4.0 in React Native apps

So if you are using the React Navigation version 4.0 and above you have to import the navigator from the saparate package.

Here are the normal changes which you have to look:

createStackNavigator

To install createStackNavigator in React Navigation 4.0

1. Install react-navigation and react-native-gesture-handler

2. Now we have to install react-navigation-stack for createStackNavigator

3. Install CocoaPods for the react-native-gesture-handler

4. Changes in the code

– import { createAppContainer, createStackNavigator } from ‘react-navigation’;
+ import { createAppContainer } from ‘react-navigation’;
+ import { createStackNavigator } from ‘react-navigation-stack’;

createDrawerNavigator

To install createDrawerNavigator in React Navigation 4.0

1. Install react-navigation and react-native-gesture-handler

2. Now we have to install react-navigation-drawer for createDrawerNavigator and react-native-reanimated for the Drawer animation

3. Install CocoaPods for the react-native-gesture-handler and react-native-reanimated

4. Changes in the code

– import { createAppContainer, createDrawerNavigator } from ‘react-navigation’;
+ import { createAppContainer } from ‘react-navigation’;
+ import { createDrawerNavigator } from ‘react-navigation-drawer’;

createBottomTabNavigator

To install createBottomTabNavigator in React Navigation 4.0

1. Install react-navigation and react-native-gesture-handler

2. Now we have to install react-navigation-tabs for createBottomTabNavigator and react-native-reanimated for the bottom tab animation

3. Install CocoaPods for the react-native-gesture-handler and react-native-reanimated

4. Changes in the code

– import { createAppContainer, createBottomTabNavigator } from ‘react-navigation’;
+ import { createAppContainer } from ‘react-navigation’;
+ import { createBottomTabNavigator } from ‘react-navigation-tabs’;

createMaterialTopTabNavigator

To install createMaterialTopTabNavigator in React Navigation 4.0

1. Install react-navigation and react-native-gesture-handler

2. Now we have to install react-navigation-tabs for createMaterialTopTabNavigator and react-native-reanimated for the tab animation

3. Install CocoaPods for the react-native-gesture-handler and react-native-reanimated

4. Changes in the code

– import { createAppContainer, createMaterialTopTabNavigator } from ‘react-navigation’;
+ import { createAppContainer } from ‘react-navigation’;
+ import { createMaterialTopTabNavigator } from ‘react-navigation-tabs’;

Updated Examples for React Navigation Version 4.0+

Here is the list of example which we have updated for React Navigation version 4.0+

So this is how you can start working with React Navigation version 4.0+ and how to use React Navigation 4.0 in React Native apps. If you have any doubt or anything else to share please comment below so that everybody can know about it.

Hope you liked it. ๐Ÿ™‚

2 thoughts on “Using React Navigation 4.0 in React Native apps”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.