@reactnavigation

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

reactnavigation.org
Joined February 2018
  • Tweets606
  • Following9
  • Followers11.1K
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
3
33
5,427
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

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
1
76
8,373
React Navigation 8 will support matching multiple path segments for links. Check out the docs: reactnavigation.org/docs/8.x…
// Matches /files/a and /files/a/b 'files/:parts+' // Matches /files, /files/a and /files/a/b 'files/:parts*'

ALT // Matches /files/a and /files/a/b 'files/:parts+' // Matches /files, /files/a and /files/a/b 'files/:parts*'

2
10
1,100
Soon @​react-navigation/native will work on web without react-native-web! 👀
1
4
65
4,367
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
@reactnavigationJun 17
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
1
20
3,270
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
1
127
8,949
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
2
103
7,161
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,336
Great talk about how navigation works under the hood by @kafara_kacper and @__ubax__
1
13
676
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
@swmansionMay 11
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,482
Load more