React Navigation

And finally, wish you all Merry Christmas and Happy Holidays!

See you next year 👋

Many thanks to @kkafar.bsky.social and the rest of the React Native Screens and many others for making this release possible.

A big thanks to @callstack.com for funding the development of many of these features!

The new `routeNamesChangeBehavior` prop makes it simple to handle deep links to screens behind auth.

It's also backported to React Navigation 7, so you can try it now.

The new `pushParams` API lets you push new entries to history without pushing a new screen.

So you can keep filter changes in the history stack, show other components such as modals based on params, and more.

In static configuration, the type of params is inferred based on the deep link configuration as well.

Inspired by @tanstack.com router 🫶

The `useRoute`, `useNavigation` & `useNavigationState` now accept screen name as an argument.

- Pass a parent screen name to get parent screen data
- Get automatic type inference based on screen name

Native Bottom Tabs by default means native look and feel for your tabs, like liquid glass on iOS 26.

Made possible thanks to React Native Screens by
@swmansion.com

React Navigation 8 alpha is here 👀

📝 Highlights

- Native Bottom Tabs by default
- Access to route, navigation, & state for any parent screens
- Better TypeScript types for static configuration
- Push history entries without pushing screens

And many more...

The latest version of React Navigation now has a new unstable API to automatically navigate to the correct screen after a conditional render (e.g., if a screen was opened via a deep link, but was behind auth):

UNSTABLE_routeNamesChangeBehavior="lastUnhandled"

reactnavigation.org/docs/auth-fl...

Support for PlatformColor, DynamicColorIOS & CSS custom properties is coming to React Navigation's theming system 💅

Currently, it only supports plain color strings. But this will enable using design system tokens defined in native code or CSS without needing to redeclare them.

See our docs if you want to use it in your app to debug navigation.

For now, it shows navigation actions and how the state was updated based on the action, but we also plan to show more information in the future.

It was broken for a while because the format of the stack traces had changed since the initial implementation.

This is how it looked when it was broken. Not very useful.

Do you use React Navigation devtools?

It should now display the stack trace correctly. So you can easily see where the navigation originated from.

Guiding principles When writing tests, it's encouraged to write tests that closely resemble how users interact with your app. Keeping this in mind, here are some guiding principles to follow: Test the result, not the action: Instead of checking if a specific navigation action was called, check if the expected components are rendered after navigation. Avoid mocking React Navigation: Mocking React Navigation components can lead to tests that don't match the actual logic. Instead, use a real navigator in your tests. Following these principles will help you write tests that are more reliable and easier to maintain by avoiding testing implementation details.

We recently updated our testing guide with recommendations and examples. Are there any use cases that you'd like to be documented?

reactnavigation.org/docs/testing/

const path = useRoutePath(); // Construct a URL using the path and app's base URL const url = new URL(path, 'https://example.com'); // Now we have a shareable URL console.log(url.href);

The new `useRoutePath` hook in React Navigation can be used to get the path to the current route to create a shareable URL 🔗

Now available in the latest version of React Navigation

reactnavigation.org/docs/configu...

Working on regex support for linking config in React Navigation ✨

Any param name in linking config can be followed by a parenthesis containing a regex. Feedback welcome!

Let me know if you want me to test any specific scenario!

After the long wait, React Navigation 7 is here 😍

📷 Highlights
- Static API
- Preloading screens
- Layout props
- useLogger devtools
- Searchbar for more navigators
- Sidebar and animations in Bottom Tabs
- Drawer Layout package

And more...

Blog post reactnavigation.org/blog/2024/11...