How to use .sharedBounds() from ShareTransitionScope between 2 items

[jutikornEddie]

Hi team, I can now see that we only have the way to share the element using sharedElement() but I couldn't anywhere in the sample or in the doc to guide how to do the sharedBounds between 2 Nodes. In my case, I want to use it since my items are not identical. Could u guide me the way to do it, please?

[KovalevAndrey]

Hey @jutikornEddie you can retrieve the scope from composition local and use it like this in each Node. LocalSharedElementScope will be provided by Children composable if you provide withMovableContent = true

requireNotNull(LocalSharedElementScope.current).run {
    Box(
        modifier = Modifier
        .sharedBounds(..)
    )
}

let me know if it works

[jutikornEddie]

Ahh, thank you. I thought we had the similar function somewhere in the lib. 🙏 .

I have raised another question in the issue, please help have a look.

[jutikornEddie]

Sorry @KovalevAndrey , I just realized, to use .sharedBounds() that means the animatedVisibilityScope is required. Since Google hasn't yet made the sharedBoundsWithCallerManagedVisibility() to be a public function.

Between 2 Nodes, there is no any of AnimatedContent or AnimatedVisiblity wrapping them, I wonder how we can achieve this?

[KovalevAndrey]

@jutikornEddie they even left a comment for it to open the API :)

I don't think we can do it right now, unfortunately. Try opening an issue for them in the google tracker. They shouldn't force the clients wrap everything with AnimatedVisibility

[jutikornEddie]

I see, even if we change the way we display the children by using AnimatedContent() / AnimatedVisibility() to display only the Active screen, the issue may persist for the case that we want to use sharedBounds between the ParentNode1's child and ParentNode2's child because animatedVisibilityScope of them will be different.