Nested Navigation with Multiple Back Stack Android Jetpack Compose

AuthNavGraph.kt

fun NavGraphBuilder.authNavGraph(navController: NavHostController) {
  
    navigation(
        startDestination = AppScreen.Auth.Login.route,
        route = AppScreen.Auth.route
    ) {
        composable(route = AppScreen.Auth.Login.route) {
            LoginScreen(
                navigateToHome = {
                    navController.navigate(AppScreen.Main.route) {
                        popUpTo(AppScreen.Auth.route) {
                            inclusive = true
                        }
                    }
                },
                navigateToSignUp = {
                    navController.navigate(AppScreen.Auth.Register.route)
                },
            )
        }

        composable(route = AppScreen.Auth.Register.route) {
            SignUpScreen(onNavigateBack = {
                navController.navigateUp()
            })
        }
    }

}

BottomBar.kt

@Composable
fun BottomBar(
    navController: NavHostController,
) {
    val navigationScreen = listOf(
        AppScreen.Main.Home, AppScreen.Main.Notification, AppScreen.Main.Profile
    )

    NavigationBar {

        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.destination?.route

        navigationScreen.forEach { item ->

            NavigationBarItem(
                selected = currentRoute == item.route,

                label = {
                    Text(text = stringResource(id = item.title!!), style = MaterialTheme.typography.displaySmall)
                },
                icon = {
//                    BadgedBox(badge = {}) {
//
//                    }
                    Icon(
                        imageVector = (if (item.route == currentRoute) item.selectedIcon else item.unselectedIcon)!!,
                        contentDescription = stringResource(id = item.title!!)
                    )
                },

                onClick = {
                    navController.navigate(item.route) {
                        popUpTo(navController.graph.findStartDestination().id) {
                            saveState = true
                        }
                        launchSingleTop = true
                        restoreState = true
                    }
                },
            )
        }
    }
}

ChildNavHost.kt

--- Home Nav Host

@Composable
fun HomeNavHost() {
  
    val homeNavController = rememberNavController()
    NavHost(navController = homeNavController, startDestination = AppScreen.Main.Home.route){

        composable(
            route = AppScreen.Main.Home.route) {
            HomeScreen(onProductClick = {
                val route = AppScreen.Main.ProductDetail.createRoute(productId = it)
                AppLog.showLog("Router---> $route")
                homeNavController.navigate(route)
            })
        }

        composable(route = AppScreen.Main.ProductDetail.route) {
            ProductDetail() {
                homeNavController.navigateUp()
            }
        }

    }

}

--- Profile Nav Host

@Composable
fun ProfileNavHost(rootNavController: NavHostController) {
    val profileNavController = rememberNavController()

    NavHost(navController = profileNavController, startDestination = AppScreen.Main.Profile.route) {

        composable(
            route = AppScreen.Main.Profile.route
        ) {
            ProfileScreen(navigateToLogin = {
                rootNavController.navigate(AppScreen.Auth.route) {
                    popUpTo(AppScreen.Main.route) {
                        inclusive = true
                    }
                }
            })
        }

    }

}

--- Notification Nav Host

fun NotificationNavHost() {
    val profileNavController = rememberNavController()

    NavHost(navController = profileNavController, startDestination = AppScreen.Main.Notification.route){

        composable(
            route = AppScreen.Main.Notification.route
        ) {
            NotificationScreen()
        }

    }

}

MainActivity.kt

...
  Scaffold(
                    snackbarHost = {
                        SnackbarHost(hostState = snackbarHostState)
                    },
                    bottomBar = {
                        if (bottomBarState.value) {
                            BottomBar(navController = navController)
                        }
                    }) { paddingValues ->
                    Box(
                        modifier = Modifier.padding(paddingValues)
                    ) {

                        // For multiple back stack nav host
                        RootMultipleBackStackNavHost(
                            isAuthenticated,
                            rootNavHostController = navController
                        )
                    }
                }

MainNavGraph.kt

fun NavGraphBuilder.mainNavGraph(rootNavController: NavHostController) {
  
    navigation(
        route = AppScreen.Main.route,
        startDestination = AppScreen.Main.Home.route
    ) {

        composable(route = AppScreen.Main.Home.route) {
            HomeNavHost()
        }

        composable(route = AppScreen.Main.Notification.route) {
            NotificationNavHost()
        }

        composable(route = AppScreen.Main.Profile.route) {
            ProfileNavHost(rootNavController)
        }

    }

}

RootNavHost.kt

@Composable
fun RootNavHost(isLoggedIn: Boolean, rootNavHostController: NavHostController) {
    NavHost(
        navController = rootNavHostController,
        startDestination = if(isLoggedIn) AppScreen.Main.route else AppScreen.Auth.route
    ) {

        authNavGraph(rootNavHostController)
        mainNavGraph(rootNavHostController)
    }
}