Strange Jetpack Compose Navigation Transition Behavior

Question

I'm wondering why I get this weird transition when navigating to my Settings screen too quickly (video on YouTube: https://youtube.com/shorts/UPv66zqHMbo?feature=share). Here's all the related code (this is a multi-module app):

Code for my navigation graph:

fun NavGraphBuilder.settingsGraph(navController: NavController) {
    navigation(
        startDestination = SettingsGraphDestination.InitialScreen.route,
        route = SETTINGS_GRAPH_ROUTE
    ) {
        composable(
            route= SettingsGraphDestination.InitialScreen.route,
            enterTransition = {
                fadeIn(tween(durationMillis = CommonConstants.NAVIGATION_ANIMATION_DURATION_MILLIS))
            },
            exitTransition =  {
                fadeOut(tween(durationMillis = CommonConstants.NAVIGATION_ANIMATION_DURATION_MILLIS))
            }
        ) {
            SettingsScreen(
                navController = navController,
                onPhoneNumberSettingScreenClicked = {
                    navController.navigate(
                        SettingsGraphDestination.PhoneNumberAdjustment.route
                    )
                },
                onStepStrideAdjustmentScreenClicked = {
                    navController.navigate(
                        SettingsGraphDestination.StepStrideAdjustment.route
                    )
                }
            )
        }
    }
    }

SettingsScreen.kt:

    NirvanaScaffold(
        navController = navController,
        screenTitle = "تنظیمات"
    ) {
         Column(
            modifier = Modifier
                .fillMaxSize()
                .background(nirvanaScreenBackgroundBrush)
                .verticalScroll(rememberScrollState())
        ) {
            Spacer(modifier = Modifier.weight(0.1f))

            ButtonsArea(
                onSubscriptionButtonClicked = { onSubscriptionScreenClicked() },
                onChangePhoneNumberButtonClicked = { onPhoneNumberSettingScreenClicked() },
                onChangeStepStrideButtonClicked = { onStepStrideAdjustmentScreenClicked() },
                onChangeWeightButtonClicked = { onWeightAdjustmentScreenClicked() }
            )
            Spacer(modifier = Modifier.weight(1f))
        }
    }
}

RootGraph.kt:

dashboardGraph(
            navController = navController,
            nestedGraphs = {
                settingsGraph(navController = navController)
            },
            navigateToSettingsGraph = {navController.navigateToSettingsGraph()}
        )
    }

Does anybody know what may be causing this problem? I've tried deleting the enterTransition and exitTransition arguments also, but it did not work!

Poetry

what's strange, that the activity comes down from the top left? – Steeple

@Steeple yes, rather than fading in only. – Poetry

try a different phone/emulator it could be a system animation or the Launcher that you are using. – Steeple

@Steeple but I get this behavior on my Android phone, so I have to solve the issue to make sure it will run correctly on all types of Android devices. – Poetry

I meant try another device to prove if the problem is indeed your code or external to you. Once you've determined that you know if you are debugging a problem or attempting to override default behaviour – Steeple

I have the same issue with animation, I use the default one. It works well with navigation version 2.7.0, but if I use any version above I have the top left animation. – Cavity

It can be related to issuetracker.google.com/issues/295536728 – Cavity

@Cavity downgrading to 2.7.0 looks like a good workaround for now since the problem is still there even in 2.7.5. Thanks for the comment! – Poetry

Should be fixed now in 2.8.0-alpha04 android-review.googlesource.com/c/platform/frameworks/support/+/… – Analogize

Answer 1

I have found another solution that works with navigation 2.7.6 in my case, I just added .fillMaxSize() modifier in my NavHost:

...    
TemplateTheme {
                Surface(
                    color = MaterialTheme.colorScheme.background
                ) {
                    Scaffold(
                        snackbarHost = { SnackbarHost(snackbarHostState) },
                        content = { paddingValues ->
                            NavHost(
                                modifier = Modifier
                                    .fillMaxSize()
                                    .padding(paddingValues),
                                navController = navController,
...

I'm also using a single top-level Scaffold in the app

Cavity

will give this a shot and come back asap (still relying on the older version)! – Poetry

I had to go to each NavGraph Destination screen route to add fillMaxSize(), doing at navhost route didn't fix it. It was particularly a problem if you screen starts off with a loading dialog of some sort. – Haber

Unfortunately this didn't work for me – Machado

Answer 2

This appears to be a bug in Compose Navigation, I've created a reproduction repository and filed an issue here: https://issuetracker.google.com/issues/339835189

Machado