BottomSheetScaffold doesn't stick to the top of BottomNavigation when expanded

Question

I am trying to use BottomSheetScaffold but for some weird reason when I use it on a screen with bottom navigation and expand the bottomSheet the bottom side of it moves a little bit to the top, but when I remove the bottom navigation everything works as expected!

Does anyone have an idea why that is happening? and how can I fix it?

@Composable
fun ContainerView() {
    val scaffoldState = rememberBottomSheetScaffoldState()

    val appBarHeight = getAppBarHeight(
        scaffoldState.bottomSheetState.offset.value,
        scaffoldState.bottomSheetState.targetValue
    )
    Box(modifier = Modifier.fillMaxSize()) {
        BottomSheetScaffold(
            sheetContent = {
                BottomSheetContent(
                    appBarHeight = appBarHeight
                )
            },
            scaffoldState = scaffoldState,
            sheetPeekHeight = 100.dp,
            sheetBackgroundColor = greysWhite,
            sheetShape = Shapes.extraLarge
                .copy(bottomEnd = CornerSize(0), bottomStart = CornerSize(0))
        ) {

            Text("Hello World")
        }
        Surface(elevation = 14.dp) {
            AppBar(
                modifier = Modifier,
                appBarHeight = appBarHeight
            ) { }
        }
    }
}

@Composable
fun BottomSheetContent(
    appBarHeight: Dp,
) {
    val padding by animateDpAsState(
        targetValue = appBarHeight,
        animationSpec = tween(durationMillis = animationDuration)
    )
    val scrollState = rememberScrollState()
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = padding)
            .verticalScroll(scrollState)
            .padding(horizontal = 16.dp)
    ) {
        repeat((0..22).count()) {
            Text("$it", modifier = Modifier.padding(16.dp))
        }
    }
}

Answer 1

The issue was in the Material library version that I was using.

I was using this version androidx.compose.material:material:1.2.1 but after updating the dependency to this version 1.6.0-alpha05 It worked as expected!

Answer 2

I have used the same code of yours below with a sample Bottom Navigation and there is no padding on bottom of bottom sheet while using it. Please check the below code.

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ContainerView() {
val scaffoldState = rememberBottomSheetScaffoldState()

Box(modifier = Modifier.fillMaxSize()) {
    BottomSheetScaffold(
        sheetContent = {
            BottomSheetContent(
            )
        },
        scaffoldState = scaffoldState,
        sheetPeekHeight = 100.dp,
        sheetBackgroundColor = Color.Gray,
        sheetShape = Shapes().large
            .copy(bottomEnd = CornerSize(0), bottomStart = 
CornerSize(0))
    ) {

        Text("Hello World")
    }

    Column(modifier = Modifier.fillMaxSize()) {
        Spacer(modifier = Modifier.weight(1f))
        BottomNavigationView()
    }
}
}

@Composable
fun BottomSheetContent(
) {

val scrollState = rememberScrollState()
Column(
    modifier = Modifier
        .fillMaxWidth()
        .verticalScroll(scrollState)
        .padding(horizontal = 16.dp)
) {
    repeat((0..22).count()) {
        Text("$it", modifier = Modifier.padding(16.dp))
    }
}
}

@Composable
fun BottomNavigationView() {
val items = listOf(
    "Home",
    "MyNetwork",
    "AddPost",
    "Notification",
    "Job"
)
BottomNavigation(
    backgroundColor = Color.Cyan,
    contentColor = Color.Black
) {
    
    items.forEach { item ->
        BottomNavigationItem(
            icon = {  },
            label = { Text(text = item,
                fontSize = 9.sp) },
            selectedContentColor = Color.Black,
            unselectedContentColor = Color.Black.copy(0.4f),
            alwaysShowLabel = true,
            selected = false,
            onClick = {

            }
        )
    }
}
}