Skip to main content

React Navigation 7.0 Release Candidate

· 4 min read
Satyajit Sahoo

We're excited to announce the release candidate of React Navigation 7.0.

This release includes a new static API that simplifies the configuration of navigators and improves TypeScript and deep linking support. As well as various other improvements and new features.

You can read the full list of changes in the upgrade guide. Here are some highlights:

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.

It follows the same principles as the dynamic API, but instead of defining screens using functions, you define them using a configuration object, similar to React Navigation 4:

const Stack = createStackNavigator({
  screens: {
    Home: {
      screen: Home,
    },
    Profile: {
      screen: Profile,
    },
    Settings: {
      screen: Settings,
    },
  },
});

For more details and examples, check out the introduction to the static API blog post.

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. Preloading a screen will render it off-screen and execute its side-effects such as data fetching.

To preload a screen, you can use the preload method on the navigation object:

navigation.preload('Details', { id: 42 });

The Bottom Tab Navigator now supports showing tabs on the side by specifying tabBarPosition option as 'left' or 'right'. This will make it easier to build responsive UIs for where you want to show tabs on the bottom on smaller screens and switch to a sidebar on larger screens.

Sidebar support in Bottom Tab Navigator

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. This makes it easier to use the drawer implementation even if you're not using React Navigation, or if you want to use it without a navigator.

You can install it with:

npm install react-native-drawer-layout@next

See react-native-drawer-layout for usage.

Try it out​

If you'd like to try it out, add @next to the package, you're installing. For example:

npm install @react-navigation/native@next @react-navigation/bottom-tabs@next

This is the best time to try it out and provide feedback before the final release. If you encounter any issues or have any feedback or suggestions, please let us know on GitHub issues or our GitHub Discussions forum.

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 from Software Mansion for helping with the documentation.

I'd also like to thank Tymoteusz Boba 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 👈