Mateusz says React Navigation 5 reduces the navigation events developers need to track to focus and blur. The `useFocus` hook handles setting up and clearing listeners, making focus-aware components easier to manage.
Practicalities of React Navigation 5
Speaker
Mateusz, a React Navigation 5 upgrader at an unnamed client, discusses migration lessons with the Callstack podcast host and Satya; he also credits Adam Zinski from Kosak for substantial upgrade work.
Experimental state persistence in v5 preserves navigation state across refreshes, so developers can return to the screen they were working on. Mateusz cautions that migration estimates should account for more than simple package-name replacements: consuming screen state through route objects and hooks can require component changes, depending on the codebase.
Mateusz reports unusual TalkBack behavior on Android and says his team is working with the React Navigation team to investigate. He urges teams to check accessibility as part of their apps.
Mateusz says setting elements such as headers dynamically in React hooks creates new options for apps. His team used the component-based API during the upgrade to simplify navigation on both iOS and Android, replacing separate platform setups with one that was easier for teammates to understand. He credits Adam Zinski from Kosak for substantial work.
Takeaways
- Estimate migrations against actual component changes, not just package renames.
- State persistence can save time by restoring the screen being edited after a refresh.
- Use focus-aware hooks to avoid managing navigation listeners by hand.
- Check TalkBack behavior on Android and investigate accessibility issues with the navigation team.
- A major API migration can also be a chance to simplify platform-specific navigation setup.
Mentioned in this talk
Search inside this talk
What was claimed 7
- usesMateusz uses React Navigation
“Mateusz has done a huge upgrade to React Navigation 5”
YouTube Unverified1 source· Talk
- featureReact Navigation: The useFocus hook handles setting up and clearing event listeners.
“takes away the responsibility of setting up and clearing listeners yourself”
YouTube Unverified1 source· Talk
- featureReact Navigation: Version 5 has a simplified navigation event system centered on blur and focus events.
“now we're working only with blur and focus”
YouTube Unverified1 source· Talk
- featureReact Navigation: Experimental state persistence in v5 keeps navigation state after a refresh.
“state persistence. It lets you keep the navigation state even after a refresh”
YouTube Unverified1 source· Talk
- integrates withMateusz integrates with React Navigation
“we're working with the React Navigation team to get to the bottom of this”
YouTube Unverified1 source· Talk
- role atAdam Zinski is Contributor to the React Navigation 5 upgrade at Kosak
“his work on this upgrade was tremendous”
YouTube Unverified1 source· Talk
- uses
“using those new features you mentioned—like the component-based API”
YouTube Unverified1 source· Talk
