Using React Navigation 4.0 in React Native apps

Introduction

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. This 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 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 separate 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

npm install react-navigation --save
npm install react-native-gesture-handler --save

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

npm install react-navigation-stack --save

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

cd ios && pod install && cd ..

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

npm install react-navigation --save
npm install react-native-gesture-handler --save

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

npm install react-navigation-drawer --save
npm install react-native-reanimated --save

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

cd ios && pod install && cd ..

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

npm install react-navigation --save
npm install react-native-gesture-handler --save

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

npm install react-navigation-tabs --save
npm install react-native-reanimated --save

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

cd ios && pod install && cd ..

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

npm install react-navigation --save
npm install react-native-gesture-handler --save

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

npm install react-navigation-tabs --save
npm install react-native-reanimated --save

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

cd ios && pod install && cd ..

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. 🙂

 

4 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.