Nested StackNavigator or ES6 Spread Operator ?

Are you using react-native and are wondering how to reuse screens in different tabs without having to fall in the pit of nested StackNavigator? Are you worried that with nested StackNavigator you would often want to meddle with the back button, deal with multiple headers by adding an extra attribute i.e. headerMode: ‘none’ and try your best to make everything else look/ work right (if you know what I mean)? Here’s a hint, avoid the nesting of StackNavigator and try out the ES6 spread operator.

To follow what I mean lets take an example. Suppose following is the app(see the images below) we want to develop. The app has 4 tabs i.e. Movies, TV Shows, Search and Settings tabs. The tabs are implemented using TabNavigator and each tab is a StackNavigators. Some of these tabs will have common screens.

For this demonstration, we are interested only in the first three tabs i.e Movies, TV Shows and Search. The Movies tab has Movie Details, Cast Details and Trailers/VideoPlayer screens along with the Movies screen itself (refer image below). The TV Shows tab has TV Show Details, Cast Details, Season Details and Trailers/VideoPlayer screen along with the TV Shows screen itself. In the Search tab, one should be able to search for Movies, Tv Shows or a Person(Cast). Therefore it is evident that for the Search screen, we would want to reuse all the screens aforementioned except for the Movies and TV Shows screens.

There can be multiple approaches to reuse these screens. The goal here is to avoid redundant code and provide a clean solution.

Approach 1: Using StackNavigator

With the above code along with some tweaks for the back button, we can achieve the goal of reusing the screens. Also, we would end up avoiding redundant code to an extent but not completely. There are a couple of points to be noted here, firstly observer that we need to add a dummy route for nesting the StackNavigator. Secondly, you can see that in the Movies.js and TvShows.js the CastDetails and VideoPlayer screens/routes are common, also the Search screen will have to maintain a separate route for CastDetails so that we do not land in either TvShows or Movies tab when searching for a person and viewing his/her details. To abstract out the CastDetails and VideoPlayer screens/routes using only the StackNavigator, we would have to nest them one level deeper. Honestly, this approach would be chaotic if we have more such scenario and it is not scalable.

Approach 2: Using ES6 Spread Operator

With this approach there is absolutely no need of a dummy route. The code is much cleaner and totally non redundant. Most importantly, unlike the nested StackNavigators, no tweaks are needed for the back button to work as desired. Here is a video that demonstrates all the routes.

Nesting of StackNavigator can sometimes be arduous unless you know what you are up to. Do use it only when it is absolutely necessary. In cases where you want to nest the StackNavigator merely to avoid redundant code, prefer the ES6 spread operator instead.

You can find the complete code  here .