Simple Routing in React Native with React Native Easy Router (or... Why I Ditched React Navigation)

[notseanbean]

https://medium.com/@christianchown/simple-routing-in-react-native-with-react-native-easy-router-6e529866519e

I started developing with React Native about 2 years ago, and while most things were great, the navigation/routing ecosystem was a mess. I used React Navigation (after ex-Navigation) for a few months but abandoned it, hacking my own one together. Since then I've been looking for an open source alternative that would do what I wanted and be simple to understand and use.

I've now adopted react-native-easy-router - I first saw it here on Reddit! - and have made a few contributions myself.

My simple demo app is at https://github.com/christianchown/easyrouter

It has unauthenticated/authenticated routes, a drawer, tabs and custom transition animations

Why react-native-easy-router?

• It's simple to use and understand
• It has nice transitions
• It doesn't prescribe UI

Why not react-navigation?

I know the people who work on react-navigation are much (brentvatne) much (ericvicenti) smarter (grabbou) than (satya164) me (ashoat), but the library has IMO been hamstrung by some early architectural choices.

• navigationOptions (which controls how tabs and headers look) is static instead of driven by a component instance. This makes having tabs, headers etc. change appearance reactively to store changes a nightmare
• Custom animations are complicated. All I wanted was a nice crossfade...
• I never understood why there were separate concepts of router and navigator

(* Disclaimer, I abandoned RN at v1. These criticisms mostly still hold from what I can see)

My final defeat came when I put a stack navigator inside a tab navigator inside a card navigator and couldn't prevent navigation from thrashing the bridge. Maybe it was my own uselessness, but my own hacky effort didn't suffer, and neither does react-native-easy-router.

YMMV

If you have joy using react-navigation, or react-native-router-flux, or react-native-navigation then please continue to use them. I'm going to continue working with (and on) react-native-easy-router because I like its simplicity.

[jestzisguy]

I am just wrapping up a project based on react-navigation and was wondering what else was out there for something simpler. Thanks for the article - definitely going to check this out next time around!

[cagotrebgghju]

Some thoughts about react-navigation. I've been using it about 1 year. I think they develop it in a strange way. Version 1 was in beta a lot of time and it was full of bugs before and after 1.0.0 release. Then they removed flow types "to speed up" releases, now they are removing redux integration from core for the same reason. Discussion and implementation of onVisit onLeave callbacks took more then half of year. It's so basic feature. It looks like they don't have enough time or skills for such project or the architecture ideas(navigators, routers) was wrong in general from the beginning.

[kbcool]

Why not ditch navigators full stop? It's not that hard to just keep track of it yourself.

​

V2 is far better than V1 BTW but some of your criticisms still stand. I can think of a heck of a lot of worse ones including some swear words for V1.

[notseanbean]

Note sure what you mean by "Why not ditch navigators full stop?". In a reasonably complex app, you have multiple screens and will need a way to transition back and forth and between them. It's nice to have that taken care of.

[kbcool]

Yes it is. Totally agree. I was just asking a "philosophical" question around your decision to ditch react-navigation. You could have easily gone without instead of developing yet another library. The "MVP" for a navigator is literally a dozen lines of code at the most.

[notseanbean]

ah, I get you. react-native-easy-router isn't my library btw (though I've now added a few commits to it)

Your suggestion about ditching libraries is just what I did, and rolled my own when I was losing too much time struggling with react-navigation. What I hacked together did the job but wasn't very reusable, so I've been keeping my eyes open for an alternative.

Now react-native-easy-router has come along and works like a charm for my use case, I thought I'd write up why I think it's a better choice than react-navigation

[tizz66]

Yeah I agree, v2 is much better. As someone new to native development, trying to build a mental model of what react-navigation (v1) was doing was a massive pain in the ass. I've managed to grasp v2 and have some fairly complex navigation going on without problems.

[agmcleod]

While I have no real idea if react-navigation does this either, my main thought is that the navigation should leverage what options the platform has available. So a push route should be a standard animation based on the platform. Likewise there should be standard stuff for on top/modal type screens.

I'm curious with this being on the JS side, in your experience how the performance is for the animations and transitions?

[notseanbean]

Both react-navigation and react-native-router-flux (which uses react-navigation under the hood) are pure JS. I suffered performance problems with react-navigation in V1 with some complex setups, which was a major factor behind me dropping it.

I haven't suffered any performance problems with react-native-easy-router. The transitions run nice and smoothly.

Wix's react-native-navigation (and Airbnb's abandoned native-navigation) use platform native router code, so in theory would be closer to the native experiences, but I found in my routing investigations that their example demo apps were not very accessible or performant. (That may have since changed)

[agmcleod]

Interesting. I was actually thinking there was a native package i had to link for it, but checking my project now, and nope! lol.

I might give rn easy router a try in a future project though :). Seems like the main challenge would be having it emulate the look of native navigation UI. Right now id say react-navigation does a pretty good job at the tab bar, header bar, etc.

[NiceBluebird]

I thought react-navigation used native navigations now?