In this article, we will check how we can use React Navigation 4.0 in our React Native apps. React Navigation 4.0 was introduced after the major updated in React Native 0.60+.
What’s new in React Navigation 4.0?
Before React Navigation 4.0 all the navigator packages was bundled with react-navigation so it makes difficult to update navigator packages because to update them they have to make some major release in react-navigation too.
In this version they have separated the navigator packages from react-navigation hence they have more freedom to update any major release in navigator packages.
The navigators live at
- createStackNavigator – react-navigation-stack
- createDrawerNavigator – react-navigation-drawer
- createBottomTabNavigator, create MaterialTopTabNavigator – react-navigation-tabs
The libraries we will install now are react-native-gesture-handler, react-native-reanimated, react-native-screens. I will not explain the purpose of these libraries as they are totally out of the scope for this article.
Must Read : React Developer Average Salary
Let’s implement React Navigation 4.0 in our app
In our web apps we can link different pages using <a> tag therefore our web apps maintain a complete history stack but in our apps there is no concept of history stack and therefore React Navigation comes in.
Let’s import the navigators from the separate packages one by one.
createStackNavigator is a function that returns a React component. Let’s see how to install it.
- 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 creating a Drawer Navigator and react-native-reanimated for the Drawer animation.
npm install react–navigation–drawer —save
npm install react–native–reanimated —save
3. Now install CocoaPods
cd ios && pod install && cd ..
All the procedure is same as I have explain above, just we have to install one more package.
- Install react-navigation-tabs
npm install react–navigation-tabs —save
In this way you can start working on React Navigation 4.0, I always love feedback about my work from others, if you have anything in your mind please don’t forget to mention in the comment section.
To enhance your knowledge regarding advanced technologies, tune to Morosoft tweaks https://www.mstweaks.com/. If you want to be up to date with all that is happening in the world, Morosoft Tweaks is providing you all under one roof. We also aim to provide relevant information in a quick and sophisticated manner. Contact us: firstname.lastname@example.org