react-navigation v5 is currently in the alpha stage.
I’ve found this in the Expo blog((https://blog.expo.io/announcing-react-navigation-5-0-bd9e5d45569e) and tried to migrate our HackaTalk project.
Previously, some of the devs in the expo team have participated in implementing react-navigation including Brent Vatne (I am the first and only sponsor of him 😅).
React navigation is currently v4, however, it didn’t quite change the design previously while bumping up the major version. Usually, more features and performance improvement was made. From version 5, it has changed its internal design pattern just like we’ve been using in react such as react-router-dom. This is being implemented in react-navigation@next repository.
From now on, I will see what has been changed in react-navigation v5.
- Firstly, statically defined props can now be changed dynamically.
With the new HOC pattern, we can now easily pass the props down to navigation instead of changing statically bound parameters in navigationOption. This also helps us to beautify our code.
As you can see above, we now pass our navigationOption to screenOptions directly to props. Therefore, we are able to change the theme without any restrictions. In the past, I’ve uploaded an issue #6091, because I felt really reluctant in changing color variables dynamically. It was all because the navigation was statically defined.
The new navigation v5 solves above headache.
2. Typings
Previously, we’ve defined our react-navigation types as below.
From v5, we define typings as written below.
3. The interaction with the header button is reasonable.
In the past, you had to do the following to communicate with the Header button.
As you can see, the navigation param is assigning a function called increaseCount as the component is mounted. headerRight tries to call increaseCount with getParam waiting for it. Here is where I frowned as I read the document.
Starting with version 5, you can communicate with the header as shown below.
In the example above, the function is assigned directly from the headerRight button. You can modify params here and load them directly using route props inside HomeScreen whereroute.params also replaces getParam.
4. In addition, there are features available in react-navigation.
(4–1) When the button is pressed, you can use useBackButton with hook and control the Back button action.
(4–2) Similarly, you can use scrollTo to control the ScrollView from anywhere.
- You can scroll to the top as you move tabs.
(4–3) You can also use deep linking with useLinking.
(4–4) You can add focus and blur event to navigation.
This concludes the post. Next, I will write an article containing react-navigation v5 examples 🙏
