4 ms·

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 n

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.

chrisco255 9y ago
The best nav experience I've had with RN is React Navigation: https://reactnavigation.org/ https://reactnavigation.org/
- g00gler 9y ago
  Looks very good, will have to try it out.
- danpalmer 9y ago
  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.
- cheapsteak 9y ago
  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 https://i.imgur.com/etEa7WT.png
  - htormey 9y ago
    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 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 https://github.com/hgale/ReactNavigationDemo Same app but built with React Native Navigation + redux: https://github.com/hgale/ReactNativeNavigationDemo 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 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.
    - danudey 9y ago
      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.
      - htormey 9y ago
        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-breaks-android-screen-reader-accessibility https://react-native.canny.io/feature-requests/p/navigator-b... It's painful but possible to work around these issues using React Navigation.
    - solidr53 9y ago
      I agree and even go one step further by saying that I'd never publish an RN app without native navigation.
dean177 9y ago
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)
- g00gler 9y ago
  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.
JohnHaugeland 9y ago
One control per screen It's actually quite easy

chrisco255 9y ago

The best nav experience I've had with RN is React Navigation: https://reactnavigation.org/ https://reactnavigation.org/

g00gler 9y ago
Looks very good, will have to try it out.
danpalmer 9y ago
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.
cheapsteak 9y ago
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 https://i.imgur.com/etEa7WT.png
- htormey 9y ago
  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 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 https://github.com/hgale/ReactNavigationDemo Same app but built with React Native Navigation + redux: https://github.com/hgale/ReactNativeNavigationDemo 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 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.
  - danudey 9y ago
    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.
    - htormey 9y ago
      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-breaks-android-screen-reader-accessibility https://react-native.canny.io/feature-requests/p/navigator-b... It's painful but possible to work around these issues using React Navigation.
  - solidr53 9y ago
    I agree and even go one step further by saying that I'd never publish an RN app without native navigation.

dean177 9y ago

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)

g00gler 9y ago
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.

JohnHaugeland 9y ago

One control per screen It's actually quite easy