Navigate the BottomNavBar on Button click - Jetpack Compose

Question

My BottomNavigationBar has 4 items, I want to navigate to the last item when the user clicks a button.

Here is my BottomNavigationBar:

@Composable
fun BottomNavigationBar(navController: NavController) {
    val items = listOf(
        BottomNavigationItem.Home,
        BottomNavigationItem.Explore,
        BottomNavigationItem.Favorites,
        BottomNavigationItem.Profile
    )

    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route

    BottomNavigation(
        backgroundColor = colorResource(id = R.color.purple_700),
        contentColor = Color.White
    ) {

        Row(horizontalArrangement = Arrangement.Center) {
 
            items.forEachIndexed { i, item ->
                if (i == items.count() / 2) {
                    Spacer(Modifier.weight(1f))
                }
                BottomNavigationItem(
                    icon = {
                        if (currentRoute == item.route) {
                            Icon(painterResource(id = item.iconPressed), contentDescription = item.title)
                        } else {
                            Icon(painterResource(id = item.iconNormal), contentDescription = item.title)
                        }
                    },
                    selectedContentColor = Color.White,
                    unselectedContentColor = Color.White,
                    alwaysShowLabel = false,
                    selected = currentRoute == item.route,
                    onClick = { 
                        navController.navigate(item.route) { 
                            navController.graph.startDestinationRoute?.let { route -> 
                                popUpTo(route) { 
                                    saveState = true
                                }
                            } 
                            launchSingleTop = true
                             restoreState = true
                        }
                    }
                )
            }

        }
    }
}

and here is how I try to navigate to the "Profile" screen when the user clicks a button (in my MainActivity NavGraph):

     composable(BottomNavigationItem.Favorites.route) {
         
        FavoriteScreen(navigateToProfile = {
            navController.navigate(BottomNavigationItem.Profile.route) {
                        popUpTo(navController.graph.findStartDestination().id) {
                            saveState = true
                        }
                        launchSingleTop = true
                        restoreState = true
                    }
        })
    }

Unfortunately this gives me a weird behaviour that my BottomNavigationBar is not working correctly, mostly the first screen is not opening anymore.

Something is getting mixed up and the "HomeScreen" bottomNavItem navigates to the "ProfileScreen" after the remote navigation.

What is the correct way to remotely navigate the bottomNavigationBar?

user_2461717 · Answer

After several hours of attempting to understand what I had wrong, I've come up with a potential solution. I'm not sure if this is a sustainable approach if your BottomNavigationItem has a complicated graph associated with it, but for my usecase marking it as restoreState = false in the onClick fixed the issue.

onClick = { 
  navController.navigate(item.route) { 
    navController.graph.startDestinationRoute?.let { route -> 
      popUpTo(navController.graph.findStartDestination().id) { 
        saveState = true
      }
    } 
    launchSingleTop = true
    restoreState = false
  }
}

Navigate the BottomNavBar on Button click - Jetpack Compose

1 Answers