Working with navigation when refactoring a project legacy in React Native

This material is devoted to work on refactoring navigation in mobile development.
The article provides examples of possible problems, as well as ways out of difficult situations related to the work of navigation in mobile development on React Native.

We will consider the main features and problems of the mobile Legacy project, step by step we will go through a chain of actions consisting of setting a task, identifying bottlenecks, finding solutions to existing problems and obtaining the desired result.


React Native is a relatively young open source mobile app development platform created by Facebook. It is used to create applications for Android, iOS and UWP, and allows developers to use React together with their own platform capabilities.

Navigation is almost the most important element in a mobile application. When building the architecture of the application, you should pay special attention to this topic.

The most common libraries for building navigation:

Less common libraries:

My experience

I will tell you briefly about my experience as a developer. I have been working with React Native for over two years. There are several completed projects published in app stores. During this time, I managed to get acquainted with a large number of tools in the environment of React Native. Navigation is often a stumbling block in mobile development projects. The Legacy project I was working on was no exception. This will be discussed later.


The code was duplicated in the process of refactoring the application instead of dividing the roles into two types (user and administrator). Unfortunately, the same problem was present in navigation.
The architectural features of the application were not taken into account.

All screens were divided into three types: authorization screens, administrator screens, and user screens.

Instead of a logical connection between the root stack and the Navigator Tab with role switching, there was an illogical division into user navigation roles stacks.

Moreover, the construction of navigation for each user was repeated.

I needed to solve the following problems:

Add a screenshot of the modal window component that served as the tab navigator.


Results of the work:

The following methods were used for the React-Navigation version:


I managed to get rid of most of the duplicate navigation screens and build a more logical structure.

In the refactoring process, all navigation was redesigned. Part of the refactoring of navigation also involved getting rid of double screens and creating a unified navigation structure. The screens that were supposed to be located outside the tabs were in the root navigator, and the screens of the navigator tab itself can be seen in the screenshot.


Summing up, I would like to once again note the importance of navigation libraries, as well as pay attention to the use of the most effective strategies for working with them and an in-depth study of technical documentation. Otherwise, you will spend a lot of time and effort on refactoring and refining an existing project and its code base.

Choosing a navigation library is an important step in developing your application. Any decision made without due thought and caution can damage scalability or create other problems.

Useful links:

React navigation
React native
Problems of development the legacy mobile project


All Articles