Why React Native navigation can be a pitfall for you mobile app? - DO OK

Cross-platform project struggles: a Navigation story

What should you consider when choosing React Native instead of native mobile development? In this article, I will reveal top pitfalls related to building a smooth navigation experience for end-users of your mobile application.

Since the very beginning of modern mobile development, one of its most important goals was to provide end-user with a flawless and smooth way of navigating between sets of data presented on screen. Apple’s iOS quickly became the gold standard in terms of smoothness and UX. The android platform had some teething troubles, however tremendous progress has been made thereto evolve from somewhat constrained activity-based design to more scalable and flexible designs based on Fragments. Both platforms have SDKs with well-documented APIs to make the troubled developer’s life easier. In the end, all parties - end users, developers and customers - should have smiles on their faces.

But were the same design principles followed by the authors of Facebook’s React Native framework? Can it impact the way your project will be developed? Let’s see!

React Native has gained considerable popularity thanks to the ability to create native mobile applications using popular JavaScript. This can allow a significant reduction in programming costs. ‘Woo-hoo’ I can hear you screaming. But… it doesn’t mean that there are no challenges ahead!

One of the flaws of React Native is the lack of an integrated approach to navigation. The framework itself is currently in version 0.56 . Despite its early version, it has been used in production environments for a long time. One could expect it to offer a stable and reliable navigation solution “out-of-the-box”, unfortunately, it doesn’t seem to be the case.

React Native’s documentation itself introduces two categories of available navigation solutions - one based solely on JavaScript, and another built on top of native iOS and Android components. “Why should I bother?” you may ask. The answer is simple, yet important: the choice you are about to make may impact its quality, value and the team you will manage.

Since the beginning of the platform, there were multiple solutions the developers could choose from. Unfortunately, many of them were abandoned as React Native kept evolving and newer libraries were introduced. Currently, the documentation itself suggests getting familiar either with React Navigation or React Native Navigation.

So, which one it the right one? First, you should ask yourself These Important Questions:

Will your project share the codebase between mobile apps and React web app? Do you prefer “not getting your hands dirty” with any native coding? Do you intend to use simplified tools such as ‘Create React Native App’ or Expo? Are you ready to sacrifice that “smooth look and feel” of native solutions in favour of JS generated animations?

If you answered yes to most of these questions, then most likely you should reach for good ol’ JavaScript, i.e. React Navigation.

React Navigation

Pros of React Native

  • Most popular in this category
  • Fully cross-platform (can be used in React web apps) / Full portability of the mobile/web code
  • Most popular in this category
  • Fully cross-platform (can be used in React web apps) / Full portability of the mobile/web code
  • 100% JavaScript
  • Strong community support
  • Easy to install (an npm package)
  • Platform-specific components look decent (tab bars, nav bars etc.)
  • Potentially no need for a native developer
  • Easily customizable

Cons of React Native

  • Performance can be an issue. Due to it being pure JavaScript, it’s fairly easy to end up with a poorly performing app. This has to do with the fact that all the views and transitions between them are stacked in one Activity (Android) or UIViewController (iOS). The animations are performed in combination with business logic on the JavaScript thread,
  • resulting in frame drops and poor performance
  • ‘Look and feel’ is inferior to native solutions
  • Still many unresolved issues reported by users (although it’s rapidly improving)

Note on React-Native-Router-Flux

React-Native-Router-Flux is an interesting alternative to React Navigation. RNRF is basically built on top of React Navigation, providing a different, JSX-based API, which is considered more user-friendly by many in the community. If you don’t like the vanilla React Navigation API but still don’t want to go with the native route, it’s worth looking at.

If you answered the Important Questions above in the negative, you should consider the native solution.

Pros of Router-Flux

  • Built on top of platform-specific navigation components
  • Looks ‘like a real thing’
  • Dynamic support in the community
  • iOS-like API, really simple to use, the best choice for native developers
  • Supports Redux
  • Excellent UX and performance - navigation is executed off the JS thread
  • Easy and powerful UI customization
  • Quick development (once installed and configured)
  • Clean architecture and minimal boilerplate code to be written when successfully set up.

Cons of Router-Flux

  • Complex installation and configuration. Requires ‘getting your hands dirty’ with native code for both platforms (yes, you need to get familiar with Xcode and Android Studio)
  • Works on mobiles only - won’t help you with a Web version of your app
  • You will need someone who can work with native code
  • Hard to use state managers that are not Redux
  • The library architecture is being redesigned. There’s a v2 branch that is still in the alpha phase. It is said that current v1 will soon become obsolete, hence the new projects should consider starting with v2 branch or switching to other solution.

Summary of cross-platform navigation

As you can see, selecting proper navigation solution for your project may be tricky. Both native and non-native solutions have their advantages and drawbacks. Your choice can determine the overall approach to the project as well as the skills needed in the team. It’s an important thing to be aware of solution-specific requirements prior to making any important business decisions.

If you have already used one of these solutions, I’d be curious to hear about your experience. Should you have any questions about building a React Native navigation, I will be more than happy to answer them.

What are the Five Phases in Software Delivery
In February 2020 PMI published
03.12.2020, min read
Marta Maciaszek
Read more
DO OK named among Deloitte’s Technology Fast 50 Central Europe 2020
DO OK has been ranked 34th in the Deloitte Technology Fast 50 Central Europe with 710%...
26.11.2020, min read
Mihail Yarashuk
Read more
Role of Project Manager in Software Development
Project management becomes a critical aspect of the delivery and role of a Project Mana...
25.11.2020, min read
Marta Maciaszek
Read more
Cookies

Our website has cookies. more info