Navigating Navigation in React Native

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

Spencer Carli
Nov 13, 2017 · 6 min read

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…

Image for post
Image for post

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

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?

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

  • 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

  • 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

  • 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

  • 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

Image for post
Image for post
Image for post
Image for post
React Navigation
Image for post
Image for post
Image for post
Image for post
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

“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

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

Image for post
Image for post

Features

  • 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

  • Can be confusing. This is mostly a documentation & example problem (working on it!)

React Native Navigation

Image for post
Image for post

Features

  • 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

  • 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.

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.

Navigation is just one aspect of your app. If you’re interested in what my exact development environment is and the steps I take for every React Native app I build, check out this free series.

Handlebar Labs

Building React Native & Meteor apps and teaching others how…

Spencer Carli

Written by

Student. Teacher. Pizza fiend. I write about React Native, Meteor, and more. http://learn.handlebarlabs.com

Handlebar Labs

Building React Native & Meteor apps and teaching others how to do the same.

Spencer Carli

Written by

Student. Teacher. Pizza fiend. I write about React Native, Meteor, and more. http://learn.handlebarlabs.com

Handlebar Labs

Building React Native & Meteor apps and teaching others how to do the same.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store