What determines the navigation animation for Jetpa...

# compose-android

[bryankeltonadams]

What determines the navigation animation for Jetpack Compose Navigation 2.7.0.+?
I updated my Compose navigation dependency and now some of my screens do really weird transitions, I've even set

enterTransition = { EnterTransition.None },
 exitTransition = { ExitTransition.None }

like is mentioned in the https://developer.android.com/jetpack/compose/animation/quick-guide#animate-whilst docs.

Has anyone ran into having bugs or issues with this? I wanted to start having some of my screens slide up and down when navigating to and exiting from, but I'm getting some really weird animations on screens I'm not touching at all.

not kotlin but kotlin colored

[bryankeltonadams]

weird animations.webm

weird animations.webm

[Ian Lake]

Navigation 2.7 uses AnimatedContent which does do a size transform when your content doesn't fill the size completely in the first composition (e.g., you wait for data to be loaded before displaying anything). There were some bug fixes around this in the Compose 1.6 alphas - does this magically fix itself if you upgrade your Compose version?

[Kevin Worth]

@bryankeltonadams I just went through this in the current app I’m working on. I was navigating forward to a Composable that at the root was a Column and I was not setting it to fillMaxSize, so as @Ian Lake points out, it was first a very small thing and then it got moved into position at the top. After changing it to use fillMaxSize , I saw more pleasing behavior where the text I expected to see at the top started at the top because it started as a large thing from the beginning. Hopefully that makes sense and is helpful, even if it doesn’t answer the question of how to disable the animation altogether 🤷 . At least if we can’t disable it, we can make it look good/natural.

[bryankeltonadams]

@Ian Lake I was on the latest version of Compose Navigation but not Compose itself, so I'll give both an upgrade when I reintroduce this into the app.

[Ian Lake]

Yeah, this isn't something the Navigation version is going to necessarily influence (beyond just upgrading to Navigation 2.7 in the first place) - it is AnimatedContent and hence your Compose version that is doing all of the animations you're seeing

[bryankeltonadams]

@Ian Lake It looks like updating Compose and Navigation fixed the animations issues. But now on a screen where I have a BottomSheet and I open the keyboard on the screen behind the bottomsheet while the sheet is closed, it pops up a little bit.

[Ian Lake]

Be sure to file a bug! Bottom sheets are definitely in a state of flux so worth filing an issue rather than hope it magically gets fixed

[bryankeltonadams]

@Ian Lake I see. Sometimes I lean towards if something is wrong after an update then it must be something we're doing wrong on our end. But I suppose that it might not be the case? 😛 So yeah I'll get a bug filed and revert the versions again.

[Kevin Worth]

Just ran into a somewhat related issue and wonder what you guys think.

The animations are great and all, but it’s not terribly difficult within human reaction time to tap on something twice(or some other second thing) before it gets covered up by the composable being navigated to. I can see a way to remember a value such as isClickable at the level of my LazyColumn:

var isClickable by remember { mutableStateOf(true) }
LazyColumn {
    items(data, key = { it.id }) {
        ItemRow(
            ...
            isClickable = isClickable,
            onClick = { clicked ->
                isClickable = false
                onClickWeatherPlace(clicked)
            },
        )
    }
}

But should I really have to go through all of this?

Plus, I could have any number of clickable things on screen, not just these rows of data, so now I have to bubble up a boolean (something like isNavigating, or allowClicks) and then disable everything that is clickable? Something doesn’t feel right. Maybe I’m missing something silly?

[Kevin Worth]

Feels related because now I find myself where @bryankeltonadams started… can I just disable these default navigation animations?

[Ian Lake]

You've always had a 100% way of knowing when a transition is already in progress by looking at the Lifecycle of the NavBackStackEntry: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1677627408927339?thread_ts=1677626180.373409&cid=CJLTWPH7S

[bryankeltonadams]

@Ian Lake There's also some weird behavior with our start destination, since we start at an authenticatedGraphRoute, but that is wrapped in a RequireLoggedIn Composable that navigates to the unauthenticatedGraphRoute leaving the previous composable on the backStack and ready to pop the unauthenticatedGraph off once the user is authenticated. I replaced my Nested graphs with just a TestScreen and the behavior is the exact same, Jumpy/jittering when the app is launched as the app starts at the authenticatedGraph and gets kicked off and navigates to the unauthenticatedGraph. Should I just be setting the animation to none or something on these composables?

Replace with Test Screens.webm

[bryankeltonadams]

^hopefully this video is clear, these are two separate navigation routes but it's the same TestScreen that I'm using.

[bryankeltonadams]

But even with a different screen between the two navigation routes. the visual behavior is the same, just jumpiness on the unauthenticatedGraphRoute