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?

Berlauda

Same issue here, would love to see some more ideas on what folks are doing to solve this issue – Adrienneadrift

Check this video tutorial: youtu.be/gNzPGI9goU0 – Erector

Also this can help developer.android.com/jetpack/compose/navigation#nested-nav – Remonstrant

Answer 1

first of all you have mainActivity with this navGraph :

AnimatedNavHost(
    navController = navController,
    startDestination = "onBoarding",
    modifier = modifier
) {
  onBoardingScreen(
   navigateToLegal = {
    navController.navigateToLegal()
   }
   nestedGraphs = {
      legalScreen()
   }
  )
  loginScreen(
   nestedGraphs = {
      registerScreen()
      recoverScreen()
   }
  )
  mainScreen(
   nestedGraphs = {
      productScreen()
      profileScreen()
   }
  )
}

then in each screen you can have something like this :

fun NavGraphBuilder.onBoardingScreen(
    nestedGraphs: NavGraphBuilder.() -> Unit,
    navigateToLegal : () -> Unit
) {
   navigation(
       route = "onBoardingGraphRoutePattern",
       startDestination ="start"
   ) {
       composable(
           route ="start",
       ) {
        StartRoute()
       }
       nestedGraphs()
    }
}

for each nested screen we have two function like this :

1-

fun NavController.navigateToLegal(
   navOptions: NavOptions? = null
) {
   this.navigate("legal", navOptions)
}

2-

fun NavGraphBuilder.legalScreen() {
  composable(
      route = "legal",
  ) {
      LegalRoute()
  }
}

i think with this pattern you can have one navController in main and nested navGraph for each screen and can handle your application

for more information and more sample you can read this project : Now In Android

hope help you :)

Telegony