Hi, I am running into a small issue when using the...

# compose

[Dovydas]

Hi, I am running into a small issue when using the shared element API with navigation. I want to have a shared background composable between screens. My background is just this:

Box
  Background (modifier applied to this)
  Content

When I set the background to be a shared element, it renders in the overlay and above the content during the transition. So I also set renderInSharedTransitionScopeOverlay for the content, but now it loses it's navigation transitions. Therefore after that I also add animateEnterExit on the content with the same transition. But that modifier has no context about the difference between pop and push transitions, so I lose my seperate pop transitions. And from there I don't know how to proceed further, my full code is in the thread.

[Dovydas]

@OptIn(ExperimentalSharedTransitionApi::class)
inline fun <reified T : Any> NavGraphBuilder.backgroundComposable(
    navController: NavController,
    noinline content: @Composable (AnimatedContentScope.(NavBackStackEntry) -> Unit),
) {
    composable<T>(
        enterTransition = { EnterTransition.None },
        exitTransition = { ExitTransition.None },
        popEnterTransition = { EnterTransition.None },
        popExitTransition = { ExitTransition.None }
    ) { backStackEntry ->
        val sharedTransitionScope = LocalSharedTransitionScope.current
        val density = LocalDensity.current

        with(sharedTransitionScope) {
            Background(
                modifier = Modifier.sharedElement(
                    rememberSharedContentState(SharedTransitionBackgroundKey),
                    animatedVisibilityScope = this@composable
                ),
                fogVisibility = BackgroundFogVisibility.FULL
            ) {
                Box(Modifier
                    .renderInSharedTransitionScopeOverlay(
                        zIndexInOverlay = 1f
                    )
                    .fillMaxSize()
                    .animateEnterExit(
                        enter = NavigationTransitions.sharedXAxisEnter(density),
                        exit = NavigationTransitions.sharedXAxisExit(density)
                    )
                ) {
                    content(backStackEntry)
                }
            }
        }
    }
}