How to clear the whole backstack for all nested NavGraphs?

Question

I have an application with a NavigationBar that includes three destinations. It is configured so that two of the destinations point to a seperate nested NavGraph, namely IssuesGraph and InstructionsGraph. While navigating within the nested graphs and then switching between the two destinations, the respective stack for each nested graph is saved as I wish.

NavigationBar {

    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentDestination = navBackStackEntry?.destination

    bottomNavigationItems.forEachIndexed { index, item ->
        NavigationBarItem(
            icon = { Icon(item.imageResource, stringResource(id = item.titleResource)) },
            label = { Text(stringResource(id = item.titleResource)) },
            selected = currentDestination?.hierarchy?.any { it.route == item.route } == true,
            onClick = {
                navController.navigate(item.route) {
                    popUpTo(navController.graph.findStartDestination().id) {
                        saveState = true
                    }
                    launchSingleTop = true
                    // Restore state when reselecting a previously selected item
                    restoreState = true
                }
            }
        )
    }
}

However, I now need to reset the complete navigation graph, so I want the App to display the first destination within the IssuesGraph, and if I navigate to the InstructionsGraph, it should show its first destination, too.

My NavHost looks like this:

NavHost(
    modifier = modifier,
    navController = navController,
    startDestination = startDestination,
) {

    issueGraph(navController, issuesVM)
    instructionsGraph(navController, instructionsVM)

    composable(Screen.SettingsScreen.route) {
        SettingsScreen(
            onSave = {
                // Here, I want to trigger a reset of 
                // the backstacks of issuesGraph and instructionsGraph
                // and navigate to the first screen of the issuesGraph
                navController.navigate(Screen.IssuesGraph.route) {
                    popUpTo(navController.graph.findStartDestination().id) {
                        saveState = false
                    }
                }
            }
        )
    }
}

The seperate NavGraphs are built using the NavGraphBuilder extension function:

fun NavGraphBuilder.issueGraph(navController: NavController, issuesVM: IssuesVM) {
    navigation(startDestination = Screen.IssuesHome.route, Screen.IssuesGraph.route) {
        composable(Screen.IssuesHome.route) {
        //...
        }
    }
}

The problem is, that calls like this

navController.navigate(Screen.IssuesGraph.route) {
    popUpTo(navController.graph.findStartDestination().id) {
        saveState = false
    }
}

only clear the back stack for the nested NavGraph the the goal route Screen.IssuesGraph.route resides in. So in my case, the IssuesGraph is reset, but the InstructionsGraph isn't. When I navigate there, it still shows its previous backstack.

I already stumbled across the setGraph documentation, but couldn't understand how I could use it in my case.

Thanks for any efforts!

score 0 · Answer 1 · answered Mar 01 '23 at 15:08

0

Hi I am not sure you need some like it was in my case. For me this solution was good ..

popUpTo(navController.visibleEntries.value.first().id) { //..

answered Mar 01 '23 at 15:08

JoséAntonio Campillo

406
3
6

How to clear the whole backstack for all nested NavGraphs?

1 Answers1