Handling Navigation in React Native

Eni Sinanaj
Aug 15 · 4 min read

There’s obviously a lot of hype with react-native and let’s be honest, for those that have tried the framework, the result is quite impressive.

I started experimenting with react-native a while back and it was pretty unstable (or more probably I didn’t understand much of what I was doing).

Nowadays it has become a pretty complete framework that is also fast to develop and the development tools have caught up through the years to fullfil our needs as developers. I prefer Visual Studio Code and everything that comes with it in support to react-native.

One thing I must say. For me there is no doubt to whether use react-native or expo for my apps. I always chose react-native. I’m sure it adds a bit of complexity especially to someone starting to get to know the framework. On the other hand though it has an enormous potential as it gives you access to the native code and lets you easily implement your own native solutions in case those available are not enough.


One persistent problem I’ve had with react-native apps is navigation

Now for what I know there are two main components for handling navigation. There is one that is promoted by react-native itself “react-navigation” and another one built by Wix called “react-native-navigation”. The first one is just a javascript library while the second one is tied strictly to the native components.

react-navigation

react-navigation is pretty nice, it has everything and it renders nicely on both Android and iOS. Except for one thing, i.e. performance. For me it has been kind of not acceptable bad, especially on Android devices. One would think that with all that hardware Android phones have these days everything would be smooth. That’s not the case for react-navigation navigation components. At least in my experience, as soon as the app became a bit complex (but yet not too much) the component started showing it’s issues. User taps are reflected in the UI after as long as 2 seconds.

It has a nice API. What you do is create your view structure, set the default options and then return the navigator wrapped around an AppContainer component.

In this example the creator is using redux for a global app state. The screens defined are stateless components. As you can see they have defined the navigation options as a static attribute of the screen components. Lines 39, 55, 99 above.

A relevant part in the above code is the definition of a stack navigator.

It can be composed as one wishes. Every stack element can be a stack navigator on its own. Or some can be tab navigators, switch navigators or drawer navigators.

Be careful to configure headers correctly. If you have a top stack with 4 stacks inside it will display 2 header bars, one of the upper stack and one of the child stack navigator.

Note that it will probably not perform well on Android. Whatever the device is.

react-native-navigation

react-native-navigation on the other hand, as I mentioned above has a different kind of implementation. It uses the native navigation components instead of just javascript/UI.

The documentation is a bit superficial. I for once had a few issues understanding how to integrate it into my project in which I was already using react-navigation.

Although I must say, the installation is straight forward. By just following religiously the “Getting started” guide nothing breaks. To continue working locally though (i.e. running the app with react-native run-android or react-native run-ios).

There is a main difference between how this component is used in react-native and the react-navigation one.
react-native-navigation offers a static way to access the navigation module from every component screen or function in your application while react-navigation (while still being a singleton instance) needs to be injected into your components in order for one to be able to use it.
When using react-native I used to create my own static reference to it for convenience.

Basics in react-navigation usage

1. Register a component in order to be able to call it.

You can register your screens during app startup.

2. Afterwards you can tell your app with which screen to start

This is an event listener which will be invoked at startup and will set the root component for our app.

3. Navigation

There are different tools to navigation between screens and for each navigation change it is possible to update the options of the screen.

It always works with a componentId which most of the time will be the component id of the current screen that you can access with this.props.componentId . Check them out here.

Note. I had some strange issues in the past with custom header components. My header bar was behaving strangely where the space reserved for my custom components was not fixed, it changed from one screen to another.
As of version 2.26.2 I have not experienced that issue anymore.


I have also combined the two libraries in an application. I used react-native-navigation for the main navigation management and react-navigation for a couple of screens where I needed a top tab navigation component.

Contact me if you need help with react-native applications.

Eni Sinanaj

Written by

#dev #mobiledev #startup #entrepreneur #business #money #excess #earth #motivational #speaker #hype #manager #startup #consulting

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade