[Navigation Animation] Transition not working as expected for screens with Column

[Pioooooo]

Description I have an AnimatedNavHost with enter and exit transitions set to None. If none of the composable contents have Column inside, it looks good (or at least if only contains a Text). But when there's a Column inside, it has some weird animation during the transition between such a screen with Column and any other screen. Transition between two screens with no Column works fine.

https://user-images.githubusercontent.com/25563691/217388195-b9047998-bdfc-46f3-a4cf-d1922f71861d.mp4

Steps to reproduce

compose_version = '1.3.3'

dependencies {
    implementation 'androidx.core:core-ktx:1.9.0'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1'
    implementation 'androidx.activity:activity-compose:1.6.1'
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
    implementation 'androidx.compose.material3:material3:1.1.0-alpha05'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"
    implementation "com.google.accompanist:accompanist-navigation-animation:0.29.1-alpha"
}

@OptIn(ExperimentalAnimationApi::class, ExperimentalMaterial3Api::class)
@Composable
fun App() {
    val navController = rememberAnimatedNavController()
    val backStackEntry = navController.currentBackStackEntryAsState()
    val currentDestination = backStackEntry.value?.destination
    Scaffold(
        bottomBar = {
            NavigationBar {
                screens.forEach { screen ->
                    NavigationBarItem(
                        selected = currentDestination?.hierarchy?.any {
                            it.route == screen.route
                        } ?: false,
                        onClick = {
                            navController.navigate(screen.route) {
                                popUpTo(
                                    navController.graph.findStartDestination().id
                                ) {
                                    saveState = true
                                }
                                launchSingleTop = true
                                restoreState = true
                            }
                        },
                        icon = {
                            Icon(imageVector = screen.icon, contentDescription = null)
                        }
                    )
                }
            }
        }
    ) { paddingValues ->
        AnimatedNavHost(
            navController = navController,
            startDestination = Screen1.route,
            enterTransition = { EnterTransition.None },
            exitTransition = { ExitTransition.None },
            modifier = Modifier.padding(paddingValues)
        ) {
            composable(route = Screen1.route) {
                Text(text = "some screen 1")
            }
            composable(route = Screen2.route) {
                Box {
                    Column {
                        repeat(10) { i ->
                            ListItem(headlineText = { Text(text = "$i") })
                        }
                    }
                }
            }
            composable(route = Screen3.route) {
                Text(text = "some screen 3")
            }
        }
    }
}

Expected behavior

Transit with no animation.

Additional context

Edit

Tried some other animation types and they all behave abnormally.

[milken]

Your screens are not fullscreen, so transition won't work as you would expect them to work. Add modifier = Modifier.fillMaxSize(). Other problem may be that you set transitions to None, so there won't be any meaningful transition.

[Pioooooo]

Your screens are not fullscreen, so transition won't work as you would expect them to work. Add modifier = Modifier.fillMaxSize(). Other problem may be that you set transitions to None, so there won't be any meaningful transition.

Thanks, the fillMaxSize thing does work, but I didn't see it get mentioned in any document.😞 Anyway I am closing the issue I guess.

[Monabr]

Still have this bug even if I don't have column and made Box Modifier.fillMaxSize(). How to fix it?