Disclaimer: This post comprises my personal opinion, which was built on the experience of using multiple navigation libraries for React Native apps.
When it comes to mobile app development using React Native, one of the most important steps is selecting the perfect navigation library for your project. Navigation serves as the backbone of an app and has a big impact on user experience.
There isn’t any single solution that fits all requirements. There are a number of navigation libraries out there for us to choose from.
React Navigation is one of the most widely used and actively developed libraries out there on the scene. It is also one of the solutions recommended by the React Native team. It’s the community solution being most pushed by Facebook.
Here we will compare React Navigation with its well-known alternative React Native Navigation (RNN), weighing the essential aspects that are critical to selecting a navigation library for your app.
We will analyze scenarios in which React Navigation thrives, along with a few where it doesn’t. In the latter cases, we will try to analyze how much complexity you’d have to carry in order to achieve the features you want, or how good RNN would be in those cases.
Performance
Performance is the first parameter when selecting a navigation library for your app. The number of frames displayed per second determines the smoothness of the interface. Most performant apps maintain 60fps all the time, especially during interactions and transitions.
This benchmark leaves us with a tiny slap of about 16.67ms to do all of the work needed to generate the next frame. If we miss this window, we will drop a frame, which can make our UI appear unresponsive and janky.
In our React Native apps, most of the business logic resides on the JS thread, including API calls, state management, and the processing of touch events. React Navigation works entirely on the same JS thread as the rest of your app.
When you push a new route, the JavaScript thread needs to render components on the screen in order to send the proper commands over to the native side to create the backing views. This might result in a performance bottleneck for apps with a large number of screens and complex interfaces.
One of the solutions for this issue is to attach the root component of your entire screen (or a few parts of your screen) to the native view hierarchy. This solution is now doable with ease by using react-native-screens along with React Navigation. Here is the guide to do so.
In recent versions, all animations are done using native drivers in built-in navigators. Alongside this, the React Navigation team is working on using react-native-reanimated to make gesture release more performant. For handling gestures, react-native-gesture-handler is being used in recent versions to offload gestures from the JS thread to the main thread.
As compared to React Navigation, RNN by default treats all your screens as individual React applications, which, as a result, makes your app more performant. This comes with some complexity, however — especially when integrating with libraries like Redux and react-intl that require you to wrap your app. We will discuss this later in the integration comparison.
Using multiple routers
In apps that require login, developers usually prefer different navigators to handle non-login and login journeys separately. With React Navigation, that’s quite easy to implement, courtesy of its being a JS-based navigator and the awesome API it provides. When using multiple routers, have a look at this guide by React Navigation to avoid any troubles.
On the contrary, RNN allows you to set the root of navigation from any point in your app, mimicking the native API where you can start a new activity or fragment and clear existing stack.
Integration with other third-party libraries
Being a JS-based navigator allows React Navigation to integrate smoothly with any of the third-party libraries, while RNN may suffer from libraries that are tightly coupled with native platforms or need to be wrapped around the whole app.
For example, RNN comes with separate guidelines for integrating packages like React Native Facebook SDK and an out-of-the-box API to integrate Redux in your app.
Integration with existing apps
One of the major benefits of React Native is its ability to integrate with any of your existing native apps. In such a case, any navigator based on JS works really well as compared to existing native solutions.
This gives React Navigation the edge over RNN, especially if you are looking to power a few modules of your existing app with React Native, just like Facebook and many other brownfield apps do.
Boot-up efforts
If you and other developers on your team don’t have a background in native app development, you might want a solution that doesn’t have a steep integration guide. React Navigation has a slight edge here as compared to React Native Navigation when it comes to the integration process.
Although some developers at times find it a little difficult to get started, this official guide by Wix can help you to get things going. There is also a really helpful discord chat by Wix that might be your go-to option in case of any trouble.
Deep linking
In this era of social media in which your customers act as marketing agents, most apps have a simple way to allow users to share information and activities on their social channels. This demands that we enable deep linking in our apps.
Let’s say your app shows blogs, and you want users to directly land on a post screen when they enter your app. Neither React Navigation nor RNN currently provides an easy way to do this. Both work best in situations where your routes can be defined statically. Although there are workarounds you can implement to achieve this feature, again, it comes at the cost of adding complexity to your codebase.
Development team and backing
When selecting any library, one of the major factors that has a big impact on your app is the number of developers and contributors who maintain that library.
The team behind React Navigation comprises people who are active contributors in the React Native core and expo. Besides this, they are developing a number of React Native apps that give them a wider perspective on issues that may arise with yours in the future.
A large number of apps built with React Native, including CNN, Bloomberg, and Urban Dictionary, are using react-navigation today. Here’s a Twitter thread that lists more such apps.
RNN is backed by Wix. They’re using it for their own app in production and are really focused on its continuous progress and development.
In a nutshell
Selecting the navigation library is a crucial step in your app’s development. Any decision made without due thought and care might hurt your app’s scalability or create other issues when it grows larger.
IMHO, React Navigation is one of the best navigation solutions available right now. It is a widely adopted library and fits in nicely for most use cases. With certain known limitations, it is a go-to solution. Keep in mind that it’s now getting a performance boost thanks to libraries like react-native-screens and react-native-gesture-handler.
For further in-depth analysis, you can watch this awesome talk by Brent Vatne, a major contributor to React Navigation. Brent has compared both of these navigation solutions quite comprehensively.
Discuss this post on Hacker News & Reddit
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
