Findings while upgrading React Navigation from 4.x to 5.x(Part-2)

In Findings while upgrading React Navigation from 4.x to 5.x (Part-1) 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:

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:

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 and null coalescing operators as:

Passing additional props to the screen:

In React Navigation 5.x specifying the screen in navigator will be like:

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

This is preferred:

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:

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:

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:

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