How to display the ModalBottomSheetLayout in such a way it will hide the BottomBar. <https://stac...

# compose

[Satyam G]

How to display the ModalBottomSheetLayout in such a way it will hide the BottomBar.

https://stackoverflow.com/questions/72038434/modalbottomsheet-is-showing-above-bottombar-in-jetpack-compose?noredirect=1#comment127289219_72038434

[Filip Wiesner]

From the way you wrote your SO question and from the comment by Ian I think you already know "How to display the ModalBottomSheetLayout in such a way it will hide the BottomBar"
Comment from Ian:

"I don't want to add ModalBottomSheet to Activity instead I have added ModalBottomSheet inside 3rd Screen Composable." - it sounds like you know exactly what your problem is. Your 3rd screen composable doesn't go over the bottom bar, so nothing within that is going to ever go over the bottom bar.

You have to structure your screen like this:

BottomSheetLayout {
  Screen()
  BottomNavBar()   
}

I agree that it's not ideal but that's how bottom sheets work in Compose.
You could also try out Bottom Sheet Destinations from Accompanist if your bottom nav bar is inside your navigation routes.

[Satyam G]

Cool, Thanks 😊

[Colton Idle]

I think I submitted a bug report for this or something and could have sworn that it's being considered for the bottom sheet rewrite.

i.e. You can declare a modal dialog in a screen and that modal dialog will cover the bottom bar. but a modal bottom sheet does not. That just seems like a bug because the word modal now has two different meanings.

but yes. as of right now, there is not much you can do.

[tad]

I wrote a BottomSheetHost composable, similar to how Snackbar works, which decouples where the bottom sheet is "shown" from where it lives in the composition.

[Satyam G]

Can you share the github link or anything I can refer ??

[Colton Idle]

@tad ooooh. Please share if possible. hahaha. that sounds amazing.

[tad]

https://gist.github.com/tadfisher/f10639b8dbf2cb96ea5cd448b5c48660

[tad]

basically throw BottomSheetHost { myAppContent() } at the top level, then wherever you want a BottomSheet, call BottomSheet() in the composition

[tad]

Ah, there's some extra stuff in there you won't need from another implementation I did. Scrim, isn't needed, for instance, as ModalBottomSheetLayout handles that already.

[Colton Idle]

way cool. cheers