WhoBuilt

React Navigation 6.x, fresh from the oven

Oct 14, 2021· 33 min· 1.1K views·Watch on YouTube

Speaker

Satyajit Sahoo, maintainer of React Navigation at Callstack, presents React Navigation 6 at React Native EU 2021.

How React Native navigation evolved

Sahoo traces navigation from iOS-only NavigatorIOS through JavaScript libraries such as Navigator and NavigationExperimental, then native options from Wix and Airbnb. He explains how React Navigation 5 replaced the static API with a dynamic, component-based one, and React Navigation 6 keeps that core API while refining it.

More flexible options and simpler setup

React Navigation 6 lets developers set navigator defaults with `screenOptions` and override them for individual screens, enabling changes such as a different tab bar style on the Albums screen. Sahoo also describes React Navigation Elements and quality-of-life improvements, including simpler modal presentation, custom headers, transparent modals, and backgrounds for bottom tabs.

Flatter navigator structures

Sahoo says deeply nested navigators can complicate TypeScript, navigation calls, performance, and memory use. React Navigation 6 lets one stack mix regular and modal screens, adds `Group` for shared screen options without rendering another navigator, and provides headers by default in drawers and bottom tabs.

Native navigation and developer tools

For new apps, React Navigation 6 sets up the native stack by default, while keeping the JavaScript stack available for greater customization. Sahoo also covers improved TypeScript checking for `useNavigation` and a custom Flipper plugin that displays navigation and deep link information; the plugin does not work with Expo.

Upgrading and supporting the project

Sahoo points developers to the upgrade guide for required breaking changes, deprecations, and caveats when mixing React Navigation 5 and 6 packages. He also invites the community to contribute documentation, answer questions, triage issues, review pull requests, join GitHub Discussions, and sponsor the project.

Takeaways

  • Use `screenOptions` for shared defaults and screen-level `options` for exceptions.
  • Choose the native stack for new apps when its customization meets your needs.
  • Consider a single stack with modal presentation options before nesting navigators.
  • Define the root navigation type to enable default `useNavigation` autocomplete and checks.
  • Follow the upgrade guide before migrating, especially when mixing package versions.

Mentioned in this talk

Search inside this talk

What was claimed 12

Show all 12 facts

Related talks