Hello Everyone, I am implementing a bottom navigation bar and inside I have many Composable pages. I am trying to open a ModalBottomSheetLayout in one of the page, and the modal opens above the bottom navigation bar. How can I show the bottom sheet on top of the bottom navigation bar.

You need to wrap the entire screen (with the bottom nav bar) with the

ModelBottomSheetLayout

component. There is a

content

lambda on this component where you will place your root screen composable with the navigation tabs.

@OG I do have different pages inside the bottomnav from where multiple type of bottom sheet needs to be called. How can I open a specific bottom sheet from a different page?

There's many approaches to this .. and I don't think there is a single right answer. The way I have approached this is by creating the following:

val bottomSheetContent = remember {
   mutableStateOf {
        { } // Initially empty
   }
}

And every time a screen wants to show a bottom sheet, Step 1: it updates this state to be a lambda that returns a composable for that specific bottom sheet. Step 2: it updates the bottom sheet state so the sheet content is rendered on screen I find this pattern much cleaner so you can just deal with a single ModalBottomSheetLayout component. If this is unclear to you still, let me know and I'll create a gist and post a link here for you.