Add bottomNavigation for navHost in jetpack compose

Question

I have a sample code that has a bottom navigation , when I click on a view I want to open the ModalBottomSheet on the navHost but it's not working for me. how can I do this scenario? Note: I used this library for 'ModalBottomSheet'.

where the NavHost is initialized and I used the ModalBottomSheet

@Composable
fun NiaApp(windowSizeClass: WindowSizeClass) {
    NiaTheme {
        val bottomSheetNavigator = rememberBottomSheetNavigator()
        val navController = rememberNavController(bottomSheetNavigator)
        val niaTopLevelNavigation = remember(navController) {
            NiaTopLevelNavigation(navController)
        }

        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentDestination = navBackStackEntry?.destination

        NiaBackground {
            ModalBottomSheetLayout(bottomSheetNavigator) {
                Scaffold(
                    modifier = Modifier,
                    containerColor = Color.Transparent,
                    contentColor = MaterialTheme.colorScheme.onBackground,
                    bottomBar = {
                        if (windowSizeClass.widthSizeClass == WindowWidthSizeClass.Compact) {
                            NiaBottomBar(
                                onNavigateToTopLevelDestination = niaTopLevelNavigation::navigateTo,
                                currentDestination = currentDestination
                            )
                        }
                    }
                ) { padding ->
                    Row(
                        Modifier
                            .fillMaxSize()
                            .windowInsetsPadding(
                                WindowInsets.safeDrawing.only(
                                    WindowInsetsSides.Horizontal
                                )
                            )
                    ) {
                        if (windowSizeClass.widthSizeClass != WindowWidthSizeClass.Compact) {
                            NiaNavRail(
                                onNavigateToTopLevelDestination = niaTopLevelNavigation::navigateTo,
                                currentDestination = currentDestination,
                                modifier = Modifier.safeDrawingPadding()
                            )
                        }

                        NiaNavHost(
                            windowSizeClass = windowSizeClass,
                            navController = navController,
                            modifier = Modifier
                                .padding(padding)
                                .consumedWindowInsets(padding)
                        )
                    }
                }
            }
        }
    }
}

This is the my NavHost function that used into the above codes.

@Composable
fun NiaNavHost(
    windowSizeClass: WindowSizeClass,
    modifier: Modifier = Modifier,
    navController: NavHostController = rememberNavController(),
    startDestination: String = ForYouDestination.route,
) {
    NavHost(
        navController = navController,
        startDestination = startDestination,
        modifier = modifier,
    ) {
        forYouGraph(
            windowSizeClass = windowSizeClass
        )
        interestsGraph(
            navigateToTopic = {
// When I click on a view it will run here and I expect the ModalBottomSheet to be open with a text. this callback is called but the bottomSheet is not opened
                bottomSheet("${TopicDestination.route}/$it") {
                    Text(text = "dfffsfsdfsfsf")
                }
            },
            navigateToAuthor = {                navController.navigate("${AuthorDestination.route}/$it") },
            nestedGraphs = {
                topicGraph(onBackClick = { navController.popBackStack() })
                authorGraph(onBackClick = { navController.popBackStack() })
            }
        )
    }
}

And here are the interestedGraph function that used into above codes

fun NavGraphBuilder.interestsGraph(
    navigateToTopic: (String) -> Unit,
    navigateToAuthor: (String) -> Unit,
    nestedGraphs: NavGraphBuilder.() -> Unit

) {
    navigation(
        route = InterestsDestination.route,
        startDestination = InterestsDestination.destination
    ) {
        composable(route = InterestsDestination.destination) {
            InterestsRoute(
                navigateToTopic = navigateToTopic,
                navigateToAuthor = navigateToAuthor,
            )
        }
        nestedGraphs()
    }
}

Answer 1

I have a class that has this function for the screen destination:

object TopicDestination : NiaNavigationDestination {
    override val route = "topic_route"
    override val destination = "topic_destination"
    const val topicIdArg = "topicId"
}

fun NavGraphBuilder.topicGraph(
    onBackClick: () -> Unit
) {
    composable(
        route = "${TopicDestination.route}/{${TopicDestination.topicIdArg}}",
        arguments = listOf(
            navArgument(TopicDestination.topicIdArg) {
                type = NavType.StringType
            }
        )
    ) {
        TopicRoute(onBackClick = onBackClick)
    }
}

I have to use bottomSheet() instead of composable in this class.

Like this:

@OptIn(ExperimentalMaterialNavigationApi::class)
fun NavGraphBuilder.topicGraph(
    onBackClick: () -> Unit
) {
    bottomSheet(
        route = "${TopicDestination.route}/{${TopicDestination.topicIdArg}}",
        arguments = listOf(
            navArgument(TopicDestination.topicIdArg) {
                type = NavType.StringType
            }
        )
    ) {
        TopicRoute(onBackClick = onBackClick)
    }
}