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))
}
}
}
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!