androidandroid-jetpack-composeandroid-animationjetpack-compose-animationandroid-jetpack-compose-animation

Shared element transition: renderInSharedTransitionScopeOverlay().animateEnterExit() - Unresolved reference: animateEnterExit


From the docs I found the following sample code:

Sometimes you might want your non-shared composable to animate away as well as remain on top of the other composables before the transition. In such cases, use renderInSharedTransitionScopeOverlay().animateEnterExit() to animate the composable out as the shared element transition runs:

JetsnackBottomBar(
    modifier = Modifier
        .renderInSharedTransitionScopeOverlay(
            zIndexInOverlay = 1f,
        )
        .animateEnterExit(
            enter = fadeIn() + slideInVertically {
                it
            },
            exit = fadeOut() + slideOutVertically {
                it
            }
        )
)

Also usage in the sample project.

But when I try it animateEnterExit is unresolved:

with(sharedTransitionScope) {
    BottomCard(
        modifier = Modifier
            .renderInSharedTransitionScopeOverlay(
                zIndexInOverlay = Float.MAX_VALUE,
            )
            .animateEnterExit(
                enter = fadeIn() + slideInVertically {
                    it
                },
                exit = fadeOut() + slideOutVertically {
                    it
                }
            ),
    )
}

enter image description here

composeBom = "2025.01.01"

Solution

  • Found the answer animateEnterExit is within the AnimatedVisibility scope:

    https://developer.android.com/develop/ui/compose/animation/composables-modifiers#animatedvisibility-enter-exit

    Update:

    And not just AnimatedVisibility, also AnimatedContent

    And we can use: with(animatedContentScope) { } which we get from NavHost's composable: https://developer.android.com/develop/ui/compose/animation/shared-elements/navigation