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-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.
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.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.
.jpg)