3

I want to display bottom bar with my menu icons and bottom sheet which to start from the end of the bottom bar.

I am also using accompanist navigation library

@Composable
fun AppRouter() {
    val navController = rememberNavController()
    val bottomSheetNavigator = rememberFullScreenBottomSheetNavigator()
    navController.navigatorProvider += bottomSheetNavigator

    TriumfTaxiTheme {
        ModalBottomSheetLayout(
            bottomSheetNavigator = bottomSheetNavigator
        ) {
            Scaffold(
                content = {
                    Box(modifier = Modifier.padding(it)) {
                        NavHost(
                            navController = navController,
                            startDestination = BottomNavScreenDestinations.BottomNavMap.route
                        ) {
                            composable(route = BottomNavScreenDestinations.BottomNavMap.route) {
                                Home()
                            }
                            
                        }
                    }
                },
                bottomBar = {
                    BuildBottomBar(navController)
                }
            )
        }
    }
}

If i add bottomsheet(route="something") it displays bottom sheet but above my bottom bar icons

This is my bottom sheet navigator


@ExperimentalMaterialNavigationApi
@ExperimentalMaterialApi
@Composable
fun rememberFullScreenBottomSheetNavigator(
    animationSpec: AnimationSpec<Float> = SwipeableDefaults.AnimationSpec,
    skipHalfExpanded: Boolean = true,
): BottomSheetNavigator {
    val sheetState = rememberModalBottomSheetState(
        ModalBottomSheetValue.Hidden,
        animationSpec
    )
    if (skipHalfExpanded) {
        LaunchedEffect(sheetState) {
            snapshotFlow { sheetState.isAnimationRunning }
                .collect {
                    with(sheetState) {
                        val isOpening =
                            currentValue == ModalBottomSheetValue.Hidden && targetValue == ModalBottomSheetValue.HalfExpanded
                        val isClosing =
                            currentValue == ModalBottomSheetValue.Expanded && targetValue == ModalBottomSheetValue.HalfExpanded
                        when {
                            isOpening -> animateTo(ModalBottomSheetValue.Expanded)
                            isClosing -> animateTo(ModalBottomSheetValue.Hidden)
                        }
                    }
                }
        }
    }
    return remember(sheetState) {
        BottomSheetNavigator(sheetState = sheetState)
    }
}

I want to know how can I put bottom sheet above my bottom bar and also to customize its peekheight()

Svilen Rusev
  • 309
  • 4
  • 15
  • Could you check if this question helps you? https://stackoverflow.com/questions/71798302/showing-a-bottomsheetscaffold-with-a-bottomnavigation-compose-ui-android/71802460#71802460 – nglauber Apr 20 '22 at 00:33

0 Answers0