The caveats of using Navigator in React Native

After having a great experience of working with React, we did not leave much time to try our hands on React Native when it went open source, with Native Starter as our first project.

We have been quite into it ever since, with the pro version of Native Starter and now NativeBase, an open source framework to write React Native apps being one of our works.

I must say, we’ve never worked more dynamically. React Native is awesome. I won’t go off-topic describing why, because you can probably already relate to it.

However, React Native is still at an early age and there are few issues that we get to discover once we go deep into it.

One of them, was dealing with Navigator.

When we pushed views into the navigator, the navigator got stacked with new pages. As we kept pushing new views to the navigator, the app started to slow down and lag.
The reason was that whenever a new view was pushed, it was mounted every time causing the app to slow down.

Navigator is not like the routers of the web

Navigation in mobile apps is a lot different compared to how routing works on the web. For instance React-Router (React for web) uses named routes and URLs which isn’t needed for Navigator of React Native . Each screen is defined as a component and the transition from one screen to the other doesn’t involve any kind of URL. Navigator is more like an array where you push() components to navigate to another screen and to navigate back, you pop() the component.

Navigating to new screen by push() doesn’t destroy the instance of the last screen and the component isn’t unmounted at all until it is popped out. So, if you’re not handling push() and pop() correctly, you may end-up in huge memory leak issues, making your app really slow.

It happened with us and we learnt how different Navigator is from other routers on the web.

So what did we do about it?

The manual solution would have been handling push and pop correctly, which is actually the ideal way to go for.

However, we chose to go for a third party library, react-native-router-flux by Pavel Aksonov.

In Pavel’s own words,

react-native-router-flux is a routing package that allows you to:

• Define scene transitions in one central location
• Without having to pass navigator objects around, and allow you to
• Call transitions anywhere in your code with a simple syntax (e.g. Actions.login()).

Bringing in ideas from React-Router, it’s fairly easier to work along with.

The installation and usage is pretty simple and straightforward. You can view all the steps on its Github repo.

Conclusion

Even though React Native is fairly young, it is backed by a very active developer community, the core team as well as the developers who are contributing to it. No wonder we get new releases every day.

One of those contributions turned out to be the suitable solution for us in this case.

We ourselves try to contribute wherever we can. Do check out our open source React Native projects, NativeBase and React Native Easy Grid.

Thanks for the read. Stay updated with cool new React Native hacks & resources and NativeBase progress by following us here on Medium and on Twitter.