Compose navigation back button is not showing

Question

I am trying to set up the navigation back button following this SO thread, but can't make it work.

@ExperimentalFoundationApi
@Composable
fun LazyVerticalGridActivityScreen() {
    val navController = rememberNavController()

    val navigationIcon: (@Composable () -> Unit)? =
        if (navController.previousBackStackEntry != null) {
            {
                IconButton(onClick = { navController.popBackStack() }) {
                    Icon(imageVector = Icons.Filled.ArrowBack, contentDescription = null)
                }
            }
        } else {
            null
        }

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Lazy Vertical Grid") }, navigationIcon = navigationIcon)
        },
        content = {
            NavHost(navController = navController, startDestination = "home") {
                composable("home") { HomeScreen(navController) }
                composable("details/{listId}") { backStackEntry ->
                    backStackEntry.arguments?.getString("listId")
                        ?.let { DetailsScreen(it, navController) }
                }
            }
        }
    )
}

Can anyone please help to fix this? Thanks!

Sheathbill

Answer 1

Changing navController state doesn't make it container recompose, that's why this navigationIcon stays null.

To make it recompose you need to use addOnDestinationChangedListener:

var canPop by remember { mutableStateOf(false) }

DisposableEffect(navController) {
    val listener = NavController.OnDestinationChangedListener { controller, _, _ ->
        canPop = controller.previousBackStackEntry != null
    }
    navController.addOnDestinationChangedListener(listener)
    onDispose {
        navController.removeOnDestinationChangedListener(listener)
    }
}

val navigationIcon: (@Composable () -> Unit)? =
    if (canPop) {
        {
            IconButton(onClick = { navController.popBackStack() }) {
                Icon(imageVector = Icons.Filled.ArrowBack, contentDescription = null)
            }
        }
    } else {
        null
    }
...

Saccharate

Perfect! Thanks a lot!! :) – Sheathbill