Routing and navigation for React Native and Web apps. Maintained by @satya164
- Tweets 593
- Following 9
- Followers 11,092
- Likes 531
Spotted in the wild: React Navigation + GTK on Linux π
Happy to see the platform-agnostic core of React Navigation finally get some usage π
gtkx.dev/blog/gtkx-1-4
5
33
5,362
React Navigation 8 has one of the richest grammars* for URL patterns.
This means you get more flexibility for your app's URLs, for deep links, and for browsers.
Plus custom parse functions and standard schema for params mean they are type-safe in static config.
*Not all features map cleanly.
![| Pattern grammar | React Navigation | Expo Router | Next.js | TanStack Router | React Router |
| ------------------- | ---------------- | --------------- | ---------------- | --------------- | ------------ |
| Static | β
`users` | β
`users` | β
`users` | β
`users` | β
`users` |
| Optional static | β | β | β | β | β
`edit?` |
| Required param | β
`:id` | β
`[id]` | β
`[id]` | β
`$id` | β
`:id` |
| Optional param | β
`:id?` | β | β | β
`{-$id}` | β
`:id?` |
| Repeatable param 1+ | β
`:rest+` | β
`[...rest]` | β
`[...rest]` | β | β |
| Repeatable param 0+ | β
`:rest*` | β | β
`[[...rest]]` | β | β |
| Unmatched/Catch-all | β
`*` | β
`+not-found` | β
`not-found` | β
`$` | β
`*` |
| Regex](/pic/orig/media%2FHQfc28WWIAAUCCK.jpg)
ALT | Pattern grammar | React Navigation | Expo Router | Next.js | TanStack Router | React Router | | ------------------- | ---------------- | --------------- | ---------------- | --------------- | ------------ | | Static | β `users` | β `users` | β `users` | β `users` | β `users` | | Optional static | β | β | β | β | β `edit?` | | Required param | β `:id` | β `[id]` | β `[id]` | β `$id` | β `:id` | | Optional param | β `:id?` | β | β | β `{-$id}` | β `:id?` | | Repeatable param 1+ | β `:rest+` | β `[...rest]` | β `[...rest]` | β | β | | Repeatable param 0+ | β `:rest*` | β | β `[[...rest]]` | β | β | | Unmatched/Catch-all | β `*` | β `+not-found` | β `not-found` | β `$` | β `*` | | Regex
2
4
76
8,341
React Navigation 8 will support matching multiple path segments for links.
Check out the docs: reactnavigation.org/docs/8.xβ¦
ALT // Matches /files/a and /files/a/b 'files/:parts+' // Matches /files, /files/a and /files/a/b 'files/:parts*'
2
10
1,081
One nice thing about this is that typed hooks like `useNavigation` also handle navigator nesting.
So if you use typed hooks instead, you don't need to combine navigation props manually. So no explicit `CompositeNavigationProp` or `CompositeScreenProps`.
It's automatically handled under the hood. So the manual types for your dynamic navigation structure also get much simpler.
React Navigation 8 brings rich types to `useNavigation` and `useNavigationState` β¨
So far, that only worked with the static API. Now we're bringing it to the dynamic API too π
It won't be automatic like static config, but there was no way we were leaving it out πͺ
1
1
20
3,262
React Navigation 8 brings rich types to `useNavigation` and `useNavigationState` β¨
So far, that only worked with the static API. Now we're bringing it to the dynamic API too π
It won't be automatic like static config, but there was no way we were leaving it out πͺ
2
5
127
8,937
Latest releases of React Navigation 7 & 8 now support standard-navigation: github.com/react-navigation/β¦
standard-navigation is an API for library developers to write custom navigators that work with both React Navigation and Expo Router with minimal wrappers.
1
6
103
7,159
The SFSymbol component in React Navigation 8 will soon support contentTransition.
It enables nicer transition effects when the name changes, depending on the symbol.
<SFSymbol
name={name}
contentTransition={{
type: 'replace',
magic: true
}}
/>
3
13
222
8,328
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.
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.
3
4
52
6,481
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.
2
2
61
3,850
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 π
3
14
122
9,162
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 π
11
135
5,199
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 π
5
25
219
12,462
If you are building a new app or boilerplate in 2026 and use React Navigation, please use the Static API.
We have done a lot of work to reduce boilerplate further and improve TypeSafety in React Navigation 8.
Unless you really need to build the list of screens dynamically at runtime, you'll likely find that the Static API can do everything you need.
If you remember the Static API from React Navigation 4 and earlier, the new Static API is very different. It's built on the dynamic core that React Navigation 5 brought, so it has a lot of dynamism built-in.
The static parts are only constrained by what we need to make type inference and deep linking automatic.
5
10
162
11,773
React Navigation 8 supports PlatformColor for theming.
Using this feature, we now export 2 Android-exclusive themes:
- MaterialLightTheme
- MaterialDarkTheme
These themes use dynamic colors that automatically adapt to the user's wallpaper and theme preferences.
1
8
102
10,114
2 useful deep link features in React Navigation
- Regex pattern lets you make profile URLs look like `/@βuserId` but still support different formats for other top level routes
- Path aliases let you map multiple paths to the same screen
Works in both static & dynamic configs
1
56
2,647
React Navigation 8 now shows deep links that it handles, as well as events from navigators in the logger devtools.
It should make it easier to debug what's happening.
3
2
154
9,290
Now you can customize which Material Symbol variant and weight are used in your app in React Navigation 8 with a config in your app's package.json.
You can also set it to an empty array - if you don't use Material Symbols and want to reduce bundle size.
New versions of React Navigation 8 alpha are out! π
- Automatic deep links out of the box
- Support for Material Symbols on Android in Native Tabs
- Support SFSymbols on iOS + Material Symbols on Android for JS Tabs
- Reworked preloading screens to remove restrictions
1
10
123
13,352
We have updated the React Navigation documentation site to make it easier to use with LLMs
- "Copy page" button on each page with markdown
- "llms.txt" for each version of React Navigation
2
6
67
6,364
New versions of React Navigation 8 alpha are out! π
- Automatic deep links out of the box
- Support for Material Symbols on Android in Native Tabs
- Support SFSymbols on iOS + Material Symbols on Android for JS Tabs
- Reworked preloading screens to remove restrictions
8
18
226
26,624
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.
1
1
12
1,639
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.
1
2
16
1,626
In static configuration, the type of params is inferred based on the deep link configuration as well.
Inspired by @tan_stack router π«Ά
1
2
31
1,741
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
1
1
21
1,794
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
1
3
24
2,002
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...
9
41
362
32,473
Bottom accessory is now available in React Navigation thanks to `react-native-screens` π«Ά
Just released awaited `react-native-screens` 4.19.0.
-> tabs bottom accessory support on iOS,
-> tab "special effects" on Android,
-> nice few improvements around form sheets
Shoutout to the whole team! πͺ
Check out:
github.com/software-mansion/β¦
7
17
345
33,099
In React Navigation 8, the types for params can be automatically inferred from the path pattern and parse option.
With navigation structure, navigator types, and params being inferred, technically, it's possible to have full type-inference without any explicit type annotations.
7
12
207
11,501
The `useNavigationState` hook will get the same update!
It will accept the name of the route as an argument, and automatically determine the type of the state object.
We're working on making `useNavigation` types more useful
Before: `useNavigation` returned a type that didn't contain navigator methods like `toggleDrawer` for Drawer.
New: You can pass the name of the screen, and it'll return types that match the screen.
4
69
9,418
We're working on making `useNavigation` types more useful
Before: `useNavigation` returned a type that didn't contain navigator methods like `toggleDrawer` for Drawer.
New: You can pass the name of the screen, and it'll return types that match the screen.
4
5
149
27,666
We're working on improving type-safety for the useRoute hook.
Instead of using type assertion, it will accept the route of the name as an argument. The name is checked against the actual route name at runtime.
8
92
15,726
This uses native primitives to render the tabs, adapting to platform conventions. Which means liquid glass effect on iOS 26, and material design on Android.
1
7
1,603
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)
Just pass `UNSTABLE_routeNamesChangeBehavior="lastUnhandled"`
9
23
333
30,889
The latest version of Native Stack now has a new unstable API to add native buttons to the header π€―
Thanks to @johankasperi for implementing it in React Native Screens and @kafara_kacper for reviewing β€οΈ
Please help us test and provide feedback π
π reactnavigation.org/docs/natβ¦
6
13
136
8,056
Native tabs are coming to React Navigation π
All credits to the awesome folks working on React Native Screens at @swmansion β€οΈ
5
7
188
19,350
Coming to React Navigation:
navigation.pushParams lets you push to navigation history without pushing a new screen.
Useful for
- Keeping state such as filters in history
- Integrating custom UI with history (such as a bottom sheet or modal component) without complex logic.
7
25
436
61,537
The `prefixes` option in linking config will be optional from the next major version of React Navigation.
It will default to `[*]` - which will match any scheme or subdomain.
2
7
115
6,885
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.
3
52
2,728
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.
2
1
4
838
Do you use React Navigation devtools?
It should now display the stack trace correctly. So you can easily see where the navigation originated from.
3
8
85
6,066
We recently updated our testing guide with recommendations and examples. Are there any use cases that you'd like to be documented?
ALT 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.
1
1
15
1,294
The new `useRoutePath` hook in React Navigation can be used to get the path to the current route to create a shareable URL π
ALT 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);
2
17
1,321
You can now quickly create a starter project with React Navigation configured!
ALT npx create-expo-app@latest --template react-navigation/template
4
5
69
4,080
this is currently described on the documentation page, let us know what other clarification is needed!
6
824
React Navigation 7 alpha is now on npm π
We are excited to release static configuration API with this release. Please try it out and provide feedback! π
reactnavigation.org/docs/7.xβ¦
Note that this is a super-early release and the documentation isn't ready.
ALT Example API of Static configuration
12
27
217
29,007
here is a good video that covers it too piped.video/watch?v=TKSRzf5eβ¦
1
We just added a `getId` prop in React Navigation. This is a easier alternative to specifying a key during `navigate` to control unique instances of a screen
reactnavigation.org/docs/scrβ¦
3
20
178
Are you using createNativeStackNavigator in your app yet?
No? Set aside some time to watch this video by @nathvarun to learn what you can do with it and how it's different from createStackNavigator. You won't regret it.
piped.video/watch?v=TKSRzf5eβ¦
2
20
128
