Jetpack compose: How to navigate from many bottom tabs to one screen?

Question

I'm want to navigate from all of my bottom navigtion tabs to some "detail screens"

I have a screen that has 5 tabs. I want to be able to navigate from any tab to a specific set of "detail screens". I tried adding these screens to each of the graphs I use, and in the end it turns out that when I go to one of “detail screens”, my tab switches to the last one in which the detail screens graph was added. I tried many solutions from the Internet, but they either did not work as expected or broke the navigation completely.

What i want: Wanted navigation

What i have: Actual navigation

Bottom bar:

BottomBar(...){
    HomeRoutes.homeRoutes.forEach { destination ->
                            
    val isSelected = currentDestination?.hierarchy?.any { it.route == destination.route } == true

// UI implementation
    BottomTab(
    ....
    onClick = {
        navController.navigate(destination.route) {
            popUpTo(navController.graph.findStartDestination().id) {
                saveState = true
            }
            launchSingleTop = true
            restoreState = true
        }
     )
   }
}

Home graph:

fun NavGraphBuilder.homeGraph(navController: NavController) {
    newsGraph(navController)
    academicGraph(navController)
    scheduleGraph(navController)
    searchGraph(navController)
    profileGraph(navController)
}

One of my home graphs:

fun NavGraphBuilder.scheduleGraph(navController: NavController) {
    navigation(
        startDestination = HomeRoutes.Schedule.Main.route,
        route = HomeRoutes.Schedule.route
    ) {
        composable(HomeRoutes.Schedule.Main.route) {
            ScheduleScreen(navController)
        }

        commonDestinations(navController)
    }
}

"detail screens"

fun NavGraphBuilder.commonDestinations(navController: NavController) {
    composable(SearchRoutes.Schedule.route, arguments = SearchRoutes.Schedule.arguments) {
        ScheduleScreen(navController)
    }

    userProfileGraph(navController)
    groupGraph(navController)
    classroomGraph(navController)
}

Answer 1

I'm running into the same problem. As far as I can tell, there is a problem with the public API of navigation that makes this standard design difficult to do. I was able to work around the issue, by passing in the parent route to commonDestinations() and prepending it to every child route recursively. This effectively creates unique destinations per tab, which still reuse the same composable content. This seems like it was not intended usage though, as that is a lot of boiler plate and is fragile to maintain for deeply nested destinations.

IMO this is an unforseen consequence of allowing navigation only via routes in Compose. When using xml and IDs, destinations were searched for WITHIN the context of the current nested NavGraph, then recursively searching the parent graphs. With routes and deep links, the graph is searched top down, based on arbitrary order of when graphs were added :(