I have a TopAppBar component that conditionally displays a back button based on whether there is a previous destination in the navigation back stack.(This is what I learned in jetpack compose codelab about navigation) The back button is shown if navController.previousBackStackEntry != null.

My ProTopAppBar Definition

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ProTopAppBar(
    title: String,
    canNavigateBack: Boolean,
    navigateUp: () -> Unit = {},
    modifier: Modifier = Modifier
) {
    TopAppBar(
        modifier = modifier.bottomBorder(2.dp, MaterialTheme.colorScheme.outlineVariant),
        navigationIcon = {
            if (canNavigateBack) {
                IconButton(onClick = navigateUp) {
                    Icon(
                        imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                        contentDescription = "Localized description"
                    )
                }
            }
        },

My ProTopAppBar use in home screen and next page screen

fun LibraryScreen(
    canNavigateBack: Boolean,
    navigateUp: () -> Unit,
) {
    Scaffold(
        topBar = {
            ProTopAppBar(
                title = stringResource(R.string.library_title),
                canNavigateBack = canNavigateBack,
                navigateUp = navigateUp
            )
        }

fun CourseDetailScreen(
    canNavigateBack: Boolean,
    navigateUp: () -> Unit,
) {
    Scaffold(
        topBar = {
            ProTopAppBar(
                title = stringResource(R.string.course_detail_title),
                canNavigateBack = canNavigateBack,
                navigateUp = navigateUp
            )
        },

my nav graph configure

composable(
            route = Screen.Course.route,
        ) {
            LibraryScreen(
                canNavigateBack = navController.canNavigateBack(),
                navigateUp = { navController.navigateUp() },
            )
        }
composable(
            route = Screen.CourseDetail.routeWithArg,
        ) {
            CourseDetailScreen(
                canNavigateBack = navController.canNavigateBack(),
                navigateUp = { navController.navigateUp() },
            )
        }


fun NavHostController.canNavigateBack(): Boolean {
    return (this.previousBackStackEntry != null)
}

However, I encountered a bug related to this logic when implementing slide-in and slide-out animations for page transitions.

When I navigate from the home page to the next page, the home page slides out to the left, and the next page slides in from the right. The home page does not initially have a back button, but when navigating to the next page, the home page suddenly shows a back button during the animation. This issue occurs because the value of navController.previousBackStackEntry changes at the moment I navigate to the next page, causing the back button to appear on the home page before it has completely slid out of view.

Additionally, I’ve encountered a similar issue when navigating back from the next page to the home page. Although the next page hasn’t fully disappearred yet, the back button in next page disappears at the moment of clicking the back button.

the gif shows exactly what the problem is

How can I fix this issue so that the back button does not appear on the home page during the transition animation?

I understand that the issue might be related to the lifecycle of the page. For example, a STARTED lifecycle state indicates that the page can be seen (partially or fully), while a RESUMED lifecycle state indicates that the page can be interacted with (fully entered). I also know that I need to implement logic that considers the lifecycle states, but I’m not sure how to achieve this. The following code incorporates lifecycle checks but still has issues. It only ensures that the back button on a single page does not flicker during navigation:

fun NavHostController.canNavigateBack(): Boolean {
    /* If there is a transition animation, it is necessary to determine if the page is in the RESUMED state to avoid page state confusion during transitions */
    return (this.previousBackStackEntry != null) &&
            ((currentBackStackEntry?.lifecycle?.currentState?.isAtLeast(Lifecycle.State.**RESUMED**)) == true)
}

using resumed state to judge

replace resumed with start state to judge