https://kotlinlang.org logo
#compose
Title
# compose
a

Ankit Shah

01/04/2022, 4:36 PM
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.
o

OG

01/04/2022, 5:41 PM
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.
Here is the link to the documentation for your reference
a

Ankit Shah

01/05/2022, 10:10 AM
@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?
o

OG

01/05/2022, 4:35 PM
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:
Copy code
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.
3 Views