IssueTracker

Jetpack Compose version: 1.7.5

Android Studio Build: #AI-242.23339.11.2422.12584204

Kotlin version: 2.0.21

---

I am using SharedTransition to transition a image in HorizontalMultiBrowseCarousel at one page to another page. I found that using sharedElements or sharedBounds in carousel will cause carousel render glitched.

Here is simplified code.

NavigationPage

SharedTransitionLayout {
    NavHost(navController, NavRoute.Main) {
        composable<NavRoute.Main> {
            MainPage(
                this, // AnimatedVisibilityScope
                onClickImage = {
                    navController.navigate(NavRoute.Second(it))
                }
            )
        }
        composable<NavRoute.Second> {
            val route = it.toRoute<NavRoute.Second>()
            SecondPage(
                route.imageUrl,
                this, // AnimatedVisibilityScope
                onGoBack = { navController.navigateUp() }
            )
        }
    }
}

MainPage

fun SharedTransitionScope.MainPage(
    animatedVisibilityScope: AnimatedVisibilityScope,
    onClickImage: (String) -> Unit,
) {
    val state = rememberCarouselState(0) { ... }
    HorizontalMultiBrowseCarousel(state) { index ->
        AsyncImage(
            model = ...,
            modifier = Modifier
                .sharedElement( // ! Use it in carousel scope causes carousel glitch !
                    rememberSharedContentState(SharedTransitionKey.IMAGE),
                    animatedVisibilityScope
                )
                .clickable { onClickImage(imageData[index]) },
            ...
        )
    }
}

SecondPage

@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
fun SharedTransitionScope.SecondPage(
    imageUrl: String,
    animatedVisibilityScope: AnimatedVisibilityScope,
    onGoBack: () -> Unit,
) {
    val currentImageUrl by rememberUpdatedState(imageUrl)

    Column {
        Button(onClick = onGoBack) { Text("Go Back") }
        AsyncImage(
            model = currentImageUrl,
            modifier = Modifier
                .sharedElement(
                    rememberSharedContentState(SharedTransitionKey.IMAGE),
                    animatedVisibilityScope
                ),
            ...,
        )
    }
}

If I comment sharedElement modifier in MainPage, the carousel works well without transition animation.

Carousel item without sharedElement

But when I add this modifier, the carousel glitches and can't even show items.

Carousel with sharedElement

I have noticed that the transition animation also worked while carousel is glitching. But it behaves like I am using a normal horizontal scroll list.

I have create a repository with minimal reproducible example project. Please visit https://github.com/StageGuard/JetpackCompose-Bug-CarouselWithSharedTransition to get the code.