DEV Community

Cover image for Driving Towards a Universal Navigation Strategy in React

Driving Towards a Universal Navigation Strategy in React

Matheus Albuquerque on January 13, 2020

When I joined STRV, they had a specific request for me; to build a front-end app for iOS, Android, and Web, sharing component and business logic am...
Collapse
 
codypearce profile image
Cody Pearce

Good post!

react-router is a great option for the web, but when on mobile, it lacks screen transitions, modals, navbar, back-button support, and other essential navigation primitives.

react-router does have some solutions for native-like screen transitions, for example react-router-native-stack, though obviously not as well supported as the ones for react-navigation.

Personally, I don't think routing libraries should be providing "navigational UI components" like modals, navbar, and drawers. These are UI components not router components, they just happen to sometimes contain buttons/links that trigger navigation. This makes the router library more complex and usually doesn't give developers ultimate control over how "navbars" and other components render.

Collapse
 
ythecombinator profile image
Matheus Albuquerque

Thanks for the feedback, sir! 😊

I see your point and probably I was not very clear on the post but I do agree with you.

Actually, when pointing out react-router-native doesn't provide screen transitions and navigational UI components I didn't mean that these should be coupled to the core routing; it's more like there should be @react-router-native/core and then @react-router-native/stack, @react-router-native/drawer and so on, just like react-navigation does – and, as far as I am concerned react-router-native-stack is not an official one.

Collapse
 
satya164 profile image
Satyajit Sahoo • Edited

I think the difference is "routing" libraries vs "navigation" libraries. I agree, the routing library should not provide any UI.

But in case of React Native, where we are building apps which usually need to match the native experience provided by native apps, it's also wasteful to redo these for every app. In a lot of cases, you "do not" need ultimate control over how navbars and other components render, but want to provide a native experience to the user and have ability to customize the UI enough to match your design. That's what a navigation library aims to achieve.

React Navigation is essentially an ecosystem, not a single library. The @react-navigation/core package provides the core logic and is equivalent to a routing library when combined with @react-navigation/routers. Then there are integrations such as @react-navigation/stack, @react-navigation/bottom-tabs etc. which provide UIs on top of this router logic to make app development easier.

You can always build these things yourself, but if you want to provide a native experience, it's not that trivial. You need to deal with complex animations and gestures etc (look at the header animation on iOS). I have built these things, they take a lot of time.

Sure, on web it works. You can build a great web app with just a router. But people rarely have gestures and animations in web apps. Native apps have a higher standard when it comes to animations and gestures, which makes it much more work.

Collapse
 
ypedroo profile image
Ynoa Pedro

Great post!

Collapse
 
ythecombinator profile image
Matheus Albuquerque

Thanks 🎆