Move snackbar above the bottom nav bar jetpack compose - kotlin

Question

I am creating custom Snackbar using Jetpack Compose. But I have also implemented BottomNavBar using Scaffold. Everything works fine but only one problem is snackbar goes under the BottomNavBar. So how to move above to the snackbar over BottomNavBar?
Snackbar code:
#Composable
fun DefaultSnackbar(
snackbarHostState: SnackbarHostState,
onDismiss: () -> Unit?,
modifier: Modifier = Modifier
) {
SnackbarHost(
hostState = snackbarHostState,
modifier = modifier,
snackbar = {data ->
Snackbar(
modifier = Modifier.padding(8.dp),
content = {
Text(
text = data.message,
style = MaterialTheme.typography.body2,
color = White
)
},
action = {
data.actionLabel?.let { actionLabel ->
TextButton(
onClick = {
onDismiss()
}
) {
Text(
text = actionLabel,
style = MaterialTheme.typography.body2,
color = White
)
}
}
}
)
}
)
}
Bottom Navigation Code :-
#Composable
fun BottomNav()
{
BottomNavigation(
elevation = 15.dp,
modifier = Modifier.zIndex(5f)
) {
BottomNavigationItem(
icon = {Icon(imageVector = Icons.Filled.Search, contentDescription = "search icon", tint = Color.White)},
selected = false,
onClick = { /*TODO*/ }
)
BottomNavigationItem(
icon = {Icon(imageVector = Icons.Filled.Home, contentDescription = "search icon", tint = Color.White)},
selected = true,
onClick = { /*TODO*/ }
)
BottomNavigationItem(
icon = {Icon(imageVector = Icons.Filled.MoreVert, contentDescription = "search icon", tint = Color.White)},
selected = false,
onClick = { /*TODO*/ }
)
}
}
Calling snackbar :
#ExperimentalCoroutinesApi
#AndroidEntryPoint
class RecipeListFragment : Fragment() {
private val viewModel: RecipeListViewModel by viewModels()
private val snackbarController = SnackbarController(lifecycleScope)
#ExperimentalComposeUiApi
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return ComposeView(requireContext()).apply {
setContent {
AppTheme(darkTheme = viewModel.isDarkTheme.value) {
val recipes = viewModel.recipes.value
val query = viewModel.query.value
val selectedCategory = viewModel.selectedCategory.value
val scaffoldState = rememberScaffoldState()
Scaffold(
topBar = {
SearchBar(
query = query,
onQueryChange = viewModel::onQueryChange,
selectedCategory = selectedCategory,
onSelectedCategoryChanged = viewModel::onSelectedCategoryChanged,
onToggleTheme = viewModel::onToggleTheme,
searchRecipe = {
if (viewModel.selectedCategory.value?.value == "Milk") {
snackbarController.getScope().launch {
snackbarController.showSnackbar(
scaffoldSate= scaffoldState,
message = "Milk is in Snack",
actionLabel = "Hide",
)
}
} else {
viewModel.searchRecipe()
}
}
)
},
bottomBar = { BottomNav() },
scaffoldState = scaffoldState,
snackbarHost = {scaffoldState.snackbarHostState},
) {
Box(modifier = Modifier
.background(MaterialTheme.colors.background)
.fillMaxSize())
{
...
others items
...
CircularIndeterminateProgressBar(display = viewModel.isLoading.value)
DefaultSnackbar(
snackbarHostState = scaffoldState.snackbarHostState,
onDismiss = { scaffoldState.snackbarHostState.currentSnackbarData?.dismiss()},
modifier = Modifier.align(Alignment.BottomCenter)
)
}
}
}
}
}
}
}