'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 default

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

scale

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