androidandroid-jetpack-composeandroid-jetpackandroid-jetpack-compose-layout

Cannot find a way to use both at same time, bottom sheet and bottom navigation bar in android compose


In android compose, there is Scaffold composable function to create a layout that contains bottom navigation bar and there is another function named BottomSheetScaffold to create a layout that contains bottom navigation bar.
My question is how to achieve both the bottom sheet and Bottom Navigation bar in same layout?

I treid using BottomSheetScaffold and adding the bottom navigation bar in the layout but I failed when I used NavHost besides it in the same column.

Simplified code for the case:

    BottomSheetScaffold(
        { BottomSheetComposable },

        topBar = {
            TopAppBar()
        },
        sheetPeekHeight = 0.dp
    ) {
        Column() {
            NavHost(
                navController,
                startDestination = "route"
            ) {
                Composable("route") {}
            }
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(60.dp)
            ) {
                BottomNavigationBar()
            }

        }
    }


Solution

  • A temporary solution would to use scaffold inside BottomSheetScaffold content

        BottomSheetScaffold(
            sheetShape = BottomSheetShape,
            sheetContent = {
                currentBottomSheetScreen?.let {
                    MainBottomSheetLayout(
                        it, navController, textToSpeech,
                        closeSheet
                    )
                }
    
    
            }) {
            Scaffold(
                topBar = { LinguisticTopAppBar(navController, mainViewModel, openSheet) },
                bottomBar = {
                    BottomNavigationBar(mainViewModel, navController)
                },
    
                ) {
    
                Column(modifier = Modifier.padding(it)) {
                    MainContent(
                        navController,
                        mainViewModel,
                        openSheet
                    )
                }
            }
    
        }