React Native Navigation Library

Ummm [0]<p>...would appreciate an explanation here.<p>[0]: <a href="https:&#x2F;&#x2F;github.com&#x2F;airbnb&#x2F;native-navigation&#x2F;blob&#x2F;91ae656192d66ea716b900d3bec0f22dc8bd1faa&#x2F;lib&#x2F;ios&#x2F;native-navigation&#x2F;ReactNavigation.swift#L55-L58" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;airbnb&#x2F;native-navigation&#x2F;blob&#x2F;91ae656192d...</a>

Awesome! I wonder how this compares to wix&#x27;s native navigation stack:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;wix&#x2F;react-native-navigation" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;wix&#x2F;react-native-navigation</a><p>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.<p>This really sucks for overdraw perf and completely breaks accessibility on Android. See:<p><a href="https:&#x2F;&#x2F;react-native.canny.io&#x2F;feature-requests&#x2F;p&#x2F;navigator-breaks-android-screen-reader-accessibility" rel="nofollow">https:&#x2F;&#x2F;react-native.canny.io&#x2F;feature-requests&#x2F;p&#x2F;navigator-b...</a>

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.<p>I liked Leland&#x27;s metaphor of calling apps like Airbnb which started out without React Native as &quot;brown field&quot; development and calling apps that start out as React Native &quot;green field&quot; development.

I&#x27;m seeing a lot of people being confused with many of the comments in React Native posts. Some people in these comments now aren&#x27;t sure if the &quot;right&quot; navigation solution is React Navigation or Native Navigation. I think a good document to follow to understand Facebook&#x27;s plans with the project is React Native&#x27;s Roadmap [1].<p>In there you&#x27;ll see that React Navigation is a solution aimed at &quot;Green Field&quot; 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 &quot;Brown Field&quot; projects (like Airbnb&#x27;s app, which was built in native much before React Native was open sourced) and replaces NavigatorIOS.<p>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).<p>Indeed React Native has been moving extremely fast but after our decision to go with it over a year ago we&#x27;ve never thought even once about going back.<p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;react-native&#x2F;wiki&#x2F;Roadmap" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;react-native&#x2F;wiki&#x2F;Roadmap</a>

Congrats to the team at AirBnB on the exciting launch! As somebody who has thought a lot about navigation on React Native, I&#x27;m super excited to see an easier way to utilize the native navigation views on each platform.<p>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&#x27;s native-navigation.<p>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.

Anyone have a screenshot of what the UI looks like?

Doesn&#x27;t seem to have been ready for anyone to try it out; they don&#x27;t have &quot;basic usage&quot; docs ready yet:<p><a href="http:&#x2F;&#x2F;airbnb.io&#x2F;native-navigation&#x2F;docs&#x2F;guides&#x2F;basic-usage.md" rel="nofollow">http:&#x2F;&#x2F;airbnb.io&#x2F;native-navigation&#x2F;docs&#x2F;guides&#x2F;basic-usage.m...</a><p><pre><code> # Basic Usage _This documentation has not been created yet. Sorry about that! Hang tight!_</code></pre>

Native navigation is definitely a great addition to the community. It&#x27;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.

We are currently planning on switching from Navigator (<a href="https:&#x2F;&#x2F;facebook.github.io&#x2F;react-native&#x2F;docs&#x2F;navigator.html" rel="nofollow">https:&#x2F;&#x2F;facebook.github.io&#x2F;react-native&#x2F;docs&#x2F;navigator.html</a>) to React Navigation (<a href="https:&#x2F;&#x2F;reactnavigation.org&#x2F;docs&#x2F;intro&#x2F;" rel="nofollow">https:&#x2F;&#x2F;reactnavigation.org&#x2F;docs&#x2F;intro&#x2F;</a>). After seeing Airbnb&#x27;s React Native Navigation library, I am not sure what to choose any more.<p>React Navigation seems to be the framework that is endorsed by the react native team. However, Airbnb&#x27;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

I&#x27;m a bit confused. From this library&#x27;s README:<p>&gt; If you are investigating navigation solutions and you are okay with JavaScript-based solutions, we also encourage you to check out React Navigation.<p>However if you go to React Navigation home page [1] you find this:<p>&gt; Navigation views that deliver 60fps animations, and <i></i>utilize native components<i></i> to deliver a great look and feel.<p>It looks like every RN navigation library claims to be more &quot;native&quot; than the previous ones.<p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;airbnb&#x2F;native-navigation&#x2F;" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;airbnb&#x2F;native-navigation&#x2F;</a><p>[2] <a href="https:&#x2F;&#x2F;reactnavigation.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;reactnavigation.org&#x2F;</a>

This looks great. I wonder when a dominant library will emerge for navigation.<p>Also, I am a little bit confused, because react-navigation makes it sound like there are going to be merged into core once stable:<p>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]<p>What do you guys make of that statement?<p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;react-community&#x2F;react-navigation" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;react-community&#x2F;react-navigation</a>

Another thing to consider about Airbnbs nav stack is that it&#x27;s written in swift.<p>This is important because Apple can still make changes to Swift which can break language backward compatibility.<p>This happened last wwdc. So if you use any third party libraries that are written in swift they won&#x27;t work till the authors or you update them to the new language conventions.<p>The wix native library which they reference is written in objective c so this won&#x27;t have that problem.

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

It&#x27;s obvious that this is a super-early release, but I&#x27;m happy that AirBnB ENG is working on a navigation solution.<p>Also:<p><i>On iOS, ViewController transitions can be animated using Lottie. It&#x27;s possible we could add support for such a feature into Native Navigation.</i><p>Yes please.

If anyone is interested in AirBnB&#x27;s presentation about native navigation at React Conf: <a href="https:&#x2F;&#x2F;youtu.be&#x2F;S8HXkEnA48g?t=6h52m42s" rel="nofollow">https:&#x2F;&#x2F;youtu.be&#x2F;S8HXkEnA48g?t=6h52m42s</a>

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&#x27;t explain what it is. The github page has a nifty looking guy on it, but once again it&#x27;s just a jumble of buzzwords I do not understand at all. Why does the Javascript community make me feel stupid?<p><i>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.</i><p>What does this mean?

Expo has a new Navigator too.

Awesome! :)