1

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()
   }
}

0 Answers0