React navigation : 4 reasons to like it

Thought leadership article

React navigation : 4 reasons to like it

What is this technology ? Why use it ? Why we recommend it ? Garri, React Native and Senior iOS Developer at VISEO APAC, gives you 4 reasons to like it.

As a React Native developer, I always start by choosing which library to use to manage the navigation of my app. The two main libraries I choose are React Navigation and React Native Navigation. I know, they have similar names, but today, I’ll speak about the first one, as I use it in my latest client project.

 

React Navigation is straightforward navigation solution written purely in JavaScript. It allows you to present common navigation patterns like stack, tabbed and drawers - all navigation components that are in pretty much in any modern app.

Why do I recommend it ?

- Supported by the community: the official React Native documentation suggest using this library if are just getting started in React Native and with navigation. If the guys from Facebook recommends it, you won’t go wrong!

 

- Good feature collection: the library has features and functionalities that are commonly used in modern apps: hamburger menus, scrollable tabs, deep linking, etc… On a native application, you would have to build such features from scratch, but on React Navigation you have it out of the box! It speeds the initial app development tremendously.

 

- Documentation: the documentation base is very good, and it has improved a lot in the latest versions. It provides very comprehensive guides which helps both in developing and bug-fixing.

 

- Straight forward integration: the integration process of the React Navigation component into the application is straightforward and works well. I have not faced any issue so far, which is not something I can say of all libraries.

 

Of course, it is not the answer to all navigation problems and the library is not exhaustive. If you need extra features, you will have to customize it, though I have not done it personally (as, so far, i did not need it...). Also, I still have to check if it works on Harmony OS (Huawei’s Android based future mobile operating system).

How to use it ?

If you want to add this library in your project (guide here):

1. Add the library to the list of dependencies of the project

2. Include the React Navigation library, and its dependencies.

3. Import the navigation container component inside the main application index file.

4. And… that’s pretty much it!

 

To be noted:

- The latest stable version is version 5

- GitHub repo

- The license type is MIT: it is open source with no copyright restriction, so you can use it in pretty much all type of projects.

 

I would advise anyone writing a new React Native app to use this library as it is convenient, and documentation is well written, comprehensive, and well structured. It is adapted for senior developers, as well as beginners.

 

About the author

Garri by VISEO 

Garri is a mobile development tech lead, specialised in iOS and ReactNative applications. He has been working with VISEO for the past three years, in our Cebu (Philippines) office and Singapore office.