Jetpack Compose Bottom Navigation Bar visibility changes with delay

Question

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

Answer 1

I think, it's happens because size of screen changes when you hide bottomBar. For fix that, try to delete modifier padding(innerPaddings) in NavigationGraph and control padding manually for each pages. If it's doesn't help, i will try your code later.