Provide a default Destination AnimatedContent Scope to support the Shared Element Transition API about compose-destinations

[raamcosta]

Hey guys

I haven’t had time to properly check shared element transitions but if you just need the animated scope, that is something that the lib already knows how to provide to the destination without any setup whatsoever.

check this

https://composedestinations.rafaelcosta.xyz/v2/styles-and-animations#animated-style

[ammargitham]

@raamcosta Okay, I tried with the official lib. Same behavior. Will raise issue in Google issue tracker.

[ammargitham]

Technically, we can use the manualComposableCallsBuilder for the destinations where we need to pass the animatedVisibilityScope. It's not pretty but it allows us to not write composable() for only required destinations.

manualComposableCallsBuilder = {
    composable(HomeScreenDestination) {
        CompositionLocalProvider(
            LocalNavAnimatedVisibilityScope provides this,
        ) {
            HomeScreen(
                ...
            )
        }
    }
    composable(WallpaperScreenDestination) {
        CompositionLocalProvider(
            LocalNavAnimatedVisibilityScope provides this,
        ) {
            WallpaperScreen(
                ...
            )
        }
    }
},

Then use the scope inside the composable.

But yeah, auto injected scope would be better.

[ammargitham]

@raamcosta I was able to get the shared element transition to work, although it was a bit glitchy. But I guess that may be because of a combination of the new api and my own code.

But it somehow stopped working when I moved the detail screen out into another NavHost. If you want to investigate this, I can provide some code. I don't know for sure if it's a problem with the new api or compose-destinations.

[raamcosta]

I just made use of shared element transitions with no issue. I don't think the "glichyness" is related to Compose Destinations.

That said, I will with next release do some changes that should make using it easier. Specifically with the way to send SharedTransitionScope and AnimatedVisibilityScope.

[ammargitham]

@raamcosta I have created a sample project which shows the shared element bug when the screens are in nested navhost.
In the sample, Clicking rows which go to "Detail in List" will correctly work with shared transition, where as those with "Detail in Root" won't work.

ComposeDestinationSharedElemBug.zip

[raamcosta]

@ammargitham have you tried the same code without Compose Destinations and with official compose navigation lib?

I really don’t think Compose Destinations is causing this issue as we just bridging things from the official lib.