I'm in the middle of building a new React Native application, and just went through the process of picking a navigator/router for the project. This is a core piece of infrastructure, and the solution space is … frothy. I started with the first part of this overview post, which does a good job of breaking down all the different routers/navigators. What follows are my notes from a day of looking at all the solutions.
Love: it's got native animations. Dislike the API, it's verbose and not react-y. This leads to a higher bug potential, and lack of debug-ability.
- ✅ maintained by Wix
- ✅ animation is done natively. This means it looks right.
- ✅ docs are pretty good
- ✅ Automatically switches to top nav on Android and tab bar on iOS. Badges are handled.
- ✅ has built-in support for a "light box"?
- ✅ has built-in support for a drawer
- ✅ has built-in support for modals
- ⚠️ Looks like it mucks with the way Android works quite a bit. There's a lot of native code to copy/paste. Not sure how this affects hot reloading.
- ⚠️ We're a bit constrained by the built-in components. This isn't necessarily a problem.
- ⚠️ Supports deep links, but there's an amount of boilerplate, and there's no enforcement that links are structured or unique. It's a bolt-on, not a primary concern.
v2is under actively development and will change the API. They've acknowledged that this will slow down maintenance on
- ❌ has native bits, an update here requires an app store update
- ❌ requires a central registry of screens
- ❌ state is maintained natively. This means
reduxtime travel doesn't work. It might be possible to keep them in sync, but Wix isn't bullish on it.
- ✅ docs are pretty good
- ✅ Supported by Expo and Facebook. Seems to have wide community support.
- ✅ Will be the official solution … when it's stable. It's already blessed.
- ✅ also works on web
- ✅ stated "sensitivity" toward API changes.
- ✅ first class
- ⚠️ API has a lot of surface area
- ⚠️ Is of the opinion that URIs are not sufficient for native, but support seems to be just fine
- ⚠️ Not
v1yet, but the API has stabilized
- ⚠️ Animation is JS based. It shouldn't have any perf issues because it uses
Animationto get to the native thread, but it's just trying to copy the native animations, which means there's an uncanny valley. After trying it out on iOS, it's not perfect, but it's pretty good. You have to really look to notice. Mostly, the left and right button transitions aren't right.
- ⚠️ Has a just a few native bits (deep linking). An update here requires an app store update.
- ✅ based on react-router (that we know and love),
react-navigation(the community choice), and
react-native-tab-view(a very robust tab switcher).
- ✅ might have native animations in the future
- ✅ API has everything as components. It's very react-y and small surface area.
- ✅ URIs are first-class citizens, deep linking is easy
- ✅ small wrapper around more developed and supported projects
- ⚠️ docs are minimal
- ❌ small community
- ❌ new project, not
- ✅ API is mostly just components
- ✅ has a decent community
- ✅ plays will with
- ⚠️ "meh" docs
- ⚠️ is starting to be seen as old and crufty
- ❌ animations aren't great. They're in the uncanny valley.
- ❌ based on
NavigationExperimentalwhich is deprecated
- ✅ Integrates with
- ✅ decent doc site, but incomplete
- ✅ Native animations!
- ✅ Decent API, not the smallest, not the largest
- ❌ super new, pre
- ❌ not used in prod at AirBnB
- ❌ stated "not ready for prod"
- ❌ Development has stalled
- ❌ Only works on iOS
- ❌ Not a react-y API
- ❌ On track to be deprecated
- ❌ Deprecated
- ✅ The
ReactRouterwe all know and love works on Native!
- ✅ Uses the
v4API which is just components, it's very react-y
- ✅ Good
- ✅ URIs are first class citizens, deep linking is easy
- ✅ Works on the web too
- ✅ Decent docs
- ❌ No animation support, unlike other solutions, this doesn't even try to animate
- ❌ No concept of modals or stacks. This is just a router