In Jetpack Compose screens overlaps, or partially rendered, when being navigated with Jetpack Compose navigation controller

Question

I have tried to disable Animation still my Screen Partially rendered at initial stage at time of navigation and popBackStack navigation too

@Composable
fun OwnerProfileNavigation(
    navController: NavHostController,
    startDestination: String
) {

    val screen = remember(navController) {
        OwnerProfileScreens(navController = navController)
    }
    NavHost(
        navController = navController,
        startDestination = startDestination,
        enterTransition = {
            EnterTransition.None

        },
        popExitTransition = { ExitTransition.None},
        exitTransition = {
            ExitTransition.None
        },


    ) {
        ownerProfileScreen(navigateToDriverScreen = screen.ownerProfile)
        ownerToDriver()



    }

}

This my NavHost where I am generating the graph. For Better Clarity I am Attaching a clip for the reference Thankyou In Advance

Answer 1

Jetpack Compose, by default, has a fade-out-fade-in transition when navigating between two screens. If you are encountering issues like this, it could be due to the absence of a background applied to each Compose screen. The default Modifier renders these screens with a transparent surface. During the fade-out-fade-in effect, the content of the upcoming screen may appear before the outgoing screen is entirely hidden. To resolve this, consider using a background modifier on your Compose screens with the desired background colour.