I have a common scaffold where I only show top app bar and bottom app bar if the current screen is a...

# compose

[Azam Khan]

I have a common scaffold where I only show top app bar and bottom app bar if the current screen is a bottom nav screen. I'm trying to add sliding transition to a Search screen which has its own Scaffold. The problem is, when I navigate to my Search screen from one of my bottom nav screens, the top bar and bottom bar are immediately hidden before the slide in animation of the Search screen completes, giving a bad UX.
I think it can be fixed by moving the common scaffold inside each composable of the bottom nav screens but I'm not sure if my bottom nav animations will work after that. Is there any other way to fix this? Code in thread 🧵

[Azam Khan]

// Common scaffold for Bottom Nav Screens
Scaffold(
    topBar = { if(currentScreen is BottomNavScreen) TopAppBar(...) },
    bottomBar = { if(currentScreen is BottomNavScreen) BottomNavigation(...) }
) {
    AnimatedNavHost() {
        // Bottom Nav Screens
        navigation(route = Main.route, startDestination = BottomNavScreen.Home.route) {
            composable(BottomNavScreen.Home.route) { HomeScreen() }
            composable(...) { ... }
            composable(...) { ... }
        }

        composable(Search.route, enterTransition = { slideInVertically() }, exitTransition = { slideOutVertically() }) {
            // Search Screen
            Scaffold(...) { ... }
        }
    }
}

[Ian Lake]

Maybe instead of using an if statement (which is just a jump cut between states), you should be using AnimatedVisibility or one of the other constructs to animate in/out your bar

[Azam Khan]

But I don't really want the bars to go away until the transition completes

[Doris Liu]

Seems like it'd be helpful if the nav transition state can be observed, so that you could trigger actions/other animations once the nav transition is finished. 🙂

[Ian Lake]

File an issue against Accompanist - this is exact the kind of things we'd like to address with Navigation Animation

[Se7eN]

I have a similar problem, created an issue here: https://github.com/google/accompanist/issues/633

[Jason Ankers]

Even if we could observe animation changes and hide top/bottom bars when the transition completes, wouldn’t that just delay the problem? Hiding/showing content bars will cause the main content to jump in both scenarios. To get the best UX the top/bottom bars need to animate out with the screen