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