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

2.9k views Asked by At

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()
            }

        }
    }

1

There are 1 answers

1
David Ibrahim On BEST ANSWER

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
                )
            }
        }

    }