WhoBuilt

What’s coming up with React Navigation 6?

Apr 9, 2021· 7 min· 2.3K views·Watch on YouTube

Speaker

Satya, a React Navigation maintainer at Callstack, discusses the upcoming React Navigation 6 release with the podcast host and other guests.

A focused major release

Satya says React Navigation 6 is available as a prerelease. It keeps the component-based API while refining behavior and making options more consistent.

Navigation behavior and animations

Screen parameters will no longer merge with existing parameters by default, though developers can still opt into merging. Modal animations use the iOS presentation style by default, and Android gains a slide-up modal animation. The drawer also gets a new default iOS animation.

Headers and per-screen options

Drawer and bottom tab navigators now show a header by default, with options matching those of a stack navigator. Tabs and drawers also allow more settings to be configured per screen instead of only for the whole navigator.

Native tabs and reusable UI components

The Material Top Tab Navigator gains a native ViewPager backend for sliding. A new React Navigation Elements library provides shared components such as a header, a back button, and a platform-aware tappable component.

Trying the prerelease

Satya says developers can install prerelease packages using the `next` tag. The team expects to add features and fixes before the stable release and invites users to open issues.

Takeaways

  • Use explicit parameter merging when an existing screen needs to retain its current params.
  • Review drawer and tab screens after upgrading, since they now render headers by default.
  • Check whether navigator options should vary by screen and configure them locally where appropriate.
  • Try the Material Top Tab Navigator’s native backend when native sliding behavior matters.
  • Install prerelease packages with the `next` tag and report issues before the stable release.

Mentioned in this talk

Search inside this talk

What was claimed 8

  • launched
    React Navigation: React Navigation 6 prerelease
    “I just released a prerelease version of React Navigation 6.”
    YouTube
    Unverified1 source· Talk
  • feature
    React Navigation: Navigation params are no longer merged by default; merging remains optional.
    “We finally changed it, so they aren’t merged by default.”
    YouTube
    Unverified1 source· Talk
  • feature
    React Navigation: Modal animations use the iOS presentation style by default and slide up on Android.
    “Now, the modal animation uses the presentation style on iOS by default. On Android ... we have a new slide-up animation.”
    YouTube
    Unverified1 source· Talk
  • feature
    React Navigation: Drawer and bottom tab navigator screens render a header by default, with stack navigator options.
    “Now every drawer or tab navigator screen renders a header by default, and it has all the same options as a stack navigator.”
    YouTube
    Unverified1 source· Talk
  • feature
    React Navigation: More tab and drawer options can be configured per screen.
    “Now you can configure them per screen.”
    YouTube
    Unverified1 source· Talk
  • uses
    “now has a native backend based on ViewPager.”
    YouTube
    Unverified1 source· Talk
  • feature
    React Navigation Elements: Exports a header, header back button, and cross-platform tappable component.
    “it exports a header, a header back button, and a platform-tappable component.”
    YouTube
    Unverified1 source· Talk
  • launched
    React Navigation Elements: New UI component library
    “we have a new library called React Navigation Elements.”
    YouTube
    Unverified1 source· Talk

Related talks