We're excited to announce that we finally have a prerelease version of React Navigation 6. We released React Navigation 5 more than half a year ago, and it brought a lot of new possibilities with the new dynamic API, and was met with overwhelmingly positive reaction. Since then, we've been working on incremental improvements and refinements to the library and thinking about how to make it even better. This brings us to the next major version of React Navigation.
While React Navigation 5 was complete overhaul to the API of React Navigation, React Navigation 6 keeps the same API, with some breaking changes to make things more consistent and provide more flexibility. We also tried to address some common pain points and confusions that users had.
We'll share few highlights of the release in this blog post. If you're looking for a detailed upgrade guide, you can find it here.
- Params are now overwritten on navigation instead of merging (with option to merge them)
- Modals in stack now use the presentation style on iOS by default, and there's a new slide animation for modals on Android
- Drawer now uses a slide animation by default on iOS
- Headers are now shown by default in drawer and bottom tab screens, so you don't need extra stack navigators
- We got rid of
drawerContentOptionsetc. and moved those to
optionsprop on screen to make it possible to configure them per screen
- Material Top Tabs now use a
ViewPagerbased implementation, which means it'll provide a native experience
- We now have a UI elements library which contains various components we use in React Navigation
Try it out
If you'd like to try it out, add
@^6.x to the package, you're installing. For example:
npm install @react-navigation/native@^6.x @react-navigation/stack@^6.x
If React Navigation helps you to deliver value to your customers, it'd awesome 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 👈
We hope you find this release useful. Make sure to try the release out and provide feedback on what we can improve. You can open an issue in the GitHub rep or tweet to us @reactnavigation.