CODEWITHSUNDEEP
androidkotlinandroid-jetpack-compose
wiryadev
wiryadev

Reputation: 1491

ExitAnimation between composable within NavHost

Im playing with AnimatedVisibility in jetpack compose and find out that the exit animation doesnt work because the composable destroyed(?) before the animation started. I tested it with delay enabled to see if the animation worked if the destroy got delayed, and it works. But it doesnt look good and seems forced, beside it doesnt work with default onBackPressed. Here is my code:

NavHost(navController = navController, startDestination = startDestination) {
    composable() { // First Screen }
    composable(
        ...
    ) { navBackStackEntry ->

        val scope = rememberCoroutineScope()

        AnimatedVisibility(
            visibleState = remember { MutableTransitionState(!detailScreenIsVisible) }
                .apply { targetState = detailScreenIsVisible },
            enter = slideInHorizontally(
                initialOffsetX = { it / 4 }
            ),
            exit = slideOutHorizontally(
                targetOffsetX = { it / 4 }
            ),
        ) {
            DetailScreen(
                ...
                onNavigateUp = {
                    detailScreenIsVisible = false
                    scope.launch {
                        delay(10L)
                        navController.navigateUp()
                    }
                }
            )
        }
    }
}

What is the workaround for this?

Upvotes: 1

Views: 1213

Answers (1)

Franbede
Franbede

Reputation: 648

If you check this link to Navigating with Compose from the Google Docs it states that:

The anim block cannot be used with Navigation Compose. Transition Animations in Navigation Compose is being tracked in this feature request.

Therefore, Google is working on it, but it is not available yet. You can keep track of the status of this feature here (I'm checking from time to time) and wait for the animations to be widely available. In the meantime, I found a quite interesting article written by Johann Blake that implements it's own navigation framework. He also made it to be able to pass any object between navigation screens, which avoids the bundle limitations that we were dealing with in the Navigation Component.

Upvotes: 2

Related Questions