Just Position your ModalBottomSheetLayout on top of the Scaffold component.
Example:
AppTheme() {
ModalBottomSheetLayout(){ //<-- Here
Scaffold(){
//<-- Not Here or below
NavigationGraph(){
}
}
}
}
and call bottomSheet from NavHost.
Also you can hide Bottombar with action from screen but its long way;
*it may vary depending on your component child structure
Screen:
@Composable
fun 3rdScreen(onClickForHideBottomBar:() -> Unit){
Button(onClick = { onClickForHideBottomBar()}) {
Text(text = "Hide BottomBar")
}
}
NavGraph:
@Composable
fun NavigationGraph(onClickForHideBottomBar:() -> Unit,){
NavHost(){
composable(){
3rdScreen(onClickForHideBottomBar ={onClickForHideBottomBar()})
}
}
}
Scaffold:
var bottomBarVisibility by remember { mutableStateOf(false)}
Scaffold(
bottomBar = {BottomNavigationView(bottomBarVisibility=bottomBarVisibility)}){
NavigationGraph(onClickForHideBottomBar = bottomBarVisibility = !bottomBarVisibility){}
}
BottomNavigationView:
@Composable
fun BottomNavigationView(bottomBarVisibility: Boolean){
AnimatedVisibility(visibleState =MutableTransitionState(bottomBarVisibility)){
BottomNavigation()
}
}