Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

React Native Navigation Library

airbnb.io

Post reply on HN
Print view View original

21–30 of 56 posts

Re: React Native Navigation Library

#21

Post by htormey »

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

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

Re: React Native Navigation Library

#22

Post by htormey »

nomnombunty wrote: post #20

We are currently planning on switching from Navigator ( https://facebook.github.io/react-native/docs/navigator.html ) to React Navigation ( 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 t…

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/

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

Re: React Native Navigation Library

#23

Post by 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.

Re: React Native Navigation Library

#24

Post by spotman »

danappelxx wrote: post #10

Ummm [0] ...would appreciate an explanation here. [0]: https://github.com/airbnb/native-navigation/blob/91ae656192d...

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.

Re: React Native Navigation Library

#25

Post by evv »

logicallee wrote: post #12
evv wrote: post #6

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

>React Navigation, released a few weeks ago, Wow, you guys have a tight curve you're staying ahead of :-)

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

In case you're implying this was a "beat them to market" situation, it wasn't. Both navigation projects have been on React Native's public roadmap for several months: https://github.com/facebook/react-native/wiki/Roadmap/_compa...

Improved navigation has been one of the RN community's highest-voted feature requests: https://react-native.canny.io/feature-requests/p/better-navi...

Re: React Native Navigation Library

#26

Post by lacker »

nomnombunty wrote: post #20

We are currently planning on switching from Navigator ( https://facebook.github.io/react-native/docs/navigator.html ) to React Navigation ( 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 t…

React Navigation seems to be the framework that is endorsed by the react native team.

The React Native team respects Airbnb's work here a lot as well. I think we will end up with an "official recommendation" that says each of react-navigation and native-navigation is better for a different set of use cases. It's probably too early to figure out precisely what the line is.

Roughly, react-navigation is more customizable, native-navigation works better for native RN transitions, and they should each be easier to use than the "first generation" of navigation solutions like Navigator / NavigatorIOS / NavigationExperimental.

Re: React Native Navigation Library

#27

Post by chris_7 »

danappelxx wrote: post #10

Ummm [0] ...would appreciate an explanation here. [0]: https://github.com/airbnb/native-navigation/blob/91ae656192d...

I've definitely seen an animation issue where the typical _async -> main didn't work, but _after (0.001 seconds or so) on main did. Though I don't remember if it was on Mac or on iOS, or really what the issue was.

Re: React Native Navigation Library

#28

Post by interpol_p »

chris_7 wrote: post #27
danappelxx wrote: post #10

Ummm [0] ...would appreciate an explanation here. [0]: https://github.com/airbnb/native-navigation/blob/91ae656192d...

I've definitely seen an animation issue where the typical _async -> main didn't work, but _after (0.001 seconds or so) on main did. Though I don't remember if it was on Mac or on iOS, or really what the issue was.

Those animation issues pop up often, and you can get around them by using DispatchQueue.main.asyncAfter(.now() + 0.1) but often you can figure out what the actual issue is (i.e., you're likely attempting to present something in the wrong place) and you should do that instead.

Re: React Native Navigation Library

#29

Post by jeanregisser »

htormey wrote: post #23

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

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

Re: React Native Navigation Library

#30

Post by alien3d »

nomnombunty wrote: post #20

We are currently planning on switching from Navigator ( https://facebook.github.io/react-native/docs/navigator.html ) to React Navigation ( 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 t…

I also been testing navigator and also react navigation. Original navigator need more code compare to react navigation .. Now i'm unsure which one to moved on while few weeks ago people arguing react navigation is better.. I also have seen the wix version but i haven't done some testing how it work.
Post reply on HN