
Introducing React Navigation for React Native - evv
https://reactnavigation.org/blog/2017/1/Introducing-React-Navigation
======
a13n
Awesome! A better navigator is the #2 feature request for React Native - this
solves a huge pain point. [https://productpains.com/product/react-
native](https://productpains.com/product/react-native)

In my experience this was one of the worst parts about using React Native -
that there wasn't a simple, easy router (like React Router for web).

Looking at the GitHub repo ([https://github.com/react-community/react-
navigation](https://github.com/react-community/react-navigation)), it looks
like this was a collaboration between FB engineers, Exponent (great product +
team!), and the open source community. So thankful for these incredibly smart
folks working on software we can all use for free. <3

~~~
htormey
Have you seen:

[https://medium.com/@jschloer/react-router-v4-with-react-
nati...](https://medium.com/@jschloer/react-router-v4-with-react-
native-5f2005ab2a72#.kbbiuggxn)

[https://react-router.now.sh/MemoryRouter](https://react-
router.now.sh/MemoryRouter)

One of my clients uses react-router for web and we are exploring reusing it in
our react-native apps.

~~~
thinkloop
Have you considered dependency-free state-driven routing:
[http://www.thinkloop.com/article/state-driven-routing-
react-...](http://www.thinkloop.com/article/state-driven-routing-react-redux-
selectors/)

~~~
htormey
Nope, will check it out, thanks.

------
fersho311
Definitely going to try this out. Having a consistent navigation library seems
to be the last missing puzzle when building cross platform apps. Currently our
project is set up to use the same Redux reducer and actions codebase for both
mobile and web platform. The goal is to share all codebase and adding a new
platform will be simply creating a new view component. Unfortunately, a lack
of unified navigation library has caused us to create all kinds of hacks to
get to make things work. We use react router on web and react-native-router-
flux on native.

I'm part of a group working together on a project to teach ourselves coding so
if anybody has any existing solution or alternatives, please share!

~~~
htormey
This is exactly the direction I am moving with my client. Prior to reading
about this library I was planning on using the latest version of react-router
to do this. See:

[https://github.com/ReactTraining/react-
router](https://github.com/ReactTraining/react-router) [https://react-
router.now.sh/MemoryRouter](https://react-router.now.sh/MemoryRouter)
[https://medium.com/@jschloer/react-router-v4-with-react-
nati...](https://medium.com/@jschloer/react-router-v4-with-react-
native-5f2005ab2a72#.kbbiuggxn)

Navigation is a big pain point for sharing code between web and native.

------
explorigin
No mention yet of [React Native Navigation]([https://github.com/wix/react-
native-navigation](https://github.com/wix/react-native-navigation)) which
would probably be the closest competing project.

A cursory look show that the parent project does not use a native navigation
bar on Android. NavBar buttons look pretty bad. RNN linked above uses native
NavBar/NavBarButtons on both platforms and looks much better.

But RNN comes with it's downsides. It's under heavy development. It's less of
a community project (wix offers it up but doesn't take community patches
much).

~~~
brentvatne
react-navigation has very different goals, and it's still in beta, things like
transitions are likely to change significantly before 1.0 release.

The main difference in the goals is that react-navigation is intended to be
entirely cross-platform, including iOS, Android, ReactVR, and web. It's
implemented entirely in JavaScript which has a huge upside because you can
ship updates to it OTA and you can submit patches without needing to know
ObjC/Java and the platform's respective navigation APIs. It will be an
important library to push forward development of more powerful general purpose
native APIs, for example the native driver for Animated was built with the
intention of making it possible to run navigation transitions on the UI
thread. Similarly, this will be an important use case for a better gesture API
([https://twitter.com/notbrent/status/824683858037649408](https://twitter.com/notbrent/status/824683858037649408)).
I wrote more about why we should try to use JavaScript as much as possible
with React Native here: [https://blog.getexponent.com/good-practices-why-you-
should-u...](https://blog.getexponent.com/good-practices-why-you-should-use-
javascript-whenever-possible-with-react-native-26478ec22334#.lbbxfjjp1)

OTOH, if what you _need_ is a navigation library that is 100% faithful to the
platform's built-in APIs, and you need that right now, then you will probably
want to use something like react-native-navigation (Airbnb is working on open
sourcing a similar library that they use in their app).

------
dfischer
Can anyone comment on React native as a solution over going completely native
with Swift for iOS development? Anyone with a lot of experience doing pure
native that is convinced react native is the way?

Pros/Cons?

~~~
htormey
Native iOS developer (worked at Facebook/Apple) who's currently doing a bunch
of contracting at the moment. I think React Native is great.

I think the biggest pros of react native are:

1) Not having to compile to see UI/Business logic changes (Swift compiler is
slow).

2) The ability to push changes over the air after you switch.

3) Large parts of your app just work cross platform with minimal changes (I've
shipped two iOS/Android apps).

4) If you have a react web team, they can now review and help out with your
mobile apps.

5) It's easy to keep product in synch across multiple platforms (i.e
android/iOS release at the same time).

I think the big cons are:

1) It's Javascript.. ES6 + babel makes this a lot less terrible than it was in
the days of web apps wrapped as native apps but it's still Javascript.

2) If you have to do long running background tasks (network polling,
bluetooth, music, location, etc) you basically have to do it in native code.
This can be a big architectural pain in the ass depending on what your app
does.

3) Ramp up time. Learning about React and all the third party libraries
(Redux, etc) you will need to be productive takes time.

4) Cross platform testing. I.e if you share code with your web/android
engineers, they will need to be disciplined about not breaking things (npm and
versioned shared libraries helps with this).

5) Third party library quality in Javascript land can vary a lot. This
requires you spend quite a bit of time vetting them.

If your based in the Bay Area I'm going to be giving a talk on on some of this
in March.

~~~
solidr53
For no #2 , have tested [https://github.com/devfd/react-native-
workers](https://github.com/devfd/react-native-workers) ?

it works pretty well, but havent done anything other than syncing and
notification pushing. other API s should work

~~~
htormey
From the lifecycle section of the repo:

"the workers are paused when the app enters in the background the workers are
resumed once the app is running in the foreground"

This won't work when your app is backgrounded or if the screen is locked.

------
matthewvincent
This addresses probably my number one pain point jumping between React - React
Native apps. Looking forward to trying it out!

~~~
Callmenorm
I agree with you on it being a painpoint.

Is this a web router as well? I think they hinted at that, but it was a little
unclear to me. Also, is it really true that react native apps have routing
that is too complex for a URI? I can't think of a reason why that is
immediately true.

~~~
evv
On mobile apps, URIs are more like actions than like navigation state. The
navigation state can be quite complex because there are often several
navigators in an app that each need to maintain the state of several screens.

For an example of how this works on web, try browsing to a doc on on
reactnavigation.org, then navigate to the home page, and navigate back to
'Docs'. Notice how the state of the docs tab is retained, even though the
previous URI had no awareness of that state. Most websites don't behave this
way, but mobile apps do.

------
frankblizzard
This looks great and I will definitely try it out asap. I currently work with
[https://github.com/aksonov/react-native-router-
flux](https://github.com/aksonov/react-native-router-flux) which also worked
well in our case and covers most of our needs really well.

------
pier25
The fact that this and practically all React packages are community maintained
is one of the pain points with React IMO.

I'm not saying React and React Native should come included with a router, but
that Facebook should provide an official one just like Angular and Vue do.

------
htormey
Anyone familiar with how this compares to react-router? I hear they are adding
react native support.

[https://github.com/ReactTraining/react-
router](https://github.com/ReactTraining/react-router)

~~~
hackerboos
It's written by some of the same contributors. Namely Mateusz Zatorski
@matzatorski

------
migueloller
This is awesome! I've been checking every morning since November (it was
targeted for release at that time and has been pushed) for this release ever
since it was added to the React Native roadmap
[https://github.com/facebook/react-
native/wiki/Roadmap](https://github.com/facebook/react-native/wiki/Roadmap)

A good navigation library is the one thing that was missing for React Native
and I'm glad to see the collaboration from folks from Facebook and Exponent
make this happen.

------
adgasf
Screenshots would have been a good idea for an announcement page

~~~
zaroth
I was pleasantly surprised to see great screenshots in the documentation!

Unfortunately only for the first few sections, I assume they will be adding
more screenshots to the later sections.

They have a Navigator demo app, would be nice if they just put it on the store
so we could grab it and just see first hand everything working.

------
cridenour
Wow! Looks great. Love the simplicity of drawer[1] and tab[2] navigation as
well. Compared to current offerings, a lot less intimidating.

[1]
[https://reactnavigation.org/docs/navigators/drawer](https://reactnavigation.org/docs/navigators/drawer)
[2]
[https://reactnavigation.org/docs/navigators/tab](https://reactnavigation.org/docs/navigators/tab)

------
sagivo
what's the relations of this with the official RN library? we have
`NavigationExperimental`, `Navigator`, `NavigatorIOS` and tons of other
navigation libraries out there.

~~~
a13n
Looks like it was made via a collaboration of several core React Native
contributors so I'd guess this will be the future of navigation for React
Native.

[https://github.com/react-community/react-
navigation/commits/...](https://github.com/react-community/react-
navigation/commits/master)

------
arvinsim
Great! Coming from using NavigationExperimental, I am happy that we have
converged on a solution that is much easiee to implement.

------
fourstar
Is anyone here sharing code with react-native and react? I was looking @
[https://github.com/este/este](https://github.com/este/este) but when trying
to run the iOS app, ran into a bunch of roadblocks. It is compelling, though.

------
stevejohnson
Unfortunately it breaks command-click to open links in a new tab, and instead
navigates within the same page.

~~~
evv
This should be an easy fix. If somebody wants to jump in, this is a great
first task!

[https://github.com/react-community/react-
navigation/issues/9](https://github.com/react-community/react-
navigation/issues/9)

[https://github.com/react-community/react-
navigation/blob/mas...](https://github.com/react-community/react-
navigation/blob/master/website/src/Link.js#L30)

------
cel1ne
After having read the API I decided to use a hand-written navigator instead of
ReactNative's.

Key was to explicitly expose the z-index/component-ordering, so what it does
is accepting a "render-list" of compnentName/props/animation triples which it
then displays in absolutely positioned AnimatedViews on top of each other.

This way I have good flexibility without introducing metaphors that keep
breaking.

------
clement75009
Looks great. I like that the documentation already is very comprehensive, with
a Hello World and several integration guides. Great launch!

------
shekispeaks
The design of the website does not tell us who the maintainers / creators of
the library are. At times it feels like a blessed library by the react-team.
Most likely this was not intentional. It would be cool to have an about-us
page where they talk about the maintainers and the "react-community".

~~~
acemarke
The React team has avoided blessing any specific libraries, beyond things like
Babel for JSX transformation.

React-Router is not an "official" library. As far as I know, neither is React-
Navigation.

That said, I also don't know much about the ins and outs of React Native, so
there _may_ be some semi-official-ish overlap between React-Navigation and
React Native.

(Also, this totally causes an abbreviation clash, as "RN" now has multiple
meanings. Oops.)

~~~
joncrocks
Having said that, the official roadmap ([https://github.com/facebook/react-
native/wiki/Roadmap](https://github.com/facebook/react-native/wiki/Roadmap))
mentions a navigation library should be coming in Jan, and the timing and
people involved seems to line up with this project.

~~~
brentvatne
this is indeed the project mentioned in the roadmap!

------
chukye
I'm wondering, what is the performance of that? I tried to use the ReactNative
main Navigator, some community modules, but all have a very poor performance,
the best I found is building something very tight with the states so it will
not drop perf as we add more components.

------
peterkieltyka
Awesome project. Another library which has been iterated over 1 year and used
in production at Pressly is [https://github.com/pressly/scene-
router](https://github.com/pressly/scene-router)

------
v512
I spent countless hours on trying to fix React native navigation while I was
developing a test app. I am glad finally there is some good solution to it.

------
salakotolu
Right on time. Will check this out.

------
lquist
What are the biggest production apps on React Native?

~~~
lavingiasa
There seem to be quite a few big names on [https://facebook.github.io/react-
native/showcase.html](https://facebook.github.io/react-native/showcase.html)

