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+
- 3 Ways to Add Image Icon Inside Navigation Bar in React Native
- 3 Ways to Hide Navigation Bar in React Native Application
- Bottom Navigation with Navigation Icon from Local Directory
- Example of Localization in React Native Multi Language App
- Example of React Native Navigation Drawer with Latest Navigation V. 4+
- Example of React Native Tab with Latest React Navigation Version 4.+
- Example of Realm Database in React Native
- Example of SQLite Database in React Native
- Example to Load Pre Populated SQLite Database in React Native
- Handling Android Back Button Press in React Native
- How to Make React Native Bottom Navigation with Latest Navigation V. 4+
- React Native Global Scope Variables
- React Native Pass Value From One Screen to Another Using React Navigation
- React Native Popup Menu – Over Flow Menu
- React Navigation Header Customization in RN using Navigation Options
- Switch from One Screen to another using React Navigation 4.+ (Router)
- Switch Screen out of the Navigation Drawer with Latest Navigation V. 4+
- Navigation Drawer / Sidebar with Sectioned Menu Options and Footer
- Custom Navigation Drawer / Sidebar with Image and Icon in Menu Options
- How to Hide Navigation Option from Navigation Drawer / Sidebar
- Refresh Previous Screen after Going Back in React Navigation
- Hide React Navigation Header on Press of a Button
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. 🙂
make a new tutorial on how to create an app with this new version of react navigation 4
Hey hi, I have updated already updated all the posts on site for the React Navigation 4.0. They are also listed in the post.
error: Unrecognized font family ‘lonicons’
please help
Try to install https://aboutreact.com/react-native-ionicons/