React Navigation

Routing and navigation for React Native and Web apps. Maintained by @satya164

[Satyajit Sahoo @satya164]

Working on automatic shared URLs with React Navigation's static config.

If the same screen appears in multiple navigators with the same path pattern, it'll be marked as shared automatically.

So the screen keeps one URL, even when it lives in different navigators.

[React Navigation @reactnavigation]

Grateful to the React Native Screens team for their hard work 🫶

[Ferran @ferrannp]

So @kafara_kacper working day and night including tonight to release react-native-screens 5.0.0!

[React Navigation @reactnavigation]

Great talk about how navigation works under the hood by @kafara_kacper and @__ubax__

[React Navigation @reactnavigation]

@gs_rumana They depend on Reanimated and React Native Screens teams.

For native tabs, we will have a stable version in React Navigation 8. Meanwhile, make sure to report any issues you encountered.

[React Navigation @reactnavigation]

You can now have rounded indicators in Material Top Tabs in React Navigation 8 😍

[Satyajit Sahoo @satya164]

The indicator now has 5 pieces. The pieces in the middle scale to account for width changes, the pieces on the side handle borderRadius.

Why 3 pieces in the middle instead of 1? The scaling math can leave gaps, especially on Android.

3 pieces cover left/right and middle gaps.

[React Navigation @reactnavigation]

What should happen if you call navigation.preload('MyScreen') multiple times?

Currently, each call adds a new instance of the preloaded screen. Should we change the behavior of preload?

[React Navigation @reactnavigation]

Have you tried it yet?

[Satyajit Sahoo @satya164]

The new retain API in React Navigation 8 keeps stack screens rendered and active in the background even after going back.

So you can do things like move a video to picture-in-picture so it keeps playing.

[React Navigation @reactnavigation]

New versions of `@react-navigation/bottom-tabs` are out for 7.x and 8.x.

You can now specify `tabBarSelectionEnabled: false` to disable selection of a tab on press with native tabs, and listen to the `tabPress` event to implement custom behavior.

[Software Mansion @swmansion]

React Native Screens 4.25.0 is here 📲
👉 Legacy architecture is no longer supported
👉 Release candidate version of Tabs API
👉 Color scheme & RTL support in Tabs
👉 Comprehensive MoreNavigationController handling
👉 Prevent native selection support in Tabs
And more.

[React Navigation @reactnavigation]

React Navigation 7 now supports module augmentation for specifying root types.

We backported this from React Navigation 8, so new apps start using it to make the upgrade easier.

The old global augmentation still works for backward compatibility.

[React Navigation @reactnavigation]

Don't forget to check out the repo and give him a ⭐️

https://t.co/bHoGSNm1NM

[React Navigation @reactnavigation]

Huge shoutout to @trpfsu for react-native-screen-transitions - an incredible library that lets you build advanced gesture-driven navigation animations in React Native. 🙌

Check out his blog post, which shows how to use it: from recreating the iOS page transition to the brand-new navigation.zoom() transition.

Link below 👇

[React Navigation @reactnavigation]

https://t.co/4NPgaU0y1T

[Satyajit Sahoo @satya164]

Worked with Claude to dramatically simplify the type annotation needed for custom navigators in React Navigation 8.

I was not happy with the verbosity. Really glad how it turned out.

Also, TIL that we can use `this` in interface, which also works for properties merged with `&`.

[Satyajit Sahoo @satya164]

In React Navigation 8, we're working on a way to "retain" screens: navigation.retain(true)

Retained screens stay alive and are not unmounted when you go back from them.

Next time you navigate to the screen, it'll animate in the existing instance.

[Kacper Kapuściak @kacperkapusciak]

The videos showcasing how each navigator works in the @reactnavigation docs look absolutely stunning!

Amazing job @satya164 🫶

[React Navigation @reactnavigation]

top tabs usually have swipe gesture because the tabs at the top are farther from your finger. so swipe gesture provides an easy way to switch tabs.

swipe gesture with bottom tabs is against design guidelines.

for Android, Material Guidelines explicitly say not to do it:

> Don't swipe between destinations
> Source: https://t.co/Yi46TJPdxi

for iOS, while there don't seem to be explicit guidance, the tabs themselves can be positioned can as a sidebar on larger screens - where tab items are shown vertically, so a horizontal swipe gesture would be unintuitive.

since react navigation wants to follow platform guidelines, this won't be supported in the built-in navigator.

but react navigation is flexible, so if you really want it:
- use material top tabs with tab bar position at bottom
- build your own navigator that implements this

[Oskar Pawica @O_Pawica]

React Native Header Motion v1 is out 🎉
Build scroll-driven animated headers your own way!

🖐️ New in v1: header panning
Users can drag the header itself to scroll, making the gesture feel continuous with the scrollable.

🗒️ https://t.co/PQIMnsaW8Z

More details in the thread 👇

[React Navigation @reactnavigation]

Not sure if this is released in a stable version of React Native Screens, as the last version was released on February 24, and that PR was merged 28 days ago.

Once it's released, we'll need to add support for it.

In the case of colorScheme, it'll be automatically set based on React Navigation theme once integrated.

[React Navigation @reactnavigation]

Native iOS split view is coming to React Navigation 🔜
Powered by React Native Screens 🫶

Let us know your use cases so we can test and ensure that the API is suitable for a wide range of usage 👇

[React Navigation @reactnavigation]

@qarthii The safe area isn't applied by default in react-native-screens, so this should work well with the current implementation.

[React Navigation @reactnavigation]

We just published 2 new skills for React Navigation
- Upgrade React Navigation
- Migrate to Static Config

$ npx skills add react-navigation/skills

Try it out and let us know what can be improved 🙏