Structuring Navigators in React Navigation

JavaScript
1

Hi fellow developers,

I am confused about structuring navigators in a React Native project using React Navigation and will appreciate it if someone can guide me about it.

In a recent project, I had to create a React Native app with multiple screens (30-35 screens approximately). I am using React Navigation for navigating between screens. I will appreciate some advice on what should one prefer between using a single stack navigator and all screens within that or should I use one main navigator and nested navigators within that for different sections of the app. Please also take into consideration that it is a bit complex navigation and I would have to often switch between nested navigators (i.e. move from screen A in navigator X to screen B in navigator Y and then move back). Considering the fact that a screen once mounted stays mounted (until we go back from it to the previous one, this is what I know, it would be awesome if you can explain in detail how this works) in React Navigation, what should one prefer to improve the performance of the app.

Please let me know if more explanation of the situation is required. I will appreciate advice on the pros and cons of one approach over the other.

I am still a fresher and will love to know how situations like these are handled in large scale projects.

2

It’s been a long while since I used React Navigation. Given a choice, I would recommend just sticking with the easiest setup, single stack. The navigators are confusing enough without adding complexity. Once you get used to that, you can think about building on that. On the other hand, if you decide you must do nested navigators, I might find a repo of a project that does something similar to what you want and mess around with that for a bit. Similarly, you could probably find some tutorials and mess around with those for a while. I found some on youtube.

3

@kevinSmith , I am comfortable with using nested navigators. I just want to know which approach is better in terms of app’s performance. An explanation of pros and cons of both approaches or a rule of thumb for selecting between the two approaches is something I am looking for.

Thanks for the resources though, I appreciate your help.

4

I haven’t done any benchmarking, but I would expect nested navigators to be slightly less performant, but not enough to really care about in most applications.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.