How can I do if BottomNavigation has a common scre...

# compose

[star_zero]

How can I do if BottomNavigation has a common screen?
• tab1: ScreenA -> ScreenB -> ScreenCommon
• tab2: ScreenC -> ScreenD -> ScreenCommon

[star_zero]

I tried the following code, but when I display ScreenCommon, the BottomNavigationItem is deselected.

NavHost(navController = navController, startDestination = "tab1") {
    navigation(startDestination = "screen_a", route = "tab1") {
        composable("screen_a") { /* */ }
        composable("screen_b") { /* */ }
    }
    navigation(startDestination = "screen_c", route = "tab2") {
        composable("screen_c") { /* */ }
        composable("screen_d") { /* */ }
    }
    composable("screen_common") { /* */ }
}

BottomNavigationItem is implemented as follows. Same as the document.

BottomNavigationItem(
    selected = currentDestination?.hierarchy?.any { it.route == tab.route } == true,
    // ...
)

[Ian Lake]

The documentation uses the current destination and its location in the navigation graph to determine what tab is selected. It sounds like the code is doing exactly what you told it to do.

[Ian Lake]

If you want to track the last selected bottom nav item and use that as the source of truth for what tab is selected (and not use the current destination for that source of truth), there's nothing stopping you from writing that code

[star_zero]

Ah, I see. I’ll try it. Thank you.

[star_zero]

Fixed

BottomNavigation {
    var selectedIndex by rememberSaveable { mutableStateOf(0) }

    tabs.forEachIndexed { index, tab ->
        BottomNavigationItem(
            selected = selectedIndex == index,
            onClick = {
                if (selectedIndex == index) {
                    (navController.findDestination(tab.route) as? NavGraph)?.let {
                        navController.popBackStack(it.startDestinationId, false)
                    }
                } else {
                    navController.navigate(tab.route) {
                        popUpTo(navController.graph.id) {
                            saveState = true
                        }
                        launchSingleTop = true
                        restoreState = true
                    }
                    selectedIndex = index
                }
            },
            icon = {
                Icon(imageVector = tab.icon, contentDescription = null)
            },
            label = {
                Text(text = tab.label)
            },
        )
    }
}