How to log navigation back stack in Jetpack Compose?

Question

An example, the app first starts with screen A in the back stack, then navigates to screen B, then navigates again to screen C, and finally popUpTo Inclusive back to class A.

|--------|     |--------|     |--------|      |--------|
|    A   |  => |    B   | =>  |    C   |  =>  |    A   |
|--------|     |--------|     |--------|      |--------|
               |    A   |     |    B   |
               |--------|     |--------|
                              |    A   |
                              |--------|

How can I log what is inside the back stack for every change after a certain action like pop and navigate was done, that happens in my application?

Answer 1

Use currentBackStack.value instead backQueue

navController.addOnDestinationChangedListener { controller, _, _ ->
    val routes = controller
        .currentBackStack.value
        .map { it.destination.route }
        .joinToString(", ")

    Log.d("BackStackLog", "BackStack: $routes")
}

Answer 2

This can be used straight in composable:

/**
 * Logs Navigation backstack
 * output example:
 * ```
 * NavigationBackStack:
 * com.example.Route.Root
 * com.example.Route.Home
 *
 * ```
 */
@SuppressLint("RestrictedApi")
@Composable
fun LogNavigationBackStack(navController: NavController) {
    if (BuildConfig.DEBUG) {
        LaunchedEffect(Unit) {
            navController.currentBackStack
                .collect { entries ->
                    entries.map { it.destination.route }
                        .joinToString("\n")
                        .let {
                            Log.d("Navigation", "NavigationBackStack: \n$it" )
                        }
                }
        }
    }
}