Navigating 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…

React Navigation

React Navigation Feedback

The reality is that all of those navigation solutions I showed you earlier still exist, and more. But I think I can help you make your decision easier…

The Primary Contenders

In the JavaScript corner we’ve got React Navigation and in the Native corner we’ve got React Native Navigation.

“Why not X? It’s way better than those pieces of junk!” Everything has their pros and cons. These are the ones that I see having the most flexibility, greatest adoption, and continued support.

Also, I told you this was opinionated.

So, between these two navigators, which should you choose?

First: Environment Considerations

Before you start weighing the pros and cons of each of these solutions you’ll have to find out if you can actually choose between them.

If you’re using Expo or Create React Native App to build your React Native app, tools that make building RN apps much easier, you’re going to be in the React Navigation camp. That’s because, as part of what makes those tools so easy to use, you don’t have access to the native parts of the React Native app — which React Native Navigation requires.

Therefore, if you choose to build an app with either of those tools (which is how I build apps 90% of the time), you’ll be rocking React Navigation.

With that being said, if you start your React Native app via react-native init you can use React Navigation or React Native Navigation because you’ve got access to the native portions of your RN app (the ios/ and android/ directories).

React Navigation

Features

Simple installation — it’s just an npm package
Navigators are simply components
Stack navigator, tab navigator, and drawer navigator are built in
Platform specific components (navbar on iOS looks like it should, navbar on Android looks like it should)
Customizable but intelligent defaults

Drawbacks

Easier to make poor performance apps because it all runs on the JavaScript thread (you can minimize/eliminate this though)
Can be confusing. This is mostly a documentation & example problem (working on it!)

React Native Navigation

Features

It’s performant and it’s hard to break that. That’s because navigation is happening off the JavaScript thread
It uses the “real” navigation components (header, tab bar) because it’s interfacing with the native components
It’s simple to use, once it’s installed
Minimal boilerplate, once it’s installed

Drawbacks

Complex installation for non-native developers (like me). For example, when putting together my demo for the talk, I couldn’t debug a simple issue I made when installing because I just don’t know Android native stuff
Harder to use non-Redux state management solutions (though work arounds exist)
No way to statically define route configuration (personal preference of mine)

You can view a comparison of these two navigators by running either of the projects in this repo.

spencercarli/navigation-comparison

In conclusion: there are a lot of great navigation solutions out there but at the end of the day I would be looking at React Navigation or React Native Navigation for my navigation needs. They’re both great libraries.