See demo module.
Use Maven Central and these dependencies:
dependencies { implementation("dev.hrach.navigation:bottomsheet:<version>") implementation("dev.hrach.navigation:modalsheet:<version>") implementation("dev.hrach.navigation:results:<version>") }Components:
- BottomSheet - Connects the official Material 3 BottomSheet with Jetpack Navigation.
- ModalSheet - A custom destination type for Jetpack Navigation that brings fullscreen content with modal animation.
- Results - Passing a result simply between destinations.
Quick setup:
val modalSheetNavigator = remember { ModalSheetNavigator() } val bottomSheetNavigator = remember { BottomSheetNavigator() } val navController = rememberNavController(modalSheetNavigator, bottomSheetNavigator) NavHost( navController = navController, startDestination = Destinations.Home, ) { composable<Destinations.Home> { Home(navController) } modalSheet<Destinations.Modal> { Modal(navController) } bottomSheet<Destinations.BottomSheet> { BottomSheet(navController) } } ModalSheetHost(modalSheetNavigator, containerColor = MaterialTheme.colorScheme.background) BottomSheetHost(bottomSheetNavigator)Results sharing:
object Destinations { @Serializable data object BottomSheet { @Serializable data class Result( val id: Int, ) } } @Composable fun Home(navController: NavController) { NavigationResultEffect<Destinations.BottomSheet.Result>( backStackEntry = remember(navController) { navController.getBackStackEntry<Destinations.Home>() }, navController = navController, ) { result -> // process result - } } @Composable fun BottomSheet(navController: NavController) { OutlineButton(onClick = { navController.setResult(Destinations.BottomSheet.Result(42)) }) { Text("Close") } }