Links

BottomSheet navigation

To use the BottomSheetNavigator you should first import cafe.adriel.voyager:voyager-bottom-sheet-navigator (see Setup).
Voyager provides a specialized navigator for ModalBottomSheetLayout: the BottomSheetNavigator.
Call it and set the back layer content. The BottomSheet content (or the front layer) will be set on demand.
setContent {
BottomSheetNavigator {
BackContent()
}
}
You can also use the default Navigator to navigate on your back layer content.
setContent {
BottomSheetNavigator {
Navigator(BackScreen())
}
}
The BottomSheetNavigator accepts the same params as ModalBottomSheetLayout.
@Composable
public fun BottomSheetNavigator(
modifier: Modifier = Modifier,
hideOnBackPress: Boolean = true,
scrimColor: Color = ModalBottomSheetDefaults.scrimColor,
sheetShape: Shape = MaterialTheme.shapes.large,
sheetElevation: Dp = ModalBottomSheetDefaults.Elevation,
sheetBackgroundColor: Color = MaterialTheme.colors.surface,
sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
// ...
)
Use the LocalBottomSheetNavigator to show and hide the BottomSheet.
class BackScreen : Screen {
@Composable
override fun Content() {
val bottomSheetNavigator = LocalBottomSheetNavigator.current
Button(
onClick = {
bottomSheetNavigator.show(FrontScreen())
}
) {
Text(text = "Show BottomSheet")
}
}
}

Sample

Source code here.