Jetpack Compose: Nested navigation with bottom bar navigation in a nested route

Question

My app has the following structure and because Route B has a own bottom navigation bar and thus an own NavHost, how can I navigate from Screen C (opened from the tab bar) to Route A?

 - Nested Route "/onboarding_route", startDestination = 'start' 
     - route 'start' -> Screen 'Login' (Composable)
     - route 'legal' -> Screen 'Legal' (Composable)

- Nested Route "/login_route", startDestination = 'login' 
     - route 'login' -> Screen 'Login' (Composable)
     - route 'register' -> Screen 'Register' (composable)
     - route 'recover' -> Screen 'Recover' (composable)

- Nested Route '/main_app', startDestination 'dashboard' => with bottom navigation
     - route 'dashboard' -> Screen 'Dashboard' (composable)
     - route 'product' -> Screen 'Product' (composable)
     - route 'profile' -> Screen 'Profile'
     

The navigating to the route 'main_app' should display the bottom bar navigation with three NavigationItems. I could do this with a scaffold with a bottom bar in each screen (Dashboard, Product, Profile) or I can add a MainView Screen on top, which holds the scaffold with the bottom bar:

 - Nested Route '/main_app', startDestination 'mainVie/dashboard' => with bottom navigation
     - route 'mainView/{tabname} => Screen 'MainView' with Scaffold & bottom bar
          - route 'dashboard' -> Screen 'Dashboard' (composable)
          - route 'product' -> Screen 'Product' (composable)
          - route 'profile' -> Screen 'Profile'

If I work with this solution I have the following problem: Within the screens 'Dashboard', "Product' and 'Profile' I only have the navigation controller from the BottomBar and I can't navigatate to top routes like 'login_route'.

I think this is quite common scenario: You have an onboarding screen, login / registration screens and they all without a bottom bar. Once you are in the main screen you want to have displayed a bottom bar and then you probably want to go back to the login screen from one of the screen. If the whole navigations is seperated in nested navigation routes (as Google recommends) I don't know how to navigate from a nested screen back to one of the top routes.

What are the best practices to have proper and clean navigation structure?

Answer 1

Sometimes, especially at this time with the actual Compose nav library state of the art, it would be still a good idea to separate such big features into different activities. So, based on your example, login will have its own activity as an entry point, the same for the onboarding, and the same for the main.
Doing so it's easier to jump back and forth between different main screens (or features) playing with intents. This doesn't mean that you cannot reuse your composables, which will be seated in a dedicated module.

This is just my thought, but based on my experience is still a way to maintain the separation of concerns principle.

Looking forward to hearing more from others!