https://github.com/hrach/navigation-compose-ext
Extensions for Jetpack Navigation Compose: Material 3 BottomSheet, custom ModalSheet, Results and more.
https://github.com/hrach/navigation-compose-ext
bottomsheet compose modals navigation navigation-compose
Last synced: 7 months ago
JSON representation
Extensions for Jetpack Navigation Compose: Material 3 BottomSheet, custom ModalSheet, Results and more.
- Host: GitHub
- URL: https://github.com/hrach/navigation-compose-ext
- Owner: hrach
- License: mit
- Created: 2024-05-13T21:57:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-23T22:02:14.000Z (12 months ago)
- Last Synced: 2024-10-24T10:38:52.483Z (12 months ago)
- Topics: bottomsheet, compose, modals, navigation, navigation-compose
- Language: Kotlin
- Homepage:
- Size: 184 KB
- Stars: 22
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- Funding: .github/funding.yml
- License: license.md
Awesome Lists containing this project
README
Extensions for Navigation Compose
=================================
[](https://github.com/hrach/navigation-compose-ext/actions/workflows/build.yml)
[](https://github.com/hrach/navigation-compose-ext/releases)
See `demo` module.
Use Maven Central and these dependencies:
```kotlin
dependencies {
implementation("dev.hrach.navigation:bottomsheet:")
implementation("dev.hrach.navigation:modalsheet:")
implementation("dev.hrach.navigation:results:")
}
```
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:
```kotlin
val modalSheetNavigator = remember { ModalSheetNavigator() }
val bottomSheetNavigator = remember { BottomSheetNavigator() }
val navController = rememberNavController(modalSheetNavigator, bottomSheetNavigator)
NavHost(
navController = navController,
startDestination = Destinations.Home,
) {
composable { Home(navController) }
modalSheet { Modal(navController) }
bottomSheet { BottomSheet(navController) }
}
ModalSheetHost(modalSheetNavigator, containerColor = MaterialTheme.colorScheme.background)
BottomSheetHost(bottomSheetNavigator)
```
Results sharing:
```kotlin
object Destinations {
@Serializable
data object BottomSheet {
@Serializable
data class Result(
val id: Int,
)
}
}
@Composable
fun Home(navController: NavController) {
NavigationResultEffect(
backStackEntry = remember(navController) { navController.getBackStackEntry() },
navController = navController,
) { result ->
// process result -
}
}
@Composable
fun BottomSheet(navController: NavController) {
OutlineButton(onClick = { navController.setResult(Destinations.BottomSheet.Result(42)) }) {
Text("Close")
}
}
```