Meet us at:
- HackCrisis: Tech for Good Hackathon
- 17 - 22.03.2020 Online
- EUvsVirus Hackathon
- 24 - 26.04.2020 Online
- 27 - 28.08.2020 Tallinn, EE
- 17 - 18.09.2020 Copenhagen • Online
Are you thinking of using React Native instead of native development for your brilliant new app? Then you might want to consider some of the pitfalls related to building a smooth navigation experience for your users.
Since the very beginning of modern mobile development, one of its most important goals was to provide end user with 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. Android platform had some teething troubles, however tremendous progress has been made there to 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 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!
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.
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?
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 vanila 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.
v2branch that is still in alpha phase. It is said that current
v1will soon become obsolete, hence the new projects should consider starting with
v2branch 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.