I want my modal bottom sheet that's located inside...

# compose

[Colton Idle]

I want my modal bottom sheet that's located inside of my TabA to show as a proper modal (i.e. on top of the rest of the app). Right now it shows on top of the bottom sheet.

[Colton Idle]

Code if anyone is curious

setContent {
                Scaffold(bottomBar = {
                    Box(Modifier.height(56.dp).background(Color.Blue).fillMaxWidth()) {
                        Text(text = "BottomBar")
                    }
                }) {
                    val bottomSheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
                    val scope = rememberCoroutineScope()
                    ModalBottomSheetLayout(sheetState = bottomSheetState, sheetContent = {
                        Column(Modifier.fillMaxSize().background(Color.Green)
                        ) {
                            Text(text = "BottomSheet")
                        }
                    }) {
                        Column(Modifier.fillMaxSize().background(Color.Red)
                        ) {
                            Text(text = "ScreenA")
                            Button(onClick = {
                                scope.launch {
                                    bottomSheetState.show()
                                }
                            }) {
                                Text(text = "Open Bottom Sheet")
                            }
                        }
                    }
                }
        }

[Colton Idle]

Things I've tried:
1. zindex modifier
2. placing a modal bottom sheet inside of a modal dialog

[Colton Idle]

Most likely the advice that someone here might recommend might be to pass in lambda to TabA that when button is clicked, I also trigger the lamda, and the lambda can hide the bottom sheet, There has to be an easier way to get a true modal. no?

Reasons why I don't want to go the event route:
1. A modal dialog does not require me to hide the bottom bar just because I'm in tabA showing a modal
2. This will require me having to pass in an event into every tab and screen that I have which then requires the caller to remember to hide the bottom bar
3. I already have an app built with like 100 screens and like 20 alert dialog modals. I need to convert each dialog modal to a bottom sheet modal, but the concept of modality seems to be different between the two. Hence asking the question of maybe I'm just missing something simple here to make it a true modal
4. A modalBottomSheet destination using accompanist gets around this issue as well, but for my case the modal makes more sense to live with the Tab contents itself
5. Even if I use the lambda approach here, I have to still figure out a way to show the bottomBar after the bottomSheet is dismised.
6. I already have logic to hide/show the bottom bar based on compose-nav destinations

[Colton Idle]

Maybe another way of phrasing it

Can content in a ScaffoldLayout be drawn ontop of bottomBar in any way?

private fun ScaffoldLayout(
    isFabDocked: Boolean,
    fabPosition: FabPosition,
    topBar: @Composable () -> Unit,
    content: @Composable (PaddingValues) -> Unit,
    snackbar: @Composable () -> Unit,
    fab: @Composable () -> Unit,
    bottomBar: @Composable () -> Unit
) {

[tad]

Have to show the bottom sheet in a parent of the scaffold, I'm afraid. I ended up writing a BottomSheetHost composable to make hoisting easier, similar to SnackbarHost

[Nathan Castlehow]

There is also an accompanist extension that lets you navigate to a bottomsheet but it depends on your usecase. https://google.github.io/accompanist/navigation-material/

[Colton Idle]

Yeah. I've decided not to go that route based on some examples Ian Lake gave me. I.e. if you have a time picker, it very much makes sense to keep that inside of the same screen and VM.