@expo/ui 56.0.7 → 56.0.9

package/CHANGELOG.md

@@ -10,6 +10,36 @@
 
 ### 💡 Others
 
+## 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))
+
+### 💡 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
+
+- [universal] Added `matchContents`, `layoutDirection`, `onLayoutContent`, `useViewportSizeMeasurement`, and `ignoreSafeArea` support to the universal `Host`. ([#45776](https://github.com/expo/expo/pull/45776) by [@zoontek](https://github.com/zoontek))
+- [iOS] Added `symbolEffect` modifier. ([#45727](https://github.com/expo/expo/pull/45727) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] Added `Alert` component wrapping SwiftUI's `.alert(_:isPresented:actions:message:)` modifier, with `Alert.Trigger`, `Alert.Actions`, and optional `Alert.Message` slots. Mirrors the existing `ConfirmationDialog` shape so it composes the same way with `Button` actions and `isPresented` bindings. ([#45700](https://github.com/expo/expo/pull/45700) by [@ramonclaudio](https://github.com/ramonclaudio))
+
+### 💡 Others
+
+- Fixed precompile xcframework warning. ([#45762](https://github.com/expo/expo/pull/45762) by [@kudo](https://github.com/kudo))
+
 ## 56.0.7 — 2026-05-13
 
 _This version does not introduce any user-facing changes._
@@ -20,10 +50,16 @@ _This version does not introduce any user-facing changes._
 
 - Added `@expo/ui/community/slider`, a drop-in replacement for `@react-native-community/slider`. ([#45623](https://github.com/expo/expo/pull/45623) by [@nishan](https://github.com/intergalacticspacehighway))
 - 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
 
 - Fix `useNativeState` recreating the `ObservableState` when initial value changes; the seed is now captured once via `useRef`. ([#45623](https://github.com/expo/expo/pull/45623) by [@nishan](https://github.com/intergalacticspacehighway))
+- [Android] Fix layout shift in `Host` with `matchContents`. ([#45775](https://github.com/expo/expo/pull/45775) by [@nishan](https://github.com/intergalacticspacehighway))
 
 ## 56.0.5 — 2026-05-11
 
@@ -87,6 +123,7 @@ _This version does not introduce any user-facing changes._
 - [iOS] Add `WorkletCallback` shared object for synchronous UI thread callbacks. ([#44216](https://github.com/expo/expo/pull/44216) by [@nishan](https://github.com/intergalacticspacehighway))
 - [iOS] Added `scrollPosition` and `id` modifiers for tracking and scrolling to view-aligned targets in `ScrollView` and other scrollable containers (iOS 17+). ([#44652](https://github.com/expo/expo/pull/44652) by [@ramonclaudio](https://github.com/ramonclaudio))
 - Added `@expo/ui/datetimepicker` — an Android and iOS `DateTimePicker` drop-in replacement for `@react-native-community/datetimepicker`. ([#44014](https://github.com/expo/expo/pull/44014) by [@vonovak](https://github.com/vonovak))
+- [iOS] Added `SwipeActions` component. ([#44689](https://github.com/expo/expo/pull/44689) by [@yousofabouhalawa](https://github.com/yousofabouhalawa))
 - [swift-ui] Added `LazyHStack` and `LazyVStack`. ([#44612](https://github.com/expo/expo/pull/44612) by [@kudo](https://github.com/kudo))
 - [jetpack-compose] Added `LazyRow` component and `onVisibilityChanged` modifier. ([#44615](https://github.com/expo/expo/pull/44615) by [@kudo](https://github.com/kudo))
 - Added universal components. ([#44601](https://github.com/expo/expo/pull/44601) by [@kudo](https://github.com/kudo))
@@ -115,6 +152,7 @@ _This version does not introduce any user-facing changes._
 ### 💡 Others
 
 - Moved `DateTimePicker` to `@expo/ui/community/datetime-picker`. The old `@expo/ui/datetimepicker` export still works but logs a deprecation warning in development. ([@vonovak](https://github.com/vonovak)) ([#45211](https://github.com/expo/expo/pull/45211) by [@vonovak](https://github.com/vonovak))
+- [iOS] Added `extraProps` to `SlotView` for passing metadata to SwiftUI slot consumers. ([#44689](https://github.com/expo/expo/pull/45287) by [@yousofabouhalawa](https://github.com/yousofabouhalawa))
 - [jetpack-compose] Use view hash code as key for `Children`. ([#44521](https://github.com/expo/expo/pull/44521) by [@kudo](https://github.com/kudo))
 - Refactored `ComposableScope` and allow extensibility. ([#44698](https://github.com/expo/expo/pull/44698) by [@kudo](https://github.com/kudo))
 - [jetpack-compose] Reuse `HorizontalAlignment` converter in `LazyColumn`. ([#44755](https://github.com/expo/expo/pull/44755) by [@kudo](https://github.com/kudo))
@@ -316,7 +354,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/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.7'
+version = '56.0.9'
 
 android {
   namespace "expo.modules.ui"
   defaultConfig {
     versionCode 1
-    versionName "56.0.7"
+    versionName "56.0.9"
     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,14 +81,28 @@ 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
       }
     }
 
     //region Views use expo-modules-core DSL for uncommon features
 
     View(HostView::class) {
-      Events("onLayoutContent")
+      // See ShadowNodeSyncFlush.kt for why onExpoUISyncFlush is needed.
+      Events("onLayoutContent", "onExpoUISyncFlush")
 
       OnViewDidUpdateProps { view ->
         view.onViewDidUpdateProps()
@@ -123,7 +139,10 @@ class ExpoUIModule : Module() {
       colorScheme.toTokenMap()
     }
 
-    View(RNHostView::class)
+    View(RNHostView::class) {
+      // See ShadowNodeSyncFlush.kt for why this internal phantom event is needed.
+      Events("onExpoUISyncFlush")
+    }
 
     View(SlotView::class) {
       Events("onSlotEvent")
@@ -135,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
 
@@ -336,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)
@@ -592,6 +625,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/HostView.kt

@@ -193,6 +193,7 @@ internal class HostView(context: Context, appContext: AppContext) :
             if (constraints.maxWidth == 0) widthDp else Double.NaN,
             if (constraints.maxHeight == 0) heightDp else Double.NaN
           )
+          flushPendingStateUpdates()
         }
       }
 
@@ -221,6 +222,7 @@ internal class HostView(context: Context, appContext: AppContext) :
         val styleWidth = if (matchContentsHorizontal == true && width > 0) width else null
         val styleHeight = if (matchContentsVertical == true && height > 0) height else null
         shadowNodeProxy.setStyleSize(styleWidth?.toDouble(), styleHeight?.toDouble())
+        flushPendingStateUpdates()
       }
 
       onLayoutContent(LayoutContentEvent(width.toDouble(), height.toDouble()))

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

@@ -1,15 +1,21 @@
-@file:OptIn(ExperimentalMaterial3ExpressiveApi::class, ExperimentalMaterial3Api::class)
+@file:OptIn(ExperimentalMaterial3ExpressiveApi::class, ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
 
 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
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
@@ -36,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
@@ -145,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,
@@ -455,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, _, _, _ ->
@@ -633,6 +663,22 @@ object ModifierRegistry {
       }
     }
 
+    register("combinedClickable") { map, _, _, eventDispatcher ->
+      val params = recordFromMap<ClickableParams>(map)
+      val onClick = { eventDispatcher("combinedClickable", mapOf("event" to "click")) }
+      val onLongClick = { eventDispatcher("combinedClickable", mapOf("event" to "longClick")) }
+      if (params.indication) {
+        Modifier.combinedClickable(onClick = onClick, onLongClick = onLongClick)
+      } else {
+        Modifier.combinedClickable(
+          interactionSource = null,
+          indication = null,
+          onClick = onClick,
+          onLongClick = onLongClick
+        )
+      }
+    }
+
     register("selectable") { map, _, _, eventDispatcher ->
       val params = recordFromMap<SelectableParams>(map)
       Modifier.selectable(

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

@@ -36,7 +36,8 @@ import expo.modules.kotlin.views.OptimizedComposeProps
 
 @OptimizedComposeProps
 internal data class RNHostViewProps(
-  val matchContents: MutableState<Boolean?> = mutableStateOf(null)
+  val matchContents: MutableState<Boolean?> = mutableStateOf(null),
+  val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
 @SuppressLint("ViewConstructor")
@@ -86,23 +87,26 @@ internal class RNHostView(context: Context, appContext: AppContext) :
   @Composable
   override fun ComposableScope.Content() {
     val matchContents = props.matchContents.value ?: false
+    val scope: ComposableScope = this
 
     wrapperState.value?.let { wrapper ->
       val childView = childViewState.value ?: return@let
-      val modifier = if (matchContents) {
+      val sizingModifier = if (matchContents) {
         applySizeFromYogaNodeModifier(childView)
       } else {
         Modifier
           .fillMaxSize()
           .then(reportSizeToYogaNodeModifier())
       }
+      val modifiers = sizingModifier
+        .then(ModifierRegistry.applyModifiers(props.modifiers, appContext, scope, globalEventDispatcher))
 
       AndroidView(
         factory = {
           (wrapper.parent as? ViewGroup)?.removeView(wrapper)
           wrapper
         },
-        modifier = modifier
+        modifier = modifiers
       )
     }
   }
@@ -154,6 +158,7 @@ internal class RNHostView(context: Context, appContext: AppContext) :
           size.width.toDp().value.toDouble(),
           size.height.toDp().value.toDouble()
         )
+        flushPendingStateUpdates()
       }
     }
   }

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

@@ -0,0 +1,28 @@
+package expo.modules.ui
+
+import android.view.View
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.Event
+
+// Workaround helper that triggers a synchronous event to flush a pending
+// shadow-node state update in the current event beat. Mirrors iOS's
+// `EventQueue::UpdateMode::unstable_Immediate`, which Android does not expose
+// to Java/Kotlin as of now.
+// TODO: Remove when a synchronous state update API is exposed on Android.
+// https://github.com/facebook/react-native/pull/56311
+internal fun View.flushPendingStateUpdates() {
+  val reactContext = context as? ReactContext ?: return
+  val surfaceId = UIManagerHelper.getSurfaceId(this)
+  UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)
+    ?.dispatchEvent(SyncFlushEvent(surfaceId, id))
+}
+
+private class SyncFlushEvent(surfaceId: Int, viewTag: Int) : Event<SyncFlushEvent>(surfaceId, viewTag) {
+  override fun getEventName(): String = "topExpoUISyncFlush"
+  override fun getEventData(): WritableMap = Arguments.createMap()
+  override fun canCoalesce(): Boolean = true
+  override fun experimental_isSynchronous(): Boolean = true
+}

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/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")

package/assets/keyboard_arrow_down.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M480,616L240,376L296,320L480,504L664,320L720,376L480,616Z"/>
+</vector>

package/build/State/useNativeState.d.ts

@@ -5,11 +5,40 @@ import { type SharedObject } from 'expo-modules-core';
  */
 export type ObservableState<T> = SharedObject & {
     /**
-     * The current value. Reads are safe from any thread; prefer writing from a worklet
-     * so the update runs on the native UI thread. Updating state from the JS thread
-     * might show a development warning.
+     * The current value.
+     *
+     * Writes from a UI worklet are synchronous and immediately readable. Writes
+     * from the JS thread are scheduled to the UI thread asynchronously, the new value is not readable until the update has been
+     * applied. Prefer writing from a worklet when you need synchronous updates
      */
     value: T;
+    /**
+     * A single listener invoked on the native UI runtime whenever the value changes
+     * (after iOS `didSet` and Android's setter). Assigning replaces the previous
+     * listener; assign `null` to clear. The initial value does not fire `onChange`.
+     *
+     * The callback must be a worklet so it can run synchronously on the UI thread.
+     * Attach it inside `useEffect` and clear it in the cleanup so the listener
+     * lifecycle matches the component lifecycle.
+     *
+     * @example
+     * ```tsx
+     * const state = useNativeState(0);
+     *
+     * useEffect(() => {
+     *   state.onChange = (value) => {
+     *     'worklet';
+     *     console.log('changed to', value);
+     *   };
+     *   return () => {
+     *     state.onChange = null;
+     *   };
+     * }, []);
+     * ```
+     */
+    onChange: {
+        listener(value: T): void;
+    }['listener'] | null;
 };
 /**
  * Creates an observable native state that is automatically cleaned up when the