@expo/ui 56.0.8 → 56.0.10

package/CHANGELOG.md

@@ -10,6 +10,37 @@
 
 ### 💡 Others
 
+## 56.0.10 — 2026-05-20
+
+### 🎉 New features
+
+- Added `@expo/ui/community/pager-view` — a drop-in replacement for `react-native-pager-view`. ([#45499](https://github.com/expo/expo/pull/45499) by [@vonovak](https://github.com/vonovak))
+- [iOS] Added `textStyle` option to `font` modifier in `@expo/ui/swift-ui` for iOS Dynamic Type scaling. ([#46007](https://github.com/expo/expo/pull/46007) by [@ramonclaudio](https://github.com/ramonclaudio))
+
+### 🐛 Bug fixes
+
+- [universal] Fix universal components dark theme ([#45969](https://github.com/expo/expo/pull/45969) by [@zoontek](https://github.com/zoontek))
+- [universal] Fix `BottomSheet` behavior by making `Host` optional, and fix Android exit animation. ([#46031](https://github.com/expo/expo/pull/46031) by [@nishan](https://github.com/intergalacticspacehighway))
+
+## 56.0.9 — 2026-05-19
+
+### 🎉 New features
+
+- [iOS][android] Added `onChange` listener to `useNativeState`. ([#45961](https://github.com/expo/expo/pull/45961) by [@nishan](https://github.com/intergalacticspacehighway))
+- Allow writing to native state from the JS thread. ([#45901](https://github.com/expo/expo/pull/45901) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] Added `withAnimation(animation, body)` in `@expo/ui/swift-ui`, mirroring SwiftUI's [`withAnimation(_:_:)`](<https://developer.apple.com/documentation/swiftui/withanimation(_:_:)>). ([#45893](https://github.com/expo/expo/pull/45893) by [@nishan](https://github.com/intergalacticspacehighway))
+- [jetpack-compose] Added `Snackbar` component. ([#45667](https://github.com/expo/expo/pull/45667) by [@nishan](https://github.com/intergalacticspacehighway))
+- [android] Added `LoadingIndicator` and `ContainedLoadingIndicator` components. ([#41169](https://github.com/expo/expo/pull/41169) by [@suveshmoza](https://github.com/suveshmoza))
+
+### 🐛 Bug fixes
+
+- [iOS] Unmount `BottomSheet` when it is dismissed. ([#45846](https://github.com/expo/expo/pull/45846) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] Apply `modifiers` prop on `Host` instead of silently dropping it. ([#45872](https://github.com/expo/expo/pull/45872) by [@ramonclaudio](https://github.com/ramonclaudio))
+
+### 💡 Others
+
+- [universal] Add base styling to universal Picker on web ([#45932](https://github.com/expo/expo/pull/45932) by [@zoontek](https://github.com/zoontek))
+
 ## 56.0.8 — 2026-05-15
 
 ### 🎉 New features
@@ -34,6 +65,9 @@ _This version does not introduce any user-facing changes._
 - Make `ChartView` public. ([#45674](https://github.com/expo/expo/pull/45674) by [@jakex7](https://github.com/jakex7))
 - Added `@expo/ui/community/menu`, a drop-in replacement for `@react-native-menu/menu`. ([#45670](https://github.com/expo/expo/pull/45670) by [@vonovak](https://github.com/vonovak))
 - [android] Added Compose `combinedClickable` modifier. ([#45670](https://github.com/expo/expo/pull/45670) by [@vonovak](https://github.com/vonovak))
+- [universal] Added `Collapsible`, `List`, `ListItem`, and `Picker` components. ([#45754](https://github.com/expo/expo/pull/45754) by [@kudo](https://github.com/kudo))
+- [universal] Added `snapPoints` prop on `BottomSheet` and `colorScheme` / `layoutDirection` props on `Host`. ([#45754](https://github.com/expo/expo/pull/45754) by [@kudo](https://github.com/kudo))
+- [jetpack-compose] `background(color, { animationSpec })` accepts an optional `animationSpec` and wraps the color in `animateColorAsState` so changes between renders animate smoothly. ([#45754](https://github.com/expo/expo/pull/45754) by [@kudo](https://github.com/kudo))
 
 ### 🐛 Bug fixes
 
@@ -333,7 +367,7 @@ _This version does not introduce any user-facing changes._
 
 - [iOS] Remove leftover `Switch` TypeScript exports from swift-ui package. Use `Toggle` instead. ([#42571](https://github.com/expo/expo/pull/42571) by [@shubh73](https://github.com/shubh73))
 - Improved Jetpack Compose integration for Expo UI. ([#42450](https://github.com/expo/expo/pull/42450) by [@kudo](https://github.com/kudo))
-- [iOS] Added `contentShape` modifier for SwiftUI ([#42813](https://github.com/expo/expo pull/42813) by [@sam-shubham](https://github.com/sam-shubham))
+- [iOS] Added `contentShape` modifier for SwiftUI ([#42813](https://github.com/expo/expo/pull/42813) by [@sam-shubham](https://github.com/sam-shubham))
 
 ## 55.0.0-beta.3 — 2026-01-27
 

package/CLAUDE.md

@@ -6,7 +6,7 @@ expo-ui is a library of native UI components for React Native, bridging SwiftUI
 
 Bridge native components to JavaScript with as little abstraction as possible. Native views should be thin wrappers — no added logic, state management, or behavior beyond what the platform component provides. Everything that can be set or controlled from JavaScript should be controlled from JavaScript.
 
-Prefer controlled components: state lives in JS and is passed as props, not managed internally by the native view. Use a prop + callback pattern (e.g. `page` + `onPageChange`) instead of imperative ref methods (e.g. `setPage(index)`). This keeps the source of truth in React and makes components predictable and composable.
+Mirror the native API shape. If the underlying SwiftUI / Compose component exposes imperative methods (e.g. SwiftUI's `ScrollViewProxy.scrollTo`, Compose's `PagerState.animateScrollToPage`), expose them as imperative methods in JS — don't paper them over with a controlled prop + sync layer just for the sake of a "React-y" API.
 
 ## Naming
 

package/android/build.gradle

@@ -12,13 +12,13 @@ apply plugin: 'expo-module-gradle-plugin'
 apply plugin: 'org.jetbrains.kotlin.plugin.compose'
 
 group = 'expo.modules.ui'
-version = '56.0.8'
+version = '56.0.10'
 
 android {
   namespace "expo.modules.ui"
   defaultConfig {
     versionCode 1
-    versionName "56.0.8"
+    versionName "56.0.10"
     testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
   }
   buildFeatures {

package/android/src/main/java/expo/modules/ui/ExpoUIModule.kt

@@ -2,6 +2,7 @@
 
 package expo.modules.ui
 
+import android.os.Looper
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.SwitchDefaults
 import androidx.compose.material3.ToggleButtonDefaults
@@ -39,6 +40,7 @@ import expo.modules.ui.menu.ExposedDropdownMenuBoxContent
 import expo.modules.ui.menu.ExposedDropdownMenuBoxProps
 import expo.modules.ui.menu.ExposedDropdownMenuContent
 import expo.modules.ui.menu.ExposedDropdownMenuProps
+import kotlinx.coroutines.launch
 import okhttp3.OkHttpClient
 
 class ExpoUIModule : Module() {
@@ -79,7 +81,20 @@ class ExpoUIModule : Module() {
       }
 
       Function("setValue") { state: ObservableState, wrapper: Map<String, Any?> ->
-        state.value = wrapper["value"]
+        val newValue = wrapper["value"]
+        val mainLooper = Looper.getMainLooper()
+        // Update state on the UI thread
+        if (mainLooper.isCurrentThread) {
+          state.value = newValue
+        } else {
+          appContext.mainQueue.launch {
+            state.value = newValue
+          }
+        }
+      }
+
+      Function("setOnChange") { state: ObservableState, callback: WorkletCallback? ->
+        state.onChange = callback
       }
     }
 
@@ -139,6 +154,8 @@ class ExpoUIModule : Module() {
     // Class-based views so TooltipBoxView can detect them by type via findChildOfType
     View(PlainTooltipView::class)
     View(RichTooltipView::class)
+    // Class-based view so SnackbarHostView can read its styling via findChildOfType
+    View(SnackbarView::class)
 
     //endregion Views use expo-modules-core DSL for uncommon features
 
@@ -340,6 +357,18 @@ class ExpoUIModule : Module() {
       }
     }
 
+    ExpoUIView<LoadingIndicatorProps>("LoadingIndicatorView") {
+      Content { props ->
+        LoadingIndicatorContent(props)
+      }
+    }
+
+    ExpoUIView<ContainedLoadingIndicatorProps>("ContainedLoadingIndicatorView") {
+      Content { props ->
+        ContainedLoadingIndicatorContent(props)
+      }
+    }
+
     ExpoUIView<LinearProgressIndicatorProps>("LinearProgressIndicatorView") {
       Content { props ->
         LinearProgressIndicatorContent(props)
@@ -429,14 +458,20 @@ class ExpoUIModule : Module() {
       val scrollToPage by AsyncFunction<Int>()
       val onCurrentPageChange by Event<HorizontalPagerCurrentPageChangeEvent>()
       val onSettledPageChange by Event<HorizontalPagerSettledPageChangeEvent>()
+      val onPageScroll by Event<HorizontalPagerPageScrollEvent>()
+      val onScrollInProgressChange by Event<HorizontalPagerScrollInProgressChangeEvent>()
+      val onDragInteraction by Event<HorizontalPagerDragInteractionEvent>()
 
       Content { props ->
         HorizontalPagerContent(
-          props,
-          animateScrollToPage,
-          scrollToPage,
-          { onCurrentPageChange(it) },
-          { onSettledPageChange(it) }
+          props = props,
+          animateScrollToPage = animateScrollToPage,
+          scrollToPage = scrollToPage,
+          onCurrentPageChange = { onCurrentPageChange(it) },
+          onSettledPageChange = { onSettledPageChange(it) },
+          onPageScroll = { onPageScroll(it) },
+          onScrollInProgressChange = { onScrollInProgressChange(it) },
+          onDragInteraction = { onDragInteraction(it) }
         )
       }
     }
@@ -596,6 +631,14 @@ class ExpoUIModule : Module() {
       }
     }
 
+    ExpoUIView<SnackbarHostProps>("SnackbarHostView") {
+      val showSnackbar by AsyncFunction<SnackbarShowOptions>()
+
+      Content { props ->
+        SnackbarHostContent(props, showSnackbar)
+      }
+    }
+
     ExpoUIView<TooltipBoxViewProps>("TooltipBoxView") {
       val show by AsyncFunction()
       val dismiss by AsyncFunction()

package/android/src/main/java/expo/modules/ui/HorizontalPagerView.kt

@@ -2,6 +2,7 @@ package expo.modules.ui
 
 import android.view.View
 import android.view.ViewGroup
+import androidx.compose.foundation.interaction.DragInteraction
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.runtime.Composable
@@ -23,6 +24,7 @@ import expo.modules.kotlin.views.FunctionalComposableScope
 import expo.modules.kotlin.types.Either
 import expo.modules.kotlin.types.OptimizedRecord
 import expo.modules.kotlin.views.OptimizedComposeProps
+import expo.modules.ui.state.WorkletCallback
 
 @OptimizedRecord
 data class HorizontalPagerCurrentPageChangeEvent(
@@ -34,6 +36,22 @@ data class HorizontalPagerSettledPageChangeEvent(
   @Field val position: Int = 0
 ) : Record
 
+@OptimizedRecord
+data class HorizontalPagerPageScrollEvent(
+  @Field val currentPage: Int = 0,
+  @Field val currentPageOffsetFraction: Float = 0f
+) : Record
+
+@OptimizedRecord
+data class HorizontalPagerScrollInProgressChangeEvent(
+  @Field val isScrollInProgress: Boolean = false
+) : Record
+
+@OptimizedRecord
+data class HorizontalPagerDragInteractionEvent(
+  @Field val kind: String = "start"
+) : Record
+
 @OptimizedComposeProps
 data class HorizontalPagerProps(
   val initialPage: Int = 0,
@@ -42,6 +60,7 @@ data class HorizontalPagerProps(
   val userScrollEnabled: Boolean = true,
   val reverseLayout: Boolean = false,
   val beyondViewportPageCount: Int = 0,
+  val onPageScrollSync: WorkletCallback? = null,
   val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
@@ -51,7 +70,10 @@ fun FunctionalComposableScope.HorizontalPagerContent(
   animateScrollToPage: AsyncFunctionHandle<Int>,
   scrollToPage: AsyncFunctionHandle<Int>,
   onCurrentPageChange: (HorizontalPagerCurrentPageChangeEvent) -> Unit,
-  onSettledPageChange: (HorizontalPagerSettledPageChangeEvent) -> Unit
+  onSettledPageChange: (HorizontalPagerSettledPageChangeEvent) -> Unit,
+  onPageScroll: (HorizontalPagerPageScrollEvent) -> Unit,
+  onScrollInProgressChange: (HorizontalPagerScrollInProgressChangeEvent) -> Unit,
+  onDragInteraction: (HorizontalPagerDragInteractionEvent) -> Unit
 ) {
   // Mirror view.size into snapshot state so the outer scope recomposes when
   // children are added/removed. Without this, Compose's pager caches its
@@ -59,6 +81,9 @@ fun FunctionalComposableScope.HorizontalPagerContent(
   // and crashes on scroll past the last index it knew about, because reading
   // view.size — a plain Java property — registers no snapshot dependency.
   val pageCountState = remember { mutableIntStateOf(view.size) }
+  // Assumes sole ownership of `view`'s OnHierarchyChangeListener — there is
+  // only one slot per ViewGroup, and `onDispose` resets it to null. Safe
+  // because `view` is the expo Host's private container.
   DisposableEffect(view) {
     view.setOnHierarchyChangeListener(object : ViewGroup.OnHierarchyChangeListener {
       override fun onChildViewAdded(parent: View?, child: View?) {
@@ -72,35 +97,91 @@ fun FunctionalComposableScope.HorizontalPagerContent(
     onDispose { view.setOnHierarchyChangeListener(null) }
   }
 
-  val pageCount = pageCountState.intValue
-  if (pageCount == 0) return
+  // Register the imperative handles before the empty-children early return, so
+  // in case there ever are JS calls dispatched while `view.size` is still 0, they bind to a handler.
+  // `coerceAtLeast(0)` guards against `coerceIn(0, -1)` throwing in that gap.
   val pagerState = rememberPagerState(
-    initialPage = props.initialPage.coerceIn(0, pageCount - 1)
+    initialPage = props.initialPage.coerceAtLeast(0)
   ) { pageCountState.intValue }
   val scope = rememberCoroutineScope()
 
   // Dispatch into the composition's scope so the scroll runs with Compose's
   // MonotonicFrameClock; .join() lets the JS-side promise await completion.
+  // Clamp page indices here because Compose throws on out-of-range values.
   animateScrollToPage.handle { page ->
-    scope.launch { pagerState.animateScrollToPage(page) }.join()
+    val count = pageCountState.intValue
+    if (count > 0) {
+      val clamped = page.coerceIn(0, count - 1)
+      scope.launch { pagerState.animateScrollToPage(clamped) }.join()
+    }
   }
 
   scrollToPage.handle { page ->
-    scope.launch { pagerState.scrollToPage(page) }.join()
+    val count = pageCountState.intValue
+    if (count > 0) {
+      val clamped = page.coerceIn(0, count - 1)
+      scope.launch { pagerState.scrollToPage(clamped) }.join()
+    }
   }
 
-  // Mirror Compose's PagerState observable fields to JS callbacks. Drop the
-  // first emission so we don't echo the initial value back on mount.
-  LaunchedEffect(pagerState) {
-    snapshotFlow { pagerState.currentPage }
-      .drop(1)
-      .collect { onCurrentPageChange(HorizontalPagerCurrentPageChangeEvent(it)) }
-  }
+  val pageCount = pageCountState.intValue
+  if (pageCount == 0) return
 
+  // Mirror Compose's PagerState observable fields to JS callbacks. Each
+  // state-backed snapshotFlow drops its first emission so we don't echo the
+  // initial value back on mount; the interactionSource flow doesn't drop
+  // because its emissions are discrete events, not state values.
   LaunchedEffect(pagerState) {
-    snapshotFlow { pagerState.settledPage }
-      .drop(1)
-      .collect { onSettledPageChange(HorizontalPagerSettledPageChangeEvent(it)) }
+    launch {
+      snapshotFlow { pagerState.currentPage }
+        .drop(1)
+        .collect { onCurrentPageChange(HorizontalPagerCurrentPageChangeEvent(it)) }
+    }
+    launch {
+      snapshotFlow { pagerState.settledPage }
+        .drop(1)
+        .collect { onSettledPageChange(HorizontalPagerSettledPageChangeEvent(it)) }
+    }
+    launch {
+      snapshotFlow {
+        pagerState.currentPage to pagerState.currentPageOffsetFraction
+      }
+        .drop(1)
+        .collect { (currentPage, fraction) ->
+          // Mutually exclusive: the JS wrapper only wires one path at a time.
+          // Skipping the regular event when a worklet is attached avoids the
+          // per-frame Record allocation + async JS-thread event dispatch.
+          val sync = props.onPageScrollSync
+          if (sync != null) {
+            sync.invoke(currentPage, fraction)
+          } else {
+            onPageScroll(
+              HorizontalPagerPageScrollEvent(
+                currentPage = currentPage,
+                currentPageOffsetFraction = fraction
+              )
+            )
+          }
+        }
+    }
+    launch {
+      snapshotFlow { pagerState.isScrollInProgress }
+        .drop(1)
+        .collect {
+          onScrollInProgressChange(HorizontalPagerScrollInProgressChangeEvent(isScrollInProgress = it))
+        }
+    }
+    launch {
+      pagerState.interactionSource.interactions.collect { interaction ->
+        val kind = when (interaction) {
+          is DragInteraction.Start -> "start"
+          is DragInteraction.Stop -> "stop"
+          is DragInteraction.Cancel -> "cancel"
+          else -> return@collect
+        }
+        onDragInteraction(HorizontalPagerDragInteractionEvent(kind = kind))
+      }
+    }
   }
 
   val contentPadding = props.contentPadding.toPaddingValues()

package/android/src/main/java/expo/modules/ui/LoadingView.kt

@@ -0,0 +1,80 @@
+@file:OptIn(ExperimentalMaterial3ExpressiveApi::class)
+
+package expo.modules.ui
+
+import android.graphics.Color
+import androidx.compose.material3.ContainedLoadingIndicator
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.LoadingIndicator
+import androidx.compose.material3.LoadingIndicatorDefaults
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+import expo.modules.kotlin.views.OptimizedComposeProps
+import expo.modules.ui.state.ObservableState
+
+// region LoadingIndicator
+
+@OptimizedComposeProps
+data class LoadingIndicatorProps(
+  val progress: ObservableState? = null,
+  val color: Color? = null,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.LoadingIndicatorContent(props: LoadingIndicatorProps) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  val indicatorColor = props.color.composeOrNull ?: LoadingIndicatorDefaults.indicatorColor
+
+  val progressState = props.progress
+  if (progressState != null) {
+    LoadingIndicator(
+      progress = { (progressState.value as? Number)?.toFloat() ?: 0f },
+      modifier = modifier,
+      color = indicatorColor
+    )
+  } else {
+    LoadingIndicator(
+      modifier = modifier,
+      color = indicatorColor
+    )
+  }
+}
+
+// endregion
+
+// region ContainedLoadingIndicator
+
+@OptimizedComposeProps
+data class ContainedLoadingIndicatorProps(
+  val progress: ObservableState? = null,
+  val color: Color? = null,
+  val containerColor: Color? = null,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.ContainedLoadingIndicatorContent(props: ContainedLoadingIndicatorProps) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  val indicatorColor = props.color.composeOrNull ?: LoadingIndicatorDefaults.containedIndicatorColor
+  val containerColor = props.containerColor.composeOrNull ?: LoadingIndicatorDefaults.containedContainerColor
+
+  val progressState = props.progress
+  if (progressState != null) {
+    ContainedLoadingIndicator(
+      progress = { (progressState.value as? Number)?.toFloat() ?: 0f },
+      modifier = modifier,
+      indicatorColor = indicatorColor,
+      containerColor = containerColor
+    )
+  } else {
+    ContainedLoadingIndicator(
+      modifier = modifier,
+      indicatorColor = indicatorColor,
+      containerColor = containerColor
+    )
+  }
+}
+
+// endregion

package/android/src/main/java/expo/modules/ui/ModifierRegistry.kt

@@ -3,9 +3,13 @@
 package expo.modules.ui
 
 import android.graphics.Color
+import androidx.compose.animation.animateColorAsState
 import androidx.compose.animation.animateContentSize
+import androidx.compose.animation.core.AnimationSpec
 import androidx.compose.animation.core.Spring
+import androidx.compose.animation.core.snap
 import androidx.compose.animation.core.spring
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
@@ -38,6 +42,7 @@ import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.ExposedDropdownMenuAnchorType
 import androidx.compose.material3.toShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.blur
@@ -147,6 +152,24 @@ internal data class BackgroundParams(
   @Field val color: Color? = null
 ) : Record
 
+// Color animation specs reuse the JS `$type` shape from `@expo/ui/jetpack-compose/modifiers/animation` (spring / tween / snap).
+// Keyframes are float-only and aren't supported for colors.
+private fun parseColorAnimationSpec(raw: Any?): AnimationSpec<androidx.compose.ui.graphics.Color>? {
+  if (raw !is Map<*, *>) return null
+  return when (raw["\$type"]) {
+    "spring" -> spring(
+      dampingRatio = (raw["dampingRatio"] as? Number)?.toFloat() ?: Spring.DampingRatioNoBouncy,
+      stiffness = (raw["stiffness"] as? Number)?.toFloat() ?: Spring.StiffnessMedium
+    )
+    "tween" -> tween(
+      durationMillis = (raw["durationMillis"] as? Number)?.toInt() ?: 300,
+      delayMillis = (raw["delayMillis"] as? Number)?.toInt() ?: 0
+    )
+    "snap" -> snap(delayMillis = (raw["delayMillis"] as? Number)?.toInt() ?: 0)
+    else -> null
+  }
+}
+
 @OptimizedRecord
 internal data class BorderParams(
   @Field val borderWidth: Int = 1,
@@ -457,9 +480,14 @@ object ModifierRegistry {
     // Appearance modifiers
     register("background") { map, _, _, _ ->
       val params = recordFromMap<BackgroundParams>(map)
-      params.color?.let { color ->
-        Modifier.background(color.compose)
-      } ?: Modifier
+      val color = params.color?.compose ?: return@register Modifier
+      val spec = parseColorAnimationSpec(map["animationSpec"])
+      if (spec != null) {
+        val animated by animateColorAsState(color, spec, label = "background-color")
+        Modifier.background(animated)
+      } else {
+        Modifier.background(color)
+      }
     }
 
     register("border") { map, _, _, _ ->

package/android/src/main/java/expo/modules/ui/SnackbarView.kt

@@ -0,0 +1,126 @@
+@file:OptIn(ExperimentalMaterial3Api::class)
+
+package expo.modules.ui
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.graphics.Color
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Snackbar
+import androidx.compose.material3.SnackbarDefaults
+import androidx.compose.material3.SnackbarDuration
+import androidx.compose.material3.SnackbarHost
+import androidx.compose.material3.SnackbarHostState
+import androidx.compose.material3.SnackbarResult
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.types.OptimizedRecord
+import expo.modules.kotlin.views.AsyncFunctionHandle
+import expo.modules.kotlin.views.ComposableScope
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.ExpoComposeView
+import expo.modules.kotlin.views.FunctionalComposableScope
+import expo.modules.kotlin.views.OptimizedComposeProps
+import kotlinx.coroutines.withContext
+import kotlin.coroutines.cancellation.CancellationException
+
+// Holds styling props that `SnackbarHost` reads via `findChildOfType`.
+
+@OptimizedComposeProps
+data class SnackbarViewProps(
+  val containerColor: MutableState<Color?> = mutableStateOf(null),
+  val contentColor: MutableState<Color?> = mutableStateOf(null),
+  val actionContentColor: MutableState<Color?> = mutableStateOf(null),
+  val dismissActionContentColor: MutableState<Color?> = mutableStateOf(null),
+  val actionOnNewLine: MutableState<Boolean> = mutableStateOf(false),
+  val modifiers: MutableState<ModifierList> = mutableStateOf(emptyList())
+) : ComposeProps
+
+@SuppressLint("ViewConstructor")
+class SnackbarView(context: Context, appContext: AppContext) :
+  ExpoComposeView<SnackbarViewProps>(context, appContext) {
+  override val props = SnackbarViewProps()
+
+  @Composable
+  override fun ComposableScope.Content() {
+    // Empty by design: `SnackbarHost` renders the snackbar using the props above.
+  }
+}
+
+// --- SnackbarHostView ---
+
+@OptimizedRecord
+data class SnackbarShowOptions(
+  @Field val message: String = "",
+  @Field val actionLabel: String? = null,
+  @Field val withDismissAction: Boolean = false,
+  @Field val duration: String? = null
+) : Record
+
+@OptimizedComposeProps
+data class SnackbarHostProps(
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.SnackbarHostContent(
+  props: SnackbarHostProps,
+  showSnackbar: AsyncFunctionHandle<SnackbarShowOptions>
+) {
+  val hostState = remember { SnackbarHostState() }
+  val scope = rememberCoroutineScope()
+  val snackbarConfig = findChildOfType<SnackbarView>(view)
+
+  showSnackbar.handle { options ->
+    val duration = when (options.duration) {
+      "short" -> SnackbarDuration.Short
+      "long" -> SnackbarDuration.Long
+      "indefinite" -> SnackbarDuration.Indefinite
+      // M3 default: indefinite when there's an action label, else short.
+      else -> if (options.actionLabel == null) SnackbarDuration.Short else SnackbarDuration.Indefinite
+    }
+    val result = try {
+      withContext(scope.coroutineContext) {
+        hostState.showSnackbar(
+          message = options.message,
+          actionLabel = options.actionLabel,
+          withDismissAction = options.withDismissAction,
+          duration = duration
+        )
+      }
+    } catch (_: CancellationException) {
+      // The compose scope can be cancelled if the view is disposed before user dismisses the snackbar or performs the action.
+      // In that case, we treat it as if the snackbar was dismissed.
+      SnackbarResult.Dismissed
+    }
+    when (result) {
+      SnackbarResult.ActionPerformed -> "actionPerformed"
+      SnackbarResult.Dismissed -> "dismissed"
+    }
+  }
+
+  SnackbarHost(
+    hostState = hostState,
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  ) { data ->
+    Snackbar(
+      snackbarData = data,
+      modifier = snackbarConfig?.let {
+        ModifierRegistry.applyModifiers(it.props.modifiers.value, appContext, composableScope, globalEventDispatcher)
+      } ?: androidx.compose.ui.Modifier,
+      actionOnNewLine = snackbarConfig?.props?.actionOnNewLine?.value ?: false,
+      containerColor = snackbarConfig?.props?.containerColor?.value.composeOrNull ?: SnackbarDefaults.color,
+      contentColor = snackbarConfig?.props?.contentColor?.value.composeOrNull ?: SnackbarDefaults.contentColor,
+      actionContentColor = snackbarConfig?.props?.actionContentColor?.value.composeOrNull
+        ?: SnackbarDefaults.actionContentColor,
+      dismissActionContentColor = snackbarConfig?.props?.dismissActionContentColor?.value.composeOrNull
+        ?: SnackbarDefaults.dismissActionContentColor
+    )
+  }
+}

package/android/src/main/java/expo/modules/ui/colors/MaterialColors.kt

@@ -13,6 +13,7 @@ import com.google.android.material.color.utilities.MaterialDynamicColors
 import com.google.android.material.color.utilities.SchemeTonalSpot
 import expo.modules.kotlin.records.Field
 import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.types.OptimizedRecord
 import expo.modules.ui.ExpoColorScheme
 
 /**
@@ -21,6 +22,7 @@ import expo.modules.ui.ExpoColorScheme
  */
 internal val isDynamicColorSupported: Boolean = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
 
+@OptimizedRecord
 internal class MaterialColorsOptions : Record {
   @Field val scheme: ExpoColorScheme? = null
 

package/android/src/main/java/expo/modules/ui/state/ObservableState.kt

@@ -11,11 +11,21 @@ import expo.modules.kotlin.sharedobjects.SharedObject
  */
 class ObservableState(initialValue: Any? = null) : SharedObject() {
   private val _state: MutableState<Any?> = mutableStateOf(initialValue)
+  internal var onChange: WorkletCallback? = null
+  private var isNotifying = false
 
   var value: Any?
     get() = _state.value
     set(v) {
       _state.value = v
+      // Skip re-invoking onChange if state.value was written from inside onChange.
+      if (isNotifying) return
+      isNotifying = true
+      try {
+        onChange?.invoke(v)
+      } finally {
+        isNotifying = false
+      }
     }
 
   @Suppress("UNCHECKED_CAST")