Hello Everyone, I am implementing a bottom navigat...

# compose

[Ankit Shah]

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.

[OG]

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]

Here is the link to the documentation for your reference

[Ankit Shah]

@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?

[OG]

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.