for my App, I want to use a ModalBottomSheetLayout which is able to have a nested Navigation inside the BottomSheet.
For e.g. the User clicks a Button on the Homescreen and the BottomSheet opens. Inside the BottomSheet is a list of Elements. If one Element is clicked, then the Details Screen should open inside the same BottomSheet. I have tried to find a solution using appcompanist navigation and the BottomSheetNavigator, but unfortunally it doesnt work as expected.
If I run the following Code and click on one ELement, than the BottomSheet with the Element gets closed and a new one for the Detail-Screen will be opened. But I do not want to have this effect of a new BottomSheet, I would like to have a nested navigation inside one BottomSheet.
val modalBottomSheetState = rememberModalBottomSheetState(
initialValue = ModalBottomSheetValue.Hidden,
skipHalfExpanded = true
)
val bottomSheetNavigator = remember(modalBottomSheetState) {
BottomSheetNavigator(sheetState = modalBottomSheetState)
}
val navHostController = rememberNavController()
ModalBottomSheetLayout(
bottomSheetNavigator = bottomSheetNavigator,
content = {
Scaffold(
bottomBar = {
...
},
content = { innerPadding ->
NavHost(
navController = navHostController,
startDestination = vmMain.getStartDestination(),
modifier = Modifier.padding(innerPadding)
) {
navigation(
startDestination = OnboardingDirections.appPreview().destination,
route = OnboardingDirections.root().destination
) {
composable(OnboardingDirections.appPreview().destination) {
IntroScreen()
}
...
}
bottomSheet(route = FeatureA.root().destination) {
ScreenA()
}
bottomSheet(route = FeatureA.x().destination) {
ScreenB()
}
}
}
)
}
What I would need, is something like this:
bottomSheet(route = FeatureA.root().destination) {
navigation(route = "x") {
ScreenA()
}
navigation(route = "y") {
ScreenB()
}
}