navigation-compose's Introduction

Extensions for Navigation Compose

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

Recommend Projects