React Navigation v7: Static Routes, Auth Flows, Animations & More!

Dives into React Navigation version 7.0, currently a release candidate, showcasing its new features and improvements. If you build React Native apps with navigation, this update brings a cleaner static API, enhanced animations, and better web support that you’ll want to know about.

I demonstrate how to set up a new Expo project with React Navigation 7, install the required packages, and create tab navigators with new animation options. You’ll also see how to position tab bars on different platforms, including web, and how to mix static and dynamic navigation APIs for flexible routing.

What's inside

Installing React Navigation 7 and setting up a new Expo project
Creating bottom tab navigators with dynamic API
Adding animations to tab transitions (shift and fade)
Positioning the tab bar on top, bottom, or left, with platform-specific logic
Running the app on iOS, Android, and web with proper dependencies
Mixing static and dynamic navigation APIs for flexible route declarations
Preloading screens before navigation
Improvements in type checking with the new static API

I start by creating a new Expo app using the blank TypeScript template to avoid conflicts with Expo Router, which isn’t compatible with React Navigation 7 yet. Then I install the React Navigation 7 release candidate packages: , , and .

The installation uses pnpm but you can use npm or yarn. After installing, I run the Expo server on port 8081 to ensure the app connects to the correct Metro bundler instance. This setup is the foundation for exploring the new navigation features.

Creating bottom tab navigators with dynamic API

Using the familiar dynamic API, I create a bottom tab navigator with multiple screens. For simplicity, I reuse the same component for all tabs but give each a unique name like Profile and Settings.

This approach shows how you can continue using the dynamic API while preparing to integrate the new static API. The tabs render correctly, and navigation works as expected, but initially without animations.

Adding animations to tab transitions (shift and fade)

One highlight in React Navigation 7 is the ability to add animations when switching tabs. I demonstrate setting the option to for a smooth sliding effect between screens.

You can also use for a crossfade effect, though it’s more noticeable when screens have distinct content. Animations can be applied globally to all tabs or individually per screen via screen options. This makes transitions feel more polished and modern.

Positioning the tab bar on top, bottom, or left, with platform-specific logic

React Navigation 7 adds support for changing the tab bar position. You can place it at the top, bottom, or left side of the screen. I show how to set the tab bar to the top on mobile devices and to the left on web.

Using React Native’s API, you can apply platform-specific positioning logic so the UI adapts naturally. For example, a sidebar on web and a bottom tab bar on iOS and Android. This flexibility improves the user experience across devices.

Running the app on iOS, Android, and web with proper dependencies

To run the app on web, additional dependencies like , , and are required. I install these and then launch the Expo app in a browser.

The tab bar positioning and animations work well on web, showing React Navigation 7’s improved cross-platform support. On iOS and Android, the tabs behave as expected with smooth animations and correct safe area handling.

React Navigation 7 introduces a new static API that lets you declare screens in a cleaner, more type-safe way. Importantly, it’s backwards compatible, so you can mix static and dynamic APIs in the same app.

For example, you can nest a static stack navigator inside a dynamic bottom tab navigator or vice versa. This incremental adoption lets you simplify your codebase gradually without rewriting everything at once.

Another new feature is the ability to preload screens before navigating to them. This can improve perceived performance by loading screen components and data ahead of time.

While I mention this feature, I focus more on the static API and animations. Preloading is useful in complex apps where navigation speed and smoothness matter.

Improvements in type checking with the new static API

The static API also brings better TypeScript support and static type checking for navigation routes and params. This reduces runtime errors and improves developer experience.

By defining routes statically, you get autocomplete and type safety when navigating or accessing route params. This is a big win for larger projects that rely heavily on navigation.

Resources

CourseReact Native course

Master React Native fundamentals and navigation with lifetime access.

Let's connect!