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.
Navigation
Tab navigation
Last modified 11mo ago