Jetpack Compose Crossfade broken in Alpha

0
votes

My crossfade animations are no longer working since the release of Compose Alpha and I would really appreciate some help getting them working again. I am fairly new to Android/Compose. I understand that Crossfade is looking for a state change in its targetState to trigger the crossfade animation, but I am confused how to incorporate this. I am trying to wrap certain composables in the Crossfade animation.

Here are the official docs and helpful playground example, but I still cannot get it to work since the release of Alpha https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#crossfade https://foso.github.io/Jetpack-Compose-Playground/animation/crossfade/

Here is my code, in this instance I was hoping to use the String current route itself as the targetState as a mutableStateOf object. I'm willing to use whatever will work though.

@Composable
fun ExampleComposable() {

val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute: String? = navBackStackEntry?.arguments?.getString(KEY_ROUTE)

val exampleRouteTargetState = remember { mutableStateOf(currentRoute)}

Scaffold(
    ...
    NavHost(navController, startDestination = "Courses") {
    composable("Route") {
        Crossfade(targetState = exampleRouteTargetState, animationSpec = tween(2000)) {
            ExampleComposable1()
        }
    }
    composable("Other Route")
        ExampleComposable2()
    }
)
...

}

Shouldn't navigation trigger a state change of the "exampleRouteTargetState" variable and then trigger crossfade? I could also wrap the composable elsewhere if you think wrapping it inside the NavHost may create an issue. Thanks so much for the help!!

2
androidkotlinandroid-animationandroid-jetpackandroid-jetpack-compose

2 Answers

1
votes

Lately Google Accompanist has added a library which provides Compose Animation support for Jetpack Navigation Compose.. Do check it out. 👍🏻

https://github.com/google/accompanist/tree/main/navigation-animation

0
votes

Still haven't gotten Crossfade working again, but I was able to implement some transitions inside NavHost. Hope this helps someone. Here are the docs if you want to fine tune these high level animations: https://developer.android.com/jetpack/compose/animation#animatedvisibility

@ExperimentalAnimationApi
@Composable
fun ExampleAnimation(content: @Composable () -> Unit) {
    AnimatedVisibility(
        visible = true,
        enter = fadeIn(initialAlpha = 0.3f),
        exit = fadeOut(),
        content = content,
        initiallyVisible = false
    )
}

And then simply wrap your NavHost composable declarations with your animation like so

NavHost(navController, startDestination = "A Route") {
composable(Screen.YourObject.Route) {
    ExampleAnimation {
        YourComposable()
    }
}