React Native Routers/Navigators

It's really difficult to pick a good solution. This is a survey of the options available.

heads up: this is a pretty old post, it may be outdated.

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.

Wix's react-native-navigation

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.
  • ❌ v2 is under actively development and will change the API. They've acknowledged that this will slow down maintenance on v1
  • ❌ has native bits, an update here requires an app store update
  • ❌ requires a central registry of screens
  • ❌ state is maintained natively. This means redux time travel doesn't work. It might be possible to keep them in sync, but Wix isn't bullish on it.

react-navigation

  • ✅ 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 redux integration
  • ⚠️ 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 v1 yet, but the API has stabilized
  • ⚠️ Animation is JS based. It shouldn't have any perf issues because it uses Animation to 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.

react-router-navigation

  • ✅ 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 v1 yet

react-native-router-flux

  • ✅ API is mostly just components
  • ✅ has a decent community
  • ✅ plays will with redux (obviously)
  • ⚠️ "meh" docs
  • ⚠️ is starting to be seen as old and crufty
  • ❌ animations aren't great. They're in the uncanny valley.
  • ❌ based on NavigationExperimental which is deprecated

AirBnB's native-navigation

  • ✅ Integrates with redux
  • ✅ decent doc site, but incomplete
  • ✅ Native animations!
  • ✅ Decent API, not the smallest, not the largest
  • ❌ super new, pre v1
  • ❌ not used in prod at AirBnB
  • ❌ stated "not ready for prod"
  • ❌ Development has stalled

Built-in NavigatorIOs

  • ❌ Only works on iOS
  • ❌ Not a react-y API
  • ❌ On track to be deprecated

Built-in NavigationExperimental

  • ❌ Deprecated

ReactRouter

  • ✅ The ReactRouter we all know and love works on Native!
  • ✅ Uses the v4 API which is just components, it's very react-y
  • ✅ Good redux integration
  • ✅ 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