I have scaffold with bottom navigation and screens inside it. Also implemented ModalBottomSheetLayout in that scaffold like this.
val scope = rememberCoroutineScope()
val modalBottomSheetState = rememberModalBottomSheetState(
initialValue = ModalBottomSheetValue.Hidden,
confirmValueChange = {
it != ModalBottomSheetValue.HalfExpanded
},
skipHalfExpanded = true
)
suspend fun ModalBottomSheetState.forceExpand() {
try {
show()
} catch (e: CancellationException) {
currentCoroutineContext().ensureActive()
forceExpand()
}
}
var currentBottomSheet: SheetContent? by remember { mutableStateOf(null) }
val showBottomSheet: (SheetContent) -> Unit = {
currentBottomSheet = it
scope.launch {
modalBottomSheetState.forceExpand()
}
}
val hideBottomSheet: () -> Unit = {
scope.launch {
modalBottomSheetState.hide()
}
currentBottomSheet = null
}
val destinationUIState by appState.destinationUIState.collectAsState()
ActionBottomSheet(
sheetState = modalBottomSheetState,
sheetContent = {
Column(
modifier = Modifier.defaultMinSize(minHeight = 1.dp)
) {
currentBottomSheet?.invoke(this)
}
}
) {
Surface(color = DoshamTheme.colors.BackgroundSecondary) {
Scaffold(...
AppNavHost(
navController = appState.navController,
onBackClick = appState::onBackClick,
onNavigateToDestination = appState::navigate,
startDestination = startDestination,
showBottomSheet = showBottomSheet,
hideBottomSheet = hideBottomSheet,
)
...
)
}
}
This is for changing content of ModalBottomSheetLayout from inside other screens. Also, I pass there vals for showBottomSheet and hideBottomSheet to inner screens to make that actions. ActionBottomSheet looks like this
@Composable
fun ActionBottomSheet(
modifier: Modifier = Modifier,
sheetState: ModalBottomSheetState,
sheetContent: SheetContent,
content: @Composable() () -> Unit,
) {
ModalBottomSheetLayout(
modifier = modifier.navigationBarsPadding(),
sheetState = sheetState,
sheetContent = {
Column(modifier = Modifier.fillMaxWidth()) {
sheetContent()
}
},
sheetShape = DoshamTheme.shapes.bottomSheet,
sheetBackgroundColor = DoshamTheme.colors.BackgroundSecondary,
) {
content()
}
}
And inside one of the screen I have bottom sheet with button for selecting app language.
onClick = {
showBottomSheet {
LanguageListScreen(
selectedValue = uiState.settingsViewItem.languageSelectedItem.item,
values = uiState.languageItemsList,
onClick = {
hideBottomSheet()
actions.onLanguageSelected(it)
context.selectLocale(localeTag = Locale(it.tag).toLanguageTag())
},
)
}
})
But after this bottom navigation I believe is not closing properly. The screen blink, language set and screen stays dimmed, and I think at the bottom of the screen the header of the bottom sheet is visible. This is not the first time I face the issue. I think it appear when I have the bottom sheet with buttons that deals with other screens, ets. For example, some other screen is opened and when user closes it the dimmed screen with the tiny header of bottom sheet is still visible.
