Cannot recognize "Modifier.sharedElement" in Jetpack Compose

Question

I have already used imports and dependencies but there is two errors like this:

> Unresolved reference 'sharedElement'.

> Unresolved reference 'rememberSharedContentState'.

and here is part of my code.

MainActivity.kt

class MainActivity : ComponentActivity() {
 @OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3ExpressiveApi::class, ExperimentalTextApi::class)
 override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 enableEdgeToEdge()
 setContent {
 FoxusTheme {
 FoxusApp()
 }
 }
 }
}
@Composable
@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3ExpressiveApi::class, ExperimentalTextApi::class, ExperimentalSharedTransitionApi::class)
fun FoxusApp() {
 val navController = rememberNavController()
 SharedTransitionLayout {
 NavHost(
 navController = navController,
 startDestination = "Main"
 ) {
 composable("Main") {
 MainWithScaffold(
 navController = navController,
 sharedTransitionScope = this@SharedTransitionLayout,
 animatedVisibilityScope = this@composable
 )
 }
 composable("Focusing") {
 Focusing(
 sharedTransitionScope = this@SharedTransitionLayout,
 animatedVisibilityScope = this
 )
 }
 }
 }
}
@Composable
@OptIn(ExperimentalMaterial3Api::class)
fun AnimatedTopBar(title: String) {
 /*...*/
}
@Composable
@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3ExpressiveApi::class, ExperimentalTextApi::class,
 ExperimentalSharedTransitionApi::class
)
fun MainWithScaffold(
 navController: NavController,
 sharedTransitionScope: SharedTransitionScope,
 animatedVisibilityScope: AnimatedVisibilityScope
){
 /*...define some values and variables...*/
 Scaffold(
 /*...*/
 ){ paddingValues ->
 Box(
 /*...*/
 ) {
 AnimatedContent(
 /*...*/
 ) {
 index ->
 SharedTransitionLayout {
 when (index) {
 0 -> FocusPage(
 onStartClick = { navController.navigate("focusing") },
 sharedTransitionScope = this@SharedTransitionLayout,
 animatedVisibilityScope = this@AnimatedContent
 )
 1 -> TasksPage()
 2 -> ProfilePage()
 }
 }
 }
 }
 }
}

FocusPage.kt (where errors occur)

@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
@ExperimentalMaterial3ExpressiveApi
fun FocusPage(
 onStartClick: () -> Unit,
 sharedTransitionScope: SharedTransitionScope,
 animatedVisibilityScope: AnimatedVisibilityScope
) {
 /*...define some values and variables...l*/
 Column(
 /*...*/
 ){
 Card(
 odmifier = Modifier
 .fillMaxWidth()
 .height(quickFocusCardHeight)
 .clickable { onStartClick() }
 .sharedElement(
 rememberSharedContentState(key = "Focusing"),
 animatedVisibilityScope = animatedVisibilityScope,
 ),
 shape = RoundedCornerShape(30.dp),
 colors = CardDefaults.cardColors(
 containerColor = MaterialTheme.colorScheme.primary
 )
 ) {/*...specifics...*/}
 }
}
@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
@ExperimentalMaterial3ExpressiveApi
fun Focusing(
 sharedTransitionScope: SharedTransitionScope,
 animatedVisibilityScope: AnimatedVisibilityScope
){ 
 /*...define some values and variables...l*/
 Column(
 modifier = Modifier
 .fillMaxSize()
 .background(MaterialTheme.colorScheme.onPrimary)
 .sharedElement(
 rememberSharedContentState(key = sharedKey),
 animatedVisibilityScope = animatedVisibilityScope
 ),
 horizontalAlignment = Alignment.CenterHorizontally
 ){/*...specifics...*/}
}

build.gradle.kts(Module: app)

dependencies {
 implementation(platform("androidx.compose:compose-bom:20250800"))
 implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.2")
 implementation("androidx.room:room-runtime:2.5.2")
 kapt("androidx.room:room-compiler:2.5.2")
 implementation("androidx.room:room-ktx:2.5.2")
 implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.5.1")
 implementation("com.google.code.gson:gson:2.8.8")
 implementation("androidx.datastore:datastore:1.0.0")
 implementation("androidx.datastore:datastore-preferences:1.1.7")
 implementation(libs.androidx.core.ktx)
 implementation(libs.androidx.lifecycle.runtime.ktx)
 implementation(libs.androidx.activity.compose)
 implementation(platform(libs.androidx.compose.bom))
 implementation(libs.androidx.ui)
 implementation(libs.androidx.ui.graphics)
 implementation(libs.androidx.ui.tooling.preview)
 implementation(libs.androidx.material3)
 implementation(libs.androidx.constraintlayout)
 testImplementation(libs.junit)
 androidTestImplementation(libs.androidx.junit)
 androidTestImplementation(libs.androidx.espresso.core)
 androidTestImplementation(platform(libs.androidx.compose.bom))
 androidTestImplementation(libs.androidx.ui.test.junit4)
 debugImplementation(libs.androidx.ui.tooling)
 debugImplementation(libs.androidx.ui.test.manifest)
 implementation("androidx.compose.material3:material3:1.3.2")
 implementation("androidx.compose.material3:material3-window-size-class:1.3.2")
 implementation("androidx.compose.material3:material3-adaptive-navigation-suite:1.5.0-alpha02")
 implementation("androidx.compose.material:material-icons-core:1.5.4")
 implementation("androidx.compose.material:material-icons-extended:1.5.4")
 implementation("androidx.compose.ui:ui:1.5.4")
 implementation("androidx.compose.ui:ui-text:1.5.4")
 implementation("androidx.compose.material3:material3:1.1.2")
 implementation("androidx.navigation:navigation-compose:2.9.3")
 implementation("androidx.compose.animation:animation:1.9.0")
}

If you want to see full code, please visit My Github Repo

According to the documentation, Modifier.sharedElement(rememberSharedContentState(key = "image"), animatedVisibilityScope = animatedVisibilityScope) should be possible.

• dan1st: Can you maybe try updating androidx.compose.ui:ui:1.5.4 to the latest version (or something with 1.7) - or ideally update all dependencies to the latest version if possible?

Answer 1

sharedElement() and rememberSharedContentState() are functions on SharedTransitionScope. While you passed a SharedTransitionScope into FocusPage(), you do not appear to be using it.

The documentation uses with(), which would change your code to be something like:

@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
@ExperimentalMaterial3ExpressiveApi
fun FocusPage(
 onStartClick: () -> Unit,
 sharedTransitionScope: SharedTransitionScope,
 animatedVisibilityScope: AnimatedVisibilityScope
) {
 /*...define some values and variables...l*/
 Column(
 /*...*/
 ){
 with(sharedTransitionScope) {
 Card(
 odmifier = Modifier
 .fillMaxWidth()
 .height(quickFocusCardHeight)
 .clickable { onStartClick() }
 .sharedElement(
 rememberSharedContentState(key = "Focusing"),
 animatedVisibilityScope = animatedVisibilityScope,
 ),
 shape = RoundedCornerShape(30.dp),
 colors = CardDefaults.cardColors(
 containerColor = MaterialTheme.colorScheme.primary
 )
 ) {/*...specifics...*/}
 }
 }
}