Skip to main content

React Navigation 7.0

· 3 min read
Satyajit Sahoo

The documentation is now live at reactnavigation.org, and v6 lives here.

React Navigation 7 aims to improve the developer experience with a new static API as well as bring many new features and improvements.

Highlights​

  • Static API: The new static API is an optional API that simplifies the configuration of navigators and makes it easier to work with TypeScript and deep linking.
  • Preloading screens: Many navigators now support preloading screens prior to navigating to them. This can be useful to improve the perceived performance of the app by preloading the screens that the user is likely to navigate to next.
  • Layout props: Navigators and screens now support layout props to augment the navigators with additional UI and behavior.
  • Improved Web integration: The built in navigators now have better web-support such rendering anchor tags for more elements. The Link and useLinkProps APIs have also been revamped to use screen names instead of paths.
  • Searchbar support in all navigators with header: All navigators with header now support a searchbar in the header. You can customize the searchbar using the headerSearchBarOptions option.
  • New useLogger devtool to replace flipper plugin: The use logger hook can show navigation actions and state in the console for debugging.
  • Sidebar support in Bottom Tab Navigator: The Bottom Tab Navigator now supports showing tabs on the side by specifying tabBarPosition option as 'left' or 'right'.
  • Animation support in Bottom Tab Navigator: The Bottom Tab Navigator now supports animations when switching between tabs. You can customize the animation using the animation option.
  • react-native-drawer-layout package: The drawer implementation used in @react-navigation/drawer is now available as a standalone package called react-native-drawer-layout.
  • Many other improvements and bug fixes.

See our blog post for the release candidate for a more detailed list of highlights.

To see the full list of changes, check out the upgrade guide.

Upgrading​

In addition to the new features and improvements, React Navigation 7 also includes a number of breaking changes. We've put together a detailed upgrade guide to help you migrate your app to the latest version.

Special thanks​

I'd like to extend a big thank you to all the contributors who helped with this release. Your contributions are what make React Navigation great.

I want to give a special shoutout to Michał Osadnik for working through many of the features and improvements in this release as well as providing much-needed motivation.

Many thanks to Patrycja Kalińska and Ania Cichocka from Software Mansion for helping with the documentation.

I'd also like to thank Tymoteusz Boba, Maciej Stosio and Kacper Kafara from the React Native Screens. React Navigation wouldn't be where it is today without React Native Screens.

Last but not least, without dedicated time from Callstack, it would be impossible to maintain and improve React Navigation.

If React Navigation helps you to deliver value to your customers, it'd mean a lot if you could sponsor us. Sponsorships will help us to move more quickly towards our goal of building the best cross-platform navigation library and continue to provide timely support for bug reports in our GitHub issues.

👉 Visit our GitHub Sponsors page 👈