Compose-Navigation: Remove previous composable from stack before navigating

Question

I'm using compose-navigation(alpha09) to handle the navigation between composables

I want to remove the Splash screen when moving to the next destination (I don't want the back pressed to get back to Splash)

Following attempts did not work as expected:

navHostController.navigate(Route.login.id) {
    navHostController.graph.clear()
}

navHostController.navigate(Route.login.id)
navHostController.graph.clear()

val currentDest = navHostController.currentDestination
navHostController.navigate(Route.login.id)
if (currentDest != null) {
   navHostController.graph.remove(currentDest)
}

So how can I remove the Splash screen and then move to next?

iknow · Accepted Answer · 2023-04-03T19:37:58.063

68

In Jetpack Compose 1.0.0 to navigate and remove the previous Composable from the back stack You can use:

navController.navigate(Screens.Login.name) {
    popUpTo(Screens.Splash.name) {
        inclusive = true
    }
}

The above code will navigate from the Splash screen to Login and will pop everything up, including the Splash screen.

Navigate to a composable - docs

edited Apr 03 '23 at 19:37

answered Jul 08 '21 at 14:55

iknow

8,358
12
41
68

2

Cool. Thank. I'll accept yours since my old self-answer is obsolete now. – Mahdi-Malv Jul 10 '21 at 12:40
2

Great it worked, popUpTo(0) have not worked for me – Mubashir Murtaza Dec 26 '22 at 05:17

Mahdi-Malv · Answer 2 · 2022-04-27T11:01:33.940

58

For v1.0.0-alpha09 (And 1.0 stable)

Using popUpTo(0) you can clear the stack before navigating to the next destination. So:

navHostController.navigate(Route.login.id) {
    // popUpTo = 0 // DEPRECATED
    popUpTo(0)
}

edited Apr 27 '22 at 11:01

answered Mar 28 '21 at 20:28

Mahdi-Malv

16,677
10
70
117

2

popUpto is deprecated – Rulogarcillan Jun 20 '21 at 21:59
6

@Rulogarcillan But not `popUpTo(0)` – vitidev Aug 10 '21 at 13:25
1

Valid solution for 1.0.0 stable – Daniele Apr 27 '22 at 10:15
1

The only one that worked for me, I'm surprised that this is not mentioned anywhere in the docs – Driss Bounouar Aug 25 '22 at 13:24
I have never succeeded in popping the back-stack. This is the only way that worked for me, thanks! – Mohamed Medhat Oct 23 '22 at 09:24
why we have to give zero, what is the purpose of that – Tippu Fisal Sheriff Nov 07 '22 at 06:04
Works fine for latest version – Vetalll Nov 29 '22 at 12:58
3

The solution I found that is avoiding hard-coding 0, you can use first element from navHostController.backQueue and pass its id to popUpTo: popUpTo(navHostController.backQueue.first().destination.id) For more info, here is the detailed explanation https://medium.com/@banmarkovic/jetpack-compose-clear-back-stack-popbackstack-inclusive-explained-14ee73a29df5 – Ban Markovic Jan 03 '23 at 12:59
Don't use this. As Ban Markovic said, this can only work by accident. You should pass destination id as argument instead. – Peter Aug 23 '23 at 12:04

bboyairwreck · Answer 3 · 2022-02-17T21:26:18.210

For a consistent reusable function that does not need to be aware of the current route, use this NavOptionsBuilder extension function

fun NavOptionsBuilder.popUpToTop(navController: NavController) {
    popUpTo(navController.currentBackStackEntry?.destination?.route ?: return) { 
        inclusive =  true
    }
}

^ Similar to other answers, it popUpTo the current route, but rather than needing to name the specific current route, it instead gets it from the backstack entry.

Now you can use it like so:

navController.navigate(ScreenRoutes.Login.route) { popUpToTop(navController) }

^ That example navigates to Login, and should clear the entire backstack before it.

Ban Markovic · Answer 4 · 2023-01-03T22:26:37.237

9

Apart from screens, back stack contains navigational graphs, and its root is always the first thing in back stack. Our NavHostController contains graph, so by popping its id, you are able to clear your back stack:

popUpTo(navHostController.graph.id)

For more info, here is the detailed explanation https://medium.com/@banmarkovic/jetpack-compose-clear-back-stack-popbackstack-inclusive-explained-14ee73a29df5

edited Jan 03 '23 at 22:26

answered Jan 03 '23 at 13:02

Ban Markovic

690
1
7
12

That's the only correct answer. Pls, rate it up to make sure everybody will follow this approach. Other answers contain mistakes - the start destination can be removed from the back stack in the runtime. In this case `findStartDestination` returns a non-existing route that was already removed from the back stack. And that's why `popUpTo(navController.graph.findStartDestination().id)` won't pop up any route. – Mihail Ya Jul 05 '23 at 08:37

Abdul Mateen · Answer 5 · 2021-11-11T06:50:13.173

8

For clearing all back stack

To remove multiple composable screens from the stack use the below snippet

navController.navigate(ScreenRoutes.Login.route){
                    popUpTo(navController.graph.findStartDestination().id){
                        inclusive = true  }}

Or To keep Home in back stack

navController.navigate(ScreenRoutes.SelectCourseLayout.route){
    popUpTo(ScreenRoutes.Home.route)
}

edited Nov 11 '21 at 06:50

answered Sep 20 '21 at 10:58

Abdul Mateen

1,139
1
14
21

score 3 · Answer 6 · answered Oct 10 '22 at 09:54

To clear the back-stack, you can simply create this Extension function and reuse it wherever applicable.

fun NavHostController.navigateAndClean(route: String) {
    navigate(route = route) {
        popUpTo(graph.startDestinationId) { inclusive = true }
    }
    graph.setStartDestination(route)
}

score 2 · Answer 7 · answered Jan 04 '22 at 02:04

2

Jetpack Compose v1.0.5

navController.backQueue.removeIf { it.destination.route == "Splash" }
navController.popBackStack()

answered Jan 04 '22 at 02:04

Hun

3,652
35
72

score 1 · Answer 8 · answered Jul 18 '22 at 15:59

After so many try, I've found the better way to clear the back stack during the logout scenario. Most of the production app will clear the splash or sign in screen as soon as we navigate to Home screen and there would be a multiple way to land into Home screen as well.

So, we may not know the initial screen to perform the popupTo. If there is a bottom bar, then story would be too difficult as well.

Here is a magic could that work all the scenario

 val firstBackStackRoute = navController.backQueue.firstOrNull()?.destination?.route
 firstBackStackRoute?.let { 
        navController.popBackStack(firstBackStackRoute, true)
  }

score 0 · Answer 9 · answered Apr 22 '23 at 06:41

0

this solved the issue for me

navigator.popBackStack()
navigator.navigate(myroute){
    launchSingleTop = true
}

it removes the last one though

answered Apr 22 '23 at 06:41

Sourav

312
1
8

Compose-Navigation: Remove previous composable from stack before navigating

9 Answers9