React Navigation 4.0
The world’s latest technologies, policies, business-boosting strategies will be written here. Contact Morosoft

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

If you are not familiar with React Navigation or React Native apps then I will suggest you to read my these articles before, and once you are done then come back and read again.

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: 

createStackNavigator is a function that returns a React component. Let’s see how to install it.

  1. Install react-navigation and react-native-gesture-handler
1
npm install reactnavigation save
1
npm install reactnativegesturehandler save

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

3. Now install CocoaPods

cd ios && pod install && cd ..

createBottomTabNavigator: 

All the procedure is same as I have explain above, just we have to install one more package.

  1. Install react-navigation-tabs
1
npm install reactnavigation-tabs save

Conclusion  

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: info@morosoft.pk 

LEAVE A REPLY

Please enter your comment!
Please enter your name here