
React Native Navigation Library - HectorRamos
http://airbnb.io/native-navigation/
======
danappelxx
Ummm [0]

...would appreciate an explanation here.

[0]: [https://github.com/airbnb/native-
navigation/blob/91ae656192d...](https://github.com/airbnb/native-
navigation/blob/91ae656192d66ea716b900d3bec0f22dc8bd1faa/lib/ios/native-
navigation/ReactNavigation.swift#L55-L58)

~~~
spotman
This has a feel of it solved a race condition due to scheduling something on a
few ticks later. So it might accomplish not only running something on the main
queue but also sneakily after something else finished. For example if you call
something like this at the end of view did load, other code that also runs on
the main thread may run before it. It's async.

Having said that, it kind of feels hacky. I have certainly seen this in
various codebases and I can't comment on react native but just with standard
iOS programming it often points to a lack of understanding of lifecycle or
similar order of when things are happening.

~~~
mmjaa
Isn't this the standard "Let the queue pump events" technique for dealing with
the async UI elements in iOS that don't always behave like you expect them to
- such as the system alerts? I mean, I'm not justifying this code, which looks
quite weird, but one of the reasons for it may be that the framework has to
allow events to pump through the iOS queues, such that events propagate all
the way through to the system alerts ..

------
htormey
Awesome! I wonder how this compares to wix's native navigation stack:

[https://github.com/wix/react-native-navigation](https://github.com/wix/react-
native-navigation)

The problem with all the JS based navigation stacks for React Native (react-
native-router-flux, react-router, React Navigation) that I have tried is that
if you need to have a back stack, they keep the previous scene in memory. i.e
if you look at the 3D view hierarchy in XCode you will see the screen prior to
the one you pushed.

This really sucks for overdraw perf and completely breaks accessibility on
Android. See:

[https://react-native.canny.io/feature-
requests/p/navigator-b...](https://react-native.canny.io/feature-
requests/p/navigator-breaks-android-screen-reader-accessibility)

------
lacker
This was a pretty interesting presentation at React Conf. Basically, the
Airbnb app started off being totally developed in native code, and they only
added React Native later on, so it was really important that their navigation
solution be able to handle transitions between screens implemented in native
code and screens implemented in React Native.

I liked Leland's metaphor of calling apps like Airbnb which started out
without React Native as "brown field" development and calling apps that start
out as React Native "green field" development.

~~~
mhluongo
> I liked Leland's metaphor of calling apps like Airbnb which started out
> without React Native as "brown field" development and calling apps that
> start out as React Native "green field" development.

FWIW those are pre-existing industry terms (not React Native or mobile
specific)

------
migueloller
I'm seeing a lot of people being confused with many of the comments in React
Native posts. Some people in these comments now aren't sure if the "right"
navigation solution is React Navigation or Native Navigation. I think a good
document to follow to understand Facebook's plans with the project is React
Native's Roadmap [1].

In there you'll see that React Navigation is a solution aimed at "Green Field"
projects (as Leland Richardson from Airbnb calls new React Native projects)
and replaces Navigator, Navigation Experimental, and Ex-Navigation. On the
other hand, Native Navigation is aimed at "Brown Field" projects (like
Airbnb's app, which was built in native much before React Native was open
sourced) and replaces NavigatorIOS.

You can also see that various features in the roadmap are in collaboration
with other organizations (Expo for Create React Native App and Airbnb for
React Native Maps).

Indeed React Native has been moving extremely fast but after our decision to
go with it over a year ago we've never thought even once about going back.

[1] [https://github.com/facebook/react-
native/wiki/Roadmap](https://github.com/facebook/react-native/wiki/Roadmap)

------
evv
Congrats to the team at AirBnB on the exciting launch! As somebody who has
thought a lot about navigation on React Native, I'm super excited to see an
easier way to utilize the native navigation views on each platform.

React Navigation, released a few weeks ago, includes a customizable JS re-
implementation of the native views, and it also provides routers that make it
very easy to plug your navigation logic into redux. Because each screen makes
no assumption about the surrounding app, it will be very easy to switch from
React Navigation to AirBnB's native-navigation.

The RN community has been consolidating efforts between several navigation
solutions. React Navigation is an alternative to Navigator, Ex-Navigator,
NavigationExperimental, and Ex-Navigation. And now, thanks to native-
navigation, the community has a great alternative to NavigatorIOS.

~~~
logicallee
>React Navigation, released a few weeks ago,

Wow, you guys have a tight curve you're staying ahead of :-)

~~~
stagbeetle
> _[REDACTED]_

React Navigation is a module for React (which has been around for four years).
Instead of having to DIY navigation, you now can use the native system's
(iOS/Android) navigation layout. Ex:
[https://reactnavigation.org/](https://reactnavigation.org/)

You're not replacing your tools. You're just getting someone else to coat your
drill bits for you to save time.

I just started using React today, so I may be off here, but I think it's
pretty straightforward if you googled it.

Otherwise, if you're referring to how "bleeding edge" the guy has to be, I'd
imagine he's in a competitive field (or passionate about his projects).

Hell, I'm not in either of those categories, but I think I'll start using this
because it looks really helpful.

~~~
logicallee
I removed the language you quoted :). Most programmers don't change the oil
they use to coat their drill bits, every few weeks either :)

Edit: thanks.

------
LAMike
Anyone have a screenshot of what the UI looks like?

------
rattray
Doesn't seem to have been ready for anyone to try it out; they don't have
"basic usage" docs ready yet:

[http://airbnb.io/native-navigation/docs/guides/basic-
usage.m...](http://airbnb.io/native-navigation/docs/guides/basic-usage.md)

    
    
        # Basic Usage
    
        _This documentation has not been created yet. Sorry about that! Hang tight!_

------
grabbou
Native navigation is definitely a great addition to the community. It's good
to see a company, like Airbnb, driving its feature development by their use-
cases. Having such a solution in production, used at such scale, is definitely
going to secure stability of navigation - something that we were missing for
quite a while.

------
nomnombunty
We are currently planning on switching from Navigator
([https://facebook.github.io/react-
native/docs/navigator.html](https://facebook.github.io/react-
native/docs/navigator.html)) to React Navigation
([https://reactnavigation.org/docs/intro/](https://reactnavigation.org/docs/intro/)).
After seeing Airbnb's React Native Navigation library, I am not sure what to
choose any more.

React Navigation seems to be the framework that is endorsed by the react
native team. However, Airbnb's React Native Navigation library seems to be
more proven since they had been using it in production. I am wondering if
anyone know what are the benefits of using React Native Navigation vs React
Navigation

~~~
htormey
My team is in the process of swapping out the navigation stack in one of our
apps (we are going with the one from wix for now). Something you might want to
consider is the following (copy pasted from my other comment):

"The problem with all the JS based navigation stacks for React Native (react-
native-router-flux, react-router, React Navigation) that I have tried is that
if you need to have a back stack, they keep the previous scene in memory. i.e
if you look at the 3D view hierarchy in XCode you will see the screen prior to
the one you pushed."

The docs for airbnb's new navigation stack says the following:

[http://airbnb.io/native-navigation/](http://airbnb.io/native-navigation/)

"React Native Navigation by Wix engineering is an alternative library that
uses "Native" navigation components of each platform, and has been around
longer than Native Navigation. If you need a stable / production-ready
navigation library today that uses native platform based navigation
components, we recommend you check this library out."

They also claim they are not using this library in their main app yet.

I'll be writing up a blog post about my experiences with the wix nav stack
migration once we get our app out.

It's a shame the situation around navigation stacks with React Native is so
confusing right now.

~~~
merrvk
> I'll be writing up a blog post about my experiences with the wix nav stack
> migration once we get our app out.

Would be really interested in this, have been looking at doing exactly the
same and am attempting to quantify how much work it would take.

~~~
jasongrishkoff
Ditto. Also keen to see your blog post!

------
javiercr
I'm a bit confused. From this library's README:

> If you are investigating navigation solutions and you are okay with
> JavaScript-based solutions, we also encourage you to check out React
> Navigation.

However if you go to React Navigation home page [1] you find this:

> Navigation views that deliver 60fps animations, and __utilize native
> components __to deliver a great look and feel.

It looks like every RN navigation library claims to be more "native" than the
previous ones.

[1] [https://github.com/airbnb/native-
navigation/](https://github.com/airbnb/native-navigation/)

[2] [https://reactnavigation.org/](https://reactnavigation.org/)

~~~
Benjamin_Dobell
Everything in React Native is "native" views. The issue is that the RN
community seems to be pretty heavily divided with respect to exactly where the
API boundary should be.

AirBnB's native-navigation library literally has native iOS and Android code
to create views, transitions etc.

react-navigation on the other hand is mostly JS driven, instead using the core
functionality of React Native, which does generate native views.

The problem with react-navigation (and _many_ libraries using a similar
approach) is that you don't get a true native feel once you start interacting
with the UI. This is because the JS -> native bridge is async, meaning you
literally _can 't_ handle events as quickly as they're dispatched in native
code - particularly if the events are synchronous.

I'm a huge fan of AirBnb's approach. Doing things in JS just because you "can"
is inherently broken (as described above). Checkout the following Github issue
for a demonstration of the issue: [https://github.com/react-community/react-
navigation/issues/1...](https://github.com/react-community/react-
navigation/issues/133)

------
shafyy
This looks great. I wonder when a dominant library will emerge for navigation.

Also, I am a little bit confused, because react-navigation makes it sound like
there are going to be merged into core once stable:

Once stable, NavigationExperimental will be deprecated in favor of React
Navigation. React Navigation is a collaboration between people from Facebook,
Exponent and the React community at large. [1]

What do you guys make of that statement?

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

------
htormey
Another thing to consider about Airbnbs nav stack is that it's written in
swift.

This is important because Apple can still make changes to Swift which can
break language backward compatibility.

This happened last wwdc. So if you use any third party libraries that are
written in swift they won't work till the authors or you update them to the
new language conventions.

The wix native library which they reference is written in objective c so this
won't have that problem.

~~~
jeanregisser
Indeed, and having a Swift dependency adds roughly 5MB to the final app
package (as it then needs to include Swift runtime frameworks).

------
drumttocs8
Maybe a little tangential- but with all the talk about Progressive Web Apps,
what should we expect to happen with web/native hybrids like React Native?
Mobile computing power is at the point where there shouldn't be much problem
using simple Javascript and (gasp) jQuery to build an app, then wrapping it
with PWA functionality.

------
phantom_package
It's obvious that this is a super-early release, but I'm happy that AirBnB ENG
is working on a navigation solution.

Also:

 _On iOS, ViewController transitions can be animated using Lottie. It 's
possible we could add support for such a feature into Native Navigation._

Yes please.

------
augustiner
If anyone is interested in AirBnB's presentation about native navigation at
React Conf:
[https://youtu.be/S8HXkEnA48g?t=6h52m42s](https://youtu.be/S8HXkEnA48g?t=6h52m42s)

------
mjs7231
Am I the only one wondering what the heck this actually is? The page this
linked to just goes right into a guide on how to use it but doesn't explain
what it is. The github page has a nifty looking guy on it, but once again it's
just a jumble of buzzwords I do not understand at all. Why does the Javascript
community make me feel stupid?

 _App-wide support for 100% native navigation with an easy cross-platform
interface. For iOS, this package is a wrapper around react-native-controllers,
but provides a simplified more abstract API over it. This abstract API will be
unified with the Android solution which is currently work in progress. It also
fully supports redux if you use it._

What does this mean?

~~~
dcosson
Kind of seems like you're trolling here but in case you're serious - it's odd
to quote the middle of the docs and then complain that knowing nothing about
the space you don't understand a given line.

Did you try the first sentence?

> Native Navigation is a navigation library for the React Native platform.

There you go, that's what it is.

If you don't have this problem and/or don't work on React Native apps, move
on. If you're trying to learn and don't know what problems a navigation
library solves, or don't know what view controllers in iOS development are, or
don't know what redux is, or something else in the line you posted, try
googling it and then looking at the examples in the library.

------
k__
Expo has a new Navigator too.

------
jensvdh
Awesome! :)

