Implementing back navigation in Jetpack Compose-CodePudding

I've got a top bar with IconButton for handling back navigation when clicked.

Function passed as callback's implemented like this:

private fun navigateBack(navController: NavController) {
    val route = navController.previousBackStackEntry?.destination?.route ?: ""
    navController.navigate(route)
}

Unfortunately, it's not working the same as the default android bottom navigation shown in the picture

Is there a way to implement the same back navigation as bottom system navigation has?

CodePudding user response：

You can pass your NavController to your TopAppBar and use navController.navigateUp() in the navigation icon.

If you want to show this icon only in some composables you can use a parameter, like canPop in the following example, and set it true in the composable where you want handle the back button.

if (canPop) {
    TopAppBar(
        title = { Text(text = title) },
        navigationIcon = {
            IconButton(onClick = {
                navController.navigateUp()
            }) {
                Icon(Icons.Rounded.ArrowBack, "")
            }
        },
        backgroundColor = MaterialTheme.colors.TopBarColor)
} else {
    TopAppBar(
        title = { Text(text = title) },
        backgroundColor = MaterialTheme.colors.TopBarColor
    )
}

Check also popBackStack documentation

Attempts to pop the controller's back stack. Analogous to when the user presses the system Back button when the associated navigation host has focus.

EDIT
I edited my answer following the directions of @ianhanniballake, the best approach is with navigateUp().
Refer to The Up button never exits your app