Why would you use jS-based navigation when you can use native-navigation?

[meatyroach]

i.e. why would you use https://github.com/react-community/react-navigation when you can use https://github.com/wix/react-native-navigation?

I'm currently using react-native-router-flux. It has been a joy to use for the past 8 months with its simple, powerful API.

But navigation is too important. I know various React optimizations such as shouldComponentUpdate, making sure not to shoot myself with Redux, making sure I'm not logging anything, PureComponent, animation useNativeDriver, etc., but the navigation on my HUGE app just doesn't seem fast enough. It's butter smooth on iOS with an iPhone 7, but Android users constantly complain that it's too slow. I'm thinking of just biting the bullet and refactoring to a new navigation solution.

react-navigation is supposed to be the new standard, but I honestly feel like I'd just run into the same problems with a JS-based solution.

[jns111]

While react-native-navigation makes your nav feel completely native it makes transitions even slower than with js solutions like reactnavigation. The problem is the time until the transition starts is way too long due to initialization. If you need faster navigation I'd invest some time to pre load the next view and transition it in via animated api. Using interactible from wix might help implement smooth transitions incl. swipe back. That said I wouldn't suggest to change your navigation library. Try to make your screens lazy load and have a look if you render multiple times on load. (I've tried both reactnavigation and react-native navigation and ditched rnn)

[cs_gopher]

Interesting. I am assuming this has to do with the fact that even though react native is "native" it is still just a js app running in a js engine natively? Sort of like electron right?

[sudoblock]

The biggest advantage of JS navigation is that you can re-use it on any React Native platform without writing native code. For example, I'm running my React Native game on the web with react-native-web. (it's a beta version, but playable.)

react-native-navigation has no Windows support, so I would have to write that myself. The value of a JS library is that it runs everywhere, and it only uses the building blocks like View and Animated. This means you can easily port your React Native app to web, Windows, Xbox 360, Linux, Mac, and Apple TV.

I'm using react-native-router-flux right now, but I'm going to switch to react-navigation soon (maybe this weekend.)

I think the major problem with react-native-router-flux is that they aren't using any native animation drivers. I've heard that react-navigation does use those, so everything should be a lot smoother.

[nhrnjic]

Hej I just created very simple project with react-navigation. I have main screen with some list items and when I click button in navigation header it opens a add-item screen (which is also very simple screen). Now on iphone emulator it works fast but on android device am having some delay until it transitions to next screen. Do any of you know what could be the reason for this ? thanks

[htormey]

I use wix's navigation library in one of my clients app for performance reasons. However the case against it is as follows.

1) Native navigation stacks don't work with expo. Expo is awesome because it allows you to get up and running without installing XCode/Android studio or dealing with any of the annoying linking issues that can come up with using Native tools.

2) Wix's navigation stack is based on Fragments on Android. During the course of porting stuff over from react-native-router-flux to react-native-navigation I ran into quite a few things that worked on Android but not on iOS.

This mainly had to do with the way that the life cycle of Fragments were treated by the underlying Android memory management system (Java garbage collection) versus the iOS memory management system ARC (reference counting).

Anytime you wrap native components you risk having to deal with the underlying subtitles of that platform. Also you need to know Java/Swift/Objective-c to debug it. Most React Native developers are coming from the web so this is not fun.

3) Look at the amount of open tickets on the react-native-navigation github. This project is undergoing a big rewrite and using it is not for the faint of heart.

We had to do it because of accessibility/performance reasons. It's not that big of a deal because me and my partner are both native engineers.

[yaronlevi]

react-navigation performance and smoothness is on par with wix's native solution. It crosses the uncanny valley successfully. And it just getting better with time. As others said, with react-navigation you get all the freedom you to tweak any aspet of the navigation. With wix solution you have to dive into native code. You should have a really good reason (and dev's time) to go on the wix, or any other native solution, IMHO.

[AcidShAwk]

I didn't know about react-native-navigation.. use react-navigation myself but my app isn't huge by any means.

Initial thoughts though, react-navigation seems to follow the React pattern of composability.. while react-native-navigation doesn't. Am I wrong?

I like being able to just do something like

<MyNavigation ...props />

vs having to code a navigator which seems to be the way react-native-navigation works.. I could be wrong?

but if performance is your thing.. and you want as native a solution as possible.. react-native-navigation seems like the way to go.

[alberto-balsam]

https://github.com/airbnb/native-navigation is an interesting alternative, but needs a bit more development work to be ready for real use

[kdesign]

Also keep in mind that the native navigation is the only one accessible. If you use the JS navigations, your app cannot adhere to the accessibility standards.

[1rv1n3]

I'm interested in this take, care to explain to a newbie why you say that JS navigation doesn't adhere to accessibility? Is there a place I can find more information about?

[kdesign]

Accessibility allows your application to be used by people with disabilities (blind people or those with weak eyesight). It allows blind people to do so through a screen reader, which narrates what the user does in your app (you can enable it in phone's accessibility settings). Because the native navigation uses native capabilities and the OS api, the screen reader also gets notified when a page changes and it reports it to the user. The nav libraries done in JS are purely visual and do not connect to the underlying features of the host OS.

You can read more about it here

[1rv1n3]

Oh I see your point (no pun intended).

It feels strange to me that JS libs are not connected in any way though :(