Navigating between Nested Screens & Navigators

Question

I’ve yet to find a good approach / answer to this question and figured this would be a great place to start. I'm in React Native use React's Navigation. Essentially I have a lot of screens… These screens vary between normal screens and/or within nested navigators. But I’m starting to notice that I am getting into a spaghetti of nested screens within my app.

For example: let’s use the common “ViewProfileScreen” screen. This is added across multiple navigators: HomeNavigator (navigating from thumbnail of post on the home screen), ExploreNavigator (navigating from a drop down on the search screen), and MyProfileScreen.

Currently HomeNavigator and ExploreNavigator both have “ViewProfileScreen” within each navigator. But when I click the thumbnail of a comment from a post on MyProfileScreen, I navigate from MyProfileScreen to “ViewProfileScreen” in another Navigator (since I have not explicitly added a Screen to the MyProfileScreen navigator). When I gesture swipe back (not click the goBack()), it takes me to the parent screen in the new navigator. It does not take me back to the MyProfileScreen that I navigated from. I understand this is the intended design, but becomes frustrating when a user just wanted to go back.

It feels not organized to have every screen within a singular AppNavigator file (as I have many screens). What would the best approach be for a large production scale app with >40 different screens. Do I start looking into Deep Links? Redux? Do I prevent the swipe back gesture and implement my own gesture logic for “goBack()”? I’m open to thoughts!

I am expecting to go back to the original screen versus going to parent.

Answer 1

Ideally, each different flow ends up being a separate stack navigator.

If you have a screen that can be accessed from many other nested stacks it is a good idea to place it as a modal screen in the root navigator, that way each different stack navigator can navigate to it.

<RootNavigator>
    <Stack.Screen name='Home' component={HomeStack} />
    <Stack.Screen name='Explore' component={ExploreStack} />
    <Stack.Screen name='Profile' component={ProfileStack} />
    // RootNavigator Modals
    <Stack.Screen name='ViewProfile' component={ViewProfile} />
</RootNavigator>

Having this type of structure will allow you to navigate to ViewProfile from each nested screen inside each different stack Home, Explore, or Profile. Going back from ViewProfile will get you back from the screen you have navigated to the ViewProfile screen (which is the desired behavior).

Let's assume we're inside Home -> PostDetail -> Comments -> ViewProfile - going back should get you back to the Comments screen.

The same goes for Profile -> AnotherScreen -> ViewProfile -> going back should navigate to AnotherScreen.

If you have a more complex scenario you can try to utilize navigation.reset and navigation.replace

https://reactnavigation.org/docs/navigation-prop

Answers to some of your questions:

• Do I start looking into Deep Links? - No, there is no need to do that.
• Redux? No, ideally you don't want redux to know anything else but state management.
• Do I prevent the swipe-back gesture and implement my gesture logic for “goBack()” - Never prevent the swipe-back gesture, iOS users get very angry when this happens, lol.