'Jetpack Compose Bottom Navigation Bar visibility changes with delay
I have a bottom navigation bar with 3 screen. I am hiding bottom navigation bar in detail screen with AnimatedVisibility but visibility changes with delay.
Surface(color = MaterialTheme.colors.background) {
// Get UI state
val uiState by rememberFlowWithLifecycle(flow = viewModel.uiState).collectAsState(initial = MainUiState(true))
// Set Status bar to transparent
SetStatusBarColor()
// Create Navigation
val navController = rememberNavController()
val navigationActions = remember(navController) {
NavActions(navController)
}
// Create Scaffold Composable
Scaffold(
topBar = { },
bottomBar = {
AnimatedVisibility(
visible = uiState.isBottomBarVisible,
) {
BottomNavigationBar(
navController,
navigationActions,
Modifier.navigationBarsPadding()
)
}
}
) { innerPaddings ->
NavigationGraph(
navController,
navigationActions,
Modifier
.padding(innerPaddings)
.statusBarsPadding()
)
}
// Change bottom bar state
val currentRoute = getCurrentRoute(navController = navController)
viewModel.changeBottomBarVisibility(currentRoute != Screen.Detail.path)
}
}
With default enter and exit animation, visibility changes without delay

But when I change enter and exit animations for example scale, bottom bar has laggy behaviour while becoming invisible
AnimatedVisibility(
visible = uiState.isBottomBarVisible,
enter = scaleIn(),
exit = scaleOut()
) {
BottomNavigationBar(
navController,
navigationActions,
Modifier.navigationBarsPadding()
)
}

Tested in Huawei P40 Lite and Google Pixel Emulator, behaviours are the same.
Compose version is 1.0.5 Compose navigation version is 2.4.0 Compose animation version is 1.1.0
In short, animated visibility hasn't got smooth behaviour without default animation
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
