Hi All, getting this error while trying to use `Sh...

# compose

[jamshedalamqaderi]

Hi All, getting this error while trying to use SharedTransitionLayout
CMP: v1.10.3
Here's the error:

java.lang.IllegalArgumentException: Error: Uninitialized LayoutCoordinates. Please make sure when using the SharedTransitionScope composable function, the modifier passed to the child content is being used, or use SharedTransitionLayout instead.

I'm using Example code from this link: developer.android.com/develop/…/navigation

Code available in the thread.

[jamshedalamqaderi]

data class Snack(
    val name: String,
    val description: String,
    val image: DrawableResource
)

private val listSnacks = listOf(
    Snack("Cupcake", "", GlobalRes.drawable.IconListUnordered),
    Snack("Donut", "", GlobalRes.drawable.IconCopy),
    Snack("Eclair", "", GlobalRes.drawable.IconTrash),
    Snack("Froyo", "", GlobalRes.drawable.IconTracking),
    Snack("Gingerbread", "", GlobalRes.drawable.IconBell),
    Snack("Honeycomb", "", GlobalRes.drawable.IconAppLogo),
)

@Serializable
object HomeRoute : NavKey

@Serializable
data class DetailsRoute(val item: Int) : NavKey

@Composable
fun SharedElement_Nav3() {
    SharedTransitionLayout {
        val backStack = rememberNavBackStack(SavedStateConfiguration.DEFAULT, HomeRoute)

        // Note: NavDisplay accepts a `sharedTransitionScope` parameter, which is used to animate
        // NavEntry instances between scenes. This parameter *isn't* required for shared element
        // or shared bounds transitioning elements between different NavEntry, as demonstrated in
        // this sample.
        // See <https://developer.android.com/guide/navigation/navigation-3/animate-destinations#transition-nav-entries>
        NavDisplay(
            modifier = Modifier.safeDrawingPadding(),
            backStack = backStack,
            entryProvider = entryProvider {
                entry<HomeRoute> {
                    HomeScreen(
                        sharedTransitionScope = this@SharedTransitionLayout,
                        animatedVisibilityScope = LocalNavAnimatedContentScope.current,
                        onItemClick = { backStack.add(DetailsRoute(it)) })
                }
                entry<DetailsRoute> { detailsRoute ->
                    val id = detailsRoute.item
                    val snack = listSnacks[id]

                    DetailsScreen(
                        id = id,
                        snack = snack,
                        sharedTransitionScope = this@SharedTransitionLayout,
                        animatedVisibilityScope = LocalNavAnimatedContentScope.current,
                        onBackPressed = {
                            backStack.removeLastOrNull()
                        },
                    )
                }
            })
    }
}

@Composable
fun HomeScreen(
    sharedTransitionScope: SharedTransitionScope,
    animatedVisibilityScope: AnimatedVisibilityScope,
    onItemClick: (Int) -> Unit,
) {
    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
            .padding(8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        itemsIndexed(listSnacks) { index, item ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { onItemClick(index) },
            ) {
                Spacer(modifier = Modifier.width(8.dp))
                with(sharedTransitionScope) {
                    Image(
                        painterResource(item.image),
                        contentDescription = item.description,
                        contentScale = ContentScale.Crop,
                        modifier = Modifier
                            .sharedElement(
                                sharedTransitionScope.rememberSharedContentState(key = "image-$index"),
                                animatedVisibilityScope = animatedVisibilityScope
                            )
                            .size(100.dp)
                    )
                    Spacer(modifier = Modifier.width(8.dp))
                    Text(
                        item.name,
                        fontSize = 18.sp,
                        modifier = Modifier
                            .align(Alignment.CenterVertically)
                            .sharedElement(
                                sharedTransitionScope.rememberSharedContentState(key = "text-$index"),
                                animatedVisibilityScope = animatedVisibilityScope,
                            )
                    )
                }
            }
        }
    }
}

[ggoggam]

Hmmm can you give 1.11.0-alpha01 for androidx.compose.animation:animation a try? I believe there was a bug fix related to this...

[efemoney]

Always use the latest version of compose

[jamshedalamqaderi]

Thank you all for you responses. But i have fixed it through adding the Modifier from SharedTransitionScope to the NavDisplay then it's working perfectly.