Hacker News new | ask | show | jobs
by g00gler 3199 days ago
How do you manage 100+ screens?

I started building a react native app but decided against it because switching activities seemed to be very hacky compared to native development. Seemed like it'd really get out of hand with 10+ screens.

Wix's "React Native Navigation" was too opinionated / inflexible.

3 comments

The best nav experience I've had with RN is React Navigation: https://reactnavigation.org/
I've had an ok experience with React Navigator, but still feels very immature (I was unable to implement relatively straightforward animations on the parent view in a transition), and it also feels like interface builder/storyboards leaves it in the dust in terms of wiring together interfaces and getting a high-level overview of the information architecture of an app.
How does it compare with react-native-navigation?

Kind of difficult to parse the adoption/ecosystem based on download trends[1] for these two

[1]: https://i.imgur.com/etEa7WT.png

I recently gave a talk at Chain React in Portland (first ever React Native only conference) where I compared these two nav stacks:

https://www.youtube.com/watch?v=kFyaj5HmMEY&t=1059s

The situation with navigation and React Native is a bit of a mess right now.

Basically all navigation stacks can be broken down into two categories, those that are native (i.e built on top of the OS's existing navigation stack) and those that are not (pure javascript, emulates what the native stack does).

Examples of Native navigation stacks:

-> React Native Navigation (wix)

-> Native Navigation (Airbnb)

Examples of Javascript navigation stacks:

-> React Navigation

-> React Native Router Flux

-> React Router Native

An example app I wrote with React Navigation + Redux:

https://github.com/hgale/ReactNavigationDemo

Same app but built with React Native Navigation + redux:

https://github.com/hgale/ReactNativeNavigationDemo

The main differences are that the native nav stacks have better performance, stuff like accessibility works right out of the box and they work the same way that the underlying native system works.

The main downside to using Native navigation stacks right now is that setting then up & upgrading them can be a real pain. It can also require native knowledge when things go wrong.

I would recommend staying with react navigation (Javascript based nav stack) unless you absolutely need some feature from one of these native nav stacks.

It's going to be a lot easier to upgrade and you won't run into issues doing over the air updates with your production apps.

It's also the one that Facebook promotes in their docs:

https://facebook.github.io/react-native/docs/navigation.html

Right now both React Native Navigation and React Navigation are under heavy development. No matter which one you choose, budget for some pain in the next year when upgrading.

I would think that having to learn a little about iOS/Android would be a small price to pay for decent performance and accessibility. The idea that those are only sometimes important rather than a necessity is alien to me as a software developer and as a user.
I agree, accessibility is important and in many countries required by law. However using React Native Navigation can be quite a lot of work for a shop that only has JS dev's who've never done native. Using React Native Navigation (or any native dependency) also has implications for your CI system, debugging and over the air updates.

Also you can make an app that has no accessibility problems using React Navigation, you just need to be careful about scenarios where you might have a deep stack. I.e during signup or something that requires several screens on top of one another.

Here is a summary of the bug:

https://react-native.canny.io/feature-requests/p/navigator-b...

It's painful but possible to work around these issues using React Navigation.

I agree and even go one step further by saying that I'd never publish an RN app without native navigation.
Looks very good, will have to try it out.
I found quite the opposite, it's much easier to manage many activities, I am guessing you were using your own 'routing'? Take a look at react-navigation or react-router (it supports react-native too)
I was looking for libraries that use native code but react-native-navigation was too opinionated and Air BnB's solution wasn't and isn't production ready.

I pretty much put the project down after that and started learning Swift (I already do Android).

Now I decided to go all out on iOS dev with the hope of making a career change from web.

One control per screen

It's actually quite easy