I have a layout where I have some common content outside of kotlinlang #compose

I have a layout where I have some common content outside of my navHost which works fine except I have some nav routes where we don’t want to display the components outside of the navHost so I’m hiding them. I have this working fine except, the animation for hiding the stuff outside of the navHost happens before the navigation within the navhost completes which results in a really bad looking transition. I was wondering if anyone else had found a good way to solve this. Details and code examples in 🧵

My code is similar to something like this:

val currentScreen = Screens.from(navController.currentBackStackEntryAsState())
Row {
    if(!currentScreen.isFullScreen) {
        SideBar()
    }
    Column {
        if(!currentScreen.isFullScreen) {
            TopBar()
        }
        NavHost(){
            // define composables
        }
    }
}

I’m using navController.currentBackStackAsState() to update the SideBar and TopBar when a navigation occurs, but I’m seeing a recomposition with the new back stack entry before the navhost has rendered the new view so what happens is the old view shifts for a frame because sideBar and TopBar are removed and then the new view fades in which doesn’t look good

So for most views, this works fine because SideBar() and TopBar() don’t change, but when going to a “full screen” view, the transition looks bad. I’ve tried

animateVisibility()

for TopBar and SideBar and it helps, but the shifting still happens and doesn’t look right because those animations are out of sync with the navigation animation

Ian Lake

02/04/2022, 3:06 AM

Did you look at using the

navController.visibleEntries

API? That gives you the list of all destinations that are currently visible (i.e., the one coming in and the one going out while the animation is happening), thus letting you only run animations after the animation finishes: https://github.com/google/accompanist/issues/633#issuecomment-942988181

🙌 1

:today-i-learned: 1

Joseph Hawkes-Cates

02/04/2022, 3:14 AM

I did not. That was exactly what I was looking for but didn’t see that. I’ll try that out. Thanks!

2 Views

#compose Join Slack