Findings while upgrading React Navigation from 4.x to 5.x(Part-2)
Published: 2020-08-05 10:52:53

In [Findings while upgrading React Navigation from 4.x to 5.x (Part-1)](https://dev.to/anjushakhandavalli/findings-while-upgrading-react-navigation-from-4-x-to-5-x-part-1-41gk) I explained a few findings our team had while upgrading React Navigation from 4.x to 5.x. In this part-2, I will share few more findings.

##getParam:
Till React navigation 4.x we have used the **getParam** to set a fallback value of a param whenever the param is **undefined**. For ex:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s9xsog4fb3byhmaavlek.png)

If params is **undefined** this fails. To get rid of this we used **getParam** so that whenever the accessed param is **undefined** it will fallback to the default value that we pass as part of the **getParam** as follows:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6xqtw4nesjezrg6zs8fw.png)

so now if name or params are **undefined**, fallback sets the value to ram.

But now in 5.x there is no **getParam** to achieve this. Still we can achieve the same thing by using the [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) and [null coalescing operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) as:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3auzbj3srbdppxqewini.png)

##Passing additional props to the screen:
In React Navigation 5.x specifying the screen in navigator will be like:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ft4kjs01u7zyzsr6chkl.png)

If we need to pass props to screens then inlining components as below is not preferred:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7rtbplmeim3ndeeaxpfd.png)

This is preferred:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/56i83hq6ukktpspxq0ft.png)

##Tab bar visibility control:
In version 4.x hiding the tab bar for specific screens can be achieved by setting **tabBarVisible** prop to either true or false as part of the **Options** for screens.

But in version 5.x hiding tab bar using **tabBarVisible** prop is not recommended as it is causing some glitches. So now this can be achieved by nesting the tab navigator inside the first screen of the stack instead of nesting stack inside tab navigator.

For example let’s say we have **Home**, **Feed**, **Notifications**, as three tabs and **Profile** ,**Settings** are the screens inside **Home** tab. So for this the structure will look like:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r894l5c1p3zftfoi32dq.png)


So now if you don’t want the tab bar to be visible for Profile and Settings screens then this can be achieved by nesting the tab navigator inside the first screen of the stack as follows:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gvwhm7fa1hc9bzgixfy9.png)

Done now you won’t see tab bar for **Profile** and **Settings** without any usage of **tabBarVisible** prop.

##Nested navigation with initial route:
By default, when you navigate a screen in the nested navigator, the specified screen is used as the initial screen and the initial route prop on the navigator is ignored. This behaviour is different from the React Navigation 4.

If you need to render the initial route specified in the navigator, you can disable the behaviour of using the specified screen as the initial screen by setting **initial: false**:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lh9kkno9j1b10wb0vs6i.png)


Hope this article helps you to figure out some of the issues while upgrading from React Navigation v4.x to 5.x. Happy Upgrade!