Navigating Navigation in React Native

An Opinionated Take on the Current State of Navigation in React Native

This is an adaptation of a talk I recently did at NashReact. You can view the slides in their entirety on SlideShare.

You’re new to React Native. Or maybe you’re about to start on a big project that uses React Native.

You’re bound to ask the question — “which navigator do I use?”.

And if you head to google you’re likely to find a few options…

Those were only the first few I could think of — no doubt that there are more! So, why is it like this?

Two Categories of Navigators

You can break all navigation solutions for React Native into two categories — JavaScript and Native.

Javascript navigators are written entirely in JavaScript and executed entirely in JavaScript.

Native navigators are navigators written in the platform’ss native language (typically Objective-C or Java) and are exposed to React Native via a JavaScript API. The primary difference is that navigation is executed off of the JavaScript thread.

But Why so Many Options?

Totally valid question — it seems like two solutions would give, right? Not in JavaScript land! Let me give you a brief (personal) history lesson…

I started using React Native full-time very soon after it was open-sourced (within weeks). So I’ve tried quite a few navigation solutions in the products I’ve worked on. I’ll introduce you to the ones I used daily and had dozens of hours invested in:

NavigatorIOS

Birth: React Native is released

Pro: Used the actual iOS native navigator

Con: iOS Only

Death: Android support added to React Native

When React Native first came out not a ton of people were using it, there was one navigation solution, and you pretty much did things in one way (because it was so new). NavigatorIOS worked beautifully in this world, until Android came along.

Navigator

Birth: Android support added to React Native/React Native release

Pro: JavaScript based — completely cross platform

Con: Somewhat confusing, though cross platform it wasn’t designed for both platforms, potential for performance issues

Death: Community take over/NavigationExperimental

When we started working on Android support we switched to the Navigator component. It seemed like the most natural progression and was one of the official navigators. It wasn’t perfect though.

ExNavigation

Birth: Pain from Navigator component

Pro: Cross platform, great defaults, easy to use

Cons: Limited in its breadth of functionality, potential for performance issues

Death: React Navigation

ExNavigation, to this day, has my favorite API of any navigator. It was easy to pick up and easy to use in my tutorials and courses. But, like everything, it wasn’t perfect. The project I was working needed more customized navigation solutions (designers 🙄😉)

NavigationExperimental

Birth: Need for a better & more configurable navigator

Pro: Highly configurable

Con: Confusing, experimental, potential for performance issues

Death: React Navigation

NavigationExperimental was, as you can guess from the name, an experiment in building a more configurable navigation solution. It was confusing though — I used it for months and, honestly, don’t think I ever really got a grasp on it.

Navigation Today

You may have noticed that the last two navigation solutions I used died off as a result of the same navigation library so, the undisputed champion of navigation in React Native is…