7 ms·

React Native Navigation Library

235 points by HectorRamos 10y ago

lacker 10y ago
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 10y ago
  > 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)
grabbou 10y ago
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.
LAMike 10y ago
Anyone have a screenshot of what the UI looks like?
deleted 10y ago
[deleted]
evv 10y ago
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 10y ago
  >React Navigation, released a few weeks ago, Wow, you guys have a tight curve you're staying ahead of :-)
  - stagbeetle 10y ago
    > [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 10y ago
      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.
  - evv 10y ago
    > 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/_compare/fb15784cdb7cdaf7d055c4a790db9b42495fe8c5...ba9aa23cdd47e904051585f470c295d5145b9c24 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-navigator-api-and-docs https://react-native.canny.io/feature-requests/p/better-navi...
    - logicallee 10y ago
jensvdh 10y ago
Awesome! :)
mjs7231 10y ago
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?
- kovek 10y ago
  Which part do you not understand? It sounds like this will work on more than one platform, it acts as a simple interface for some other tool. Also, they are working on this for Android.
- lunch 10y ago
  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. It sounds to me, after reading the above and googling "React Native" for <10 minutes, that this library handles the UI navigation for mobile phone apps written in React Native, and it does so in a way that allows your code to work across multiple operating systems (presumably iOS and Android). This library is also compatible with redux, a very popular state manager.
- jwarren 10y ago
  React Native is a popular method for creating semi-native, JavaScript-based iOS and Android apps, based on the very popular React library. There's no one standard routing/navigation library in the community. As that's quite an important part of almost every app, a new high quality solution is something that any React Native dev would be interested in. I'm sure you know who AirBnB are. They've spent the last year (?) building part of their mobile apps with React Native, and this is their home-grown navigation library. Now, most React Native components (including navigation libraries) are built almost entirely in JavaScript, but this one is one of a few which "bridge" the native iOS and Android APIs, potentially resulting in a more natural and familiar feel. There's one other semi-native nav option out there, Wix's React Native Navigation[1]. I've not personally tried either of them, but it's nice to have choices. There are lots of JavaScript-based routing systems out there. React Navigation[2] is the closest we've got to an officially sanctioned package in a while, being the successor to two very popular libraries (Facebook's own NavigationExperimental[3] and Exponents Ex-Navigation[4]). There's also React Native Router Flux[5], which is quite popular, and the very popular React Router[6] has support for React Native in their recently released v4. As you can see, there are quite a few options available, and there are even more if you want to delve deeper[7] [1]: https://github.com/wix/react-native-navigation https://github.com/wix/react-native-navigation [2]: https://reactnavigation.org/ https://reactnavigation.org/ [3]: https://github.com/facebook/react-native/tree/master/Libraries/NavigationExperimental https://github.com/facebook/react-native/tree/master/Librari... [4]: https://github.com/exponent/ex-navigation https://github.com/exponent/ex-navigation [5]: https://github.com/aksonov/react-native-router-flux https://github.com/aksonov/react-native-router-flux [6]: https://github.com/ReactTraining/react-router https://github.com/ReactTraining/react-router [7]: https://js.coach/?search=navigation https://js.coach/?search=navigation
danappelxx 10y ago
Ummm [0] ...would appreciate an explanation here. [0]: https://github.com/airbnb/native-navigation/blob/91ae656192d66ea716b900d3bec0f22dc8bd1faa/lib/ios/native-navigation/ReactNavigation.swift#L55-L58 https://github.com/airbnb/native-navigation/blob/91ae656192d...
- rokob 10y ago
  When you really, really, really, really, really want to be on the main queue.
- spotman 10y ago
  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.
  - aaronbrethorst 10y ago
    Weird. Seems like that would be better done by invoking NSRunLoop APIs...Plus, you know, filing a Radar.
  - mmjaa 10y ago
    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 ..
- chris_7 10y ago
  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.
rattray 10y ago
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.md http://airbnb.io/native-navigation/docs/guides/basic-usage.m... # Basic Usage _This documentation has not been created yet. Sorry about that! Hang tight!_
nomnombunty 10y ago
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 10y ago
  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 10y ago
    > 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.
htormey 10y ago
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-breaks-android-screen-reader-accessibility https://react-native.canny.io/feature-requests/p/navigator-b...
htormey 10y ago
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 10y ago
  Indeed, and having a Swift dependency adds roughly 5MB to the final app package (as it then needs to include Swift runtime frameworks).
phantom_package 10y ago
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.
puppetmaster5 10y ago
How is this more productive than Cordova variants? It seems that the re-use of a web app to mobile app is not great. And that I can use designers that code in Cordova alternative. Or even xamarin. Asking for a friend.
deleted 10y ago
[deleted]
javiercr 10y ago
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 10y ago
  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/133 https://github.com/react-community/react-navigation/issues/1...
- shafyy 10y ago
  I was also confused regarding this. But a good indicator is always if you need to add native components when installing the library, or if it's just a simple npm install
augustiner 10y ago
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
shafyy 10y ago
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
k__ 10y ago
Expo has a new Navigator too.
drumttocs8 10y ago
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.
deleted 10y ago
[deleted]
migueloller 10y ago
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

235 points by HectorRamos 10y ago

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 10y ago
> 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)

grabbou 10y ago

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.

LAMike 10y ago

Anyone have a screenshot of what the UI looks like?

deleted 10y ago

[deleted]

evv 10y ago

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 10y ago
>React Navigation, released a few weeks ago, Wow, you guys have a tight curve you're staying ahead of :-)
- stagbeetle 10y ago
  > [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 10y ago
    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.
- evv 10y ago
  > 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/_compare/fb15784cdb7cdaf7d055c4a790db9b42495fe8c5...ba9aa23cdd47e904051585f470c295d5145b9c24 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-navigator-api-and-docs https://react-native.canny.io/feature-requests/p/better-navi...
  - logicallee 10y ago

jensvdh 10y ago

Awesome! :)

mjs7231 10y ago

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?

kovek 10y ago
Which part do you not understand? It sounds like this will work on more than one platform, it acts as a simple interface for some other tool. Also, they are working on this for Android.
lunch 10y ago
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. It sounds to me, after reading the above and googling "React Native" for <10 minutes, that this library handles the UI navigation for mobile phone apps written in React Native, and it does so in a way that allows your code to work across multiple operating systems (presumably iOS and Android). This library is also compatible with redux, a very popular state manager.
jwarren 10y ago
React Native is a popular method for creating semi-native, JavaScript-based iOS and Android apps, based on the very popular React library. There's no one standard routing/navigation library in the community. As that's quite an important part of almost every app, a new high quality solution is something that any React Native dev would be interested in. I'm sure you know who AirBnB are. They've spent the last year (?) building part of their mobile apps with React Native, and this is their home-grown navigation library. Now, most React Native components (including navigation libraries) are built almost entirely in JavaScript, but this one is one of a few which "bridge" the native iOS and Android APIs, potentially resulting in a more natural and familiar feel. There's one other semi-native nav option out there, Wix's React Native Navigation[1]. I've not personally tried either of them, but it's nice to have choices. There are lots of JavaScript-based routing systems out there. React Navigation[2] is the closest we've got to an officially sanctioned package in a while, being the successor to two very popular libraries (Facebook's own NavigationExperimental[3] and Exponents Ex-Navigation[4]). There's also React Native Router Flux[5], which is quite popular, and the very popular React Router[6] has support for React Native in their recently released v4. As you can see, there are quite a few options available, and there are even more if you want to delve deeper[7] [1]: https://github.com/wix/react-native-navigation https://github.com/wix/react-native-navigation [2]: https://reactnavigation.org/ https://reactnavigation.org/ [3]: https://github.com/facebook/react-native/tree/master/Libraries/NavigationExperimental https://github.com/facebook/react-native/tree/master/Librari... [4]: https://github.com/exponent/ex-navigation https://github.com/exponent/ex-navigation [5]: https://github.com/aksonov/react-native-router-flux https://github.com/aksonov/react-native-router-flux [6]: https://github.com/ReactTraining/react-router https://github.com/ReactTraining/react-router [7]: https://js.coach/?search=navigation https://js.coach/?search=navigation

danappelxx 10y ago

Ummm [0] ...would appreciate an explanation here. [0]: https://github.com/airbnb/native-navigation/blob/91ae656192d66ea716b900d3bec0f22dc8bd1faa/lib/ios/native-navigation/ReactNavigation.swift#L55-L58 https://github.com/airbnb/native-navigation/blob/91ae656192d...

rokob 10y ago
When you really, really, really, really, really want to be on the main queue.
spotman 10y ago
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.
- aaronbrethorst 10y ago
  Weird. Seems like that would be better done by invoking NSRunLoop APIs...Plus, you know, filing a Radar.
- mmjaa 10y ago
  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 ..
chris_7 10y ago
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.

rattray 10y ago

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.md http://airbnb.io/native-navigation/docs/guides/basic-usage.m... # Basic Usage _This documentation has not been created yet. Sorry about that! Hang tight!_

nomnombunty 10y ago

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 10y ago
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 10y ago
  > 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.

htormey 10y ago

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-breaks-android-screen-reader-accessibility https://react-native.canny.io/feature-requests/p/navigator-b...

htormey 10y ago

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 10y ago
Indeed, and having a Swift dependency adds roughly 5MB to the final app package (as it then needs to include Swift runtime frameworks).

phantom_package 10y ago

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.

puppetmaster5 10y ago

How is this more productive than Cordova variants? It seems that the re-use of a web app to mobile app is not great. And that I can use designers that code in Cordova alternative. Or even xamarin. Asking for a friend.

deleted 10y ago

[deleted]

javiercr 10y ago

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 10y ago
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/133 https://github.com/react-community/react-navigation/issues/1...
shafyy 10y ago
I was also confused regarding this. But a good indicator is always if you need to add native components when installing the library, or if it's just a simple npm install

augustiner 10y ago

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

shafyy 10y ago

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

k__ 10y ago

Expo has a new Navigator too.

drumttocs8 10y ago

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.

deleted 10y ago

[deleted]

migueloller 10y ago

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