@expo/ui 55.0.0-preview.6 → 55.0.0

package/CHANGELOG.md

@@ -10,19 +10,39 @@
 
 ### 💡 Others
 
+## 55.0.0 — 2026-02-25
+
+### 🎉 New features
+
+- [iOS] Added `ConfirmationDialog` component. ([#43366](https://github.com/expo/expo/pull/43366) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] Added `monospacedDigit` modifier. ([#43328](https://github.com/expo/expo/pull/43328) by [@axeelz](https://github.com/axeelz))
+
+## 55.0.0-preview.7 — 2026-02-20
+
+### 🎉 New features
+
+- [iOS] Added per-axis `scaleEffect` support (`{ x, y }`) to view modifiers. ([#43228](https://github.com/expo/expo/pull/43228) by [@ramonclaudio](https://github.com/ramonclaudio))
+
+### 💡 Others
+
+- [jetpack-compose] Added more views and modifiers. ([#42734](https://github.com/expo/expo/pull/42734) by [@kudo](https://github.com/kudo))
+
 ## 55.0.0-preview.6 — 2026-02-16
 
 ### 🎉 New features
 
 - [iOS] - Support `Section` `footer` prop with `title` prop. ([#42966](https://github.com/expo/expo/pull/42966) by [@nishan](https://github.com/intergalacticspacehighway))
 - [iOS] Added `contentTransition` modifier. ([#42980](https://github.com/expo/expo/pull/42980) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] Added `ScrollView` component. ([#43162](https://github.com/expo/expo/pull/43162) by [@nishan](https://github.com/intergalacticspacehighway))
 - [iOS] Added `selection` and `onSelectionChange` to `presentationDetents` modifier for programmatic control of bottom sheet detents. ([#42910](https://github.com/expo/expo/pull/42910) by [@nishan](https://github.com/intergalacticspacehighway))
 
 ### 🐛 Bug fixes
 
+- [iOS] Fix `ColorPicker` `onSelectionChange` callback never firing due to native event name mismatch. ([#43180](https://github.com/expo/expo/pull/43180) by [@nishan](https://github.com/intergalacticspacehighway))
 - [iOS] Fix `clipShape` and `mask` modifiers silently falling through to `Rectangle()` for `capsule` and `ellipse` shapes. ([#43158](https://github.com/expo/expo/pull/43158) by [@ramonclaudio](https://github.com/ramonclaudio))
 - [iOS] Fix rendering `0` in SwiftUI Text. ([#43036](https://github.com/expo/expo/pull/43036) by [@jakex7](https://github.com/jakex7))
 - [iOS] Set initial state in `init` instead of `onAppear` in `DatePicker`, `Section`, `DisclosureGroup`, `Popover`, and `ColorPicker` components. ([#42933](https://github.com/expo/expo/pull/42933) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] Fix `foregroundStyle` hierarchical style not being applied correctly. ([#43233](https://github.com/expo/expo/pull/43233) by [@nishan](https://github.com/intergalacticspacehighway))
 
 ## 55.0.0-preview.5 — 2026-02-08
 

package/android/build.gradle

@@ -12,13 +12,14 @@ apply plugin: 'expo-module-gradle-plugin'
 apply plugin: 'org.jetbrains.kotlin.plugin.compose'
 
 group = 'expo.modules.ui'
-version = '55.0.0-preview.6'
+version = '55.0.0'
 
 android {
   namespace "expo.modules.ui"
   defaultConfig {
     versionCode 1
-    versionName "55.0.0-preview.6"
+    versionName "55.0.0"
+    testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
   }
   buildFeatures {
     compose true
@@ -26,14 +27,32 @@ android {
   lintOptions {
     abortOnError false
   }
+  testOptions {
+    unitTests {
+      includeAndroidResources = true
+    }
+  }
 }
 
 dependencies {
-  implementation 'androidx.compose.foundation:foundation-android:1.9.1'
-  implementation 'androidx.compose.ui:ui-android:1.9.1'
-  implementation "androidx.compose.material3:material3:1.5.0-alpha08"
-  implementation 'androidx.compose.material3:material3-android:1.5.0-alpha08'
-  implementation 'androidx.lifecycle:lifecycle-runtime:2.9.3'
+  implementation 'com.facebook.react:react-android'
+
+  implementation 'androidx.compose.foundation:foundation-android:1.10.2'
+  implementation 'androidx.compose.ui:ui-android:1.10.2'
+  implementation "androidx.compose.material3:material3:1.5.0-alpha13"
+  implementation 'androidx.compose.material3:material3-android:1.5.0-alpha13'
+  implementation 'androidx.lifecycle:lifecycle-runtime:2.10.0'
   implementation 'androidx.fragment:fragment-ktx:1.8.9'
-  implementation "androidx.graphics:graphics-shapes:1.0.1"
+  implementation "androidx.graphics:graphics-shapes:1.1.0"
+  implementation "com.squareup.okhttp3:okhttp:4.9.2"
+  implementation "androidx.core:core-ktx:1.17.0"
+
+  // Testing
+  testImplementation 'junit:junit:4.13.2'
+  testImplementation 'com.google.truth:truth:1.4.5'
+  testImplementation 'org.robolectric:robolectric:4.16.1'
+  testImplementation 'androidx.test:core:1.7.0'
+  testImplementation 'androidx.test:runner:1.7.0'
+  testImplementation 'com.squareup.okhttp3:mockwebserver:4.9.2'
+  testImplementation 'org.jetbrains.kotlinx:kotlinx-coroutines-test:1.10.2'
 }

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

@@ -0,0 +1,26 @@
+package expo.modules.ui
+
+import androidx.compose.material3.BasicAlertDialog
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.views.ComposableScope
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+
+data class BasicAlertDialogProps(
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun FunctionalComposableScope.BasicAlertDialogContent(
+  props: BasicAlertDialogProps,
+  onDismissRequest: () -> Unit
+) {
+  BasicAlertDialog(
+    onDismissRequest = { onDismissRequest() },
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  ) {
+    Children(ComposableScope())
+  }
+}

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

@@ -1,54 +1,29 @@
+@file:OptIn(ExperimentalMaterial3Api::class)
+
 package expo.modules.ui
 
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import expo.modules.kotlin.records.Field
-import expo.modules.kotlin.records.Record
 import expo.modules.kotlin.views.ComposableScope
 import expo.modules.kotlin.views.ComposeProps
 import expo.modules.kotlin.views.FunctionalComposableScope
-import java.io.Serializable
-
-open class IsOpenedChangeEvent(
-  @Field open val isOpened: Boolean = false
-) : Record, Serializable
-
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun BottomSheetComposable(skipPartiallyExpanded: Boolean, isOpened: Boolean, onIsOpenedChange: (Boolean) -> Unit, content: @Composable () -> Unit) {
-  val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded)
 
-  if (isOpened) {
-    ModalBottomSheet(
-      sheetState = sheetState,
-      modifier = Modifier.fillMaxHeight(),
-      onDismissRequest = { onIsOpenedChange(false) }
-    ) {
-      content()
-    }
-  }
-}
-
-data class BottomSheetProps(
-  val isOpened: Boolean = false,
+data class ModalBottomSheetProps(
   val skipPartiallyExpanded: Boolean = false,
   val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
 @Composable
-fun FunctionalComposableScope.BottomSheetContent(props: BottomSheetProps, onIsOpenedChange: (IsOpenedChangeEvent) -> Unit) {
-  Box {
-    BottomSheetComposable(
-      props.skipPartiallyExpanded,
-      props.isOpened,
-      onIsOpenedChange = { value -> onIsOpenedChange(IsOpenedChangeEvent(value)) }
-    ) {
-      Children(ComposableScope())
-    }
+fun FunctionalComposableScope.ModalBottomSheetContent(props: ModalBottomSheetProps, onDismissRequest: () -> Unit) {
+  val sheetState = rememberModalBottomSheetState(props.skipPartiallyExpanded)
+
+  ModalBottomSheet(
+    sheetState = sheetState,
+    onDismissRequest = { onDismissRequest() },
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  ) {
+    Children(ComposableScope())
   }
 }

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

@@ -0,0 +1,72 @@
+package expo.modules.ui
+
+import android.graphics.Color
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.ElevatedCard
+import androidx.compose.material3.OutlinedCard
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.views.ComposableScope
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+import expo.modules.kotlin.views.with
+
+data class CardElementColors(
+  @Field val containerColor: Color? = null,
+  @Field val contentColor: Color? = null
+) : Record
+
+data class CardProps(
+  val variant: String = "default",
+  val color: Color? = null,
+  val elementColors: CardElementColors? = null,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.CardContent(props: CardProps) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+
+  val colors = when {
+    props.elementColors != null -> CardDefaults.cardColors(
+      containerColor = props.elementColors.containerColor?.compose ?: androidx.compose.ui.graphics.Color.Unspecified,
+      contentColor = props.elementColors.contentColor?.compose ?: androidx.compose.ui.graphics.Color.Unspecified
+    )
+    props.color != null -> CardDefaults.cardColors(
+      containerColor = props.color.compose
+    )
+    else -> CardDefaults.cardColors()
+  }
+
+  val content: @Composable ColumnScope.() -> Unit = {
+    val scope = ComposableScope().with(columnScope = this)
+    Children(scope)
+  }
+
+  when (props.variant) {
+    "elevated" -> {
+      ElevatedCard(
+        modifier = modifier,
+        colors = colors,
+        content = content
+      )
+    }
+    "outlined" -> {
+      OutlinedCard(
+        modifier = modifier,
+        colors = colors,
+        content = content
+      )
+    }
+    else -> {
+      Card(
+        modifier = modifier,
+        colors = colors,
+        content = content
+      )
+    }
+  }
+}

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

@@ -1,5 +1,3 @@
-@file:OptIn(EitherType::class)
-
 package expo.modules.ui
 
 import androidx.compose.foundation.gestures.TargetedFlingBehavior
@@ -12,7 +10,6 @@ import androidx.compose.material3.carousel.rememberCarouselState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.unit.dp
 import androidx.core.view.size
-import expo.modules.kotlin.apifeatures.EitherType
 import expo.modules.kotlin.records.Field
 import expo.modules.kotlin.records.Record
 import expo.modules.kotlin.types.Either
@@ -110,7 +107,7 @@ fun FunctionalComposableScope.CarouselContent(props: CarouselProps) {
     HorizontalMultiBrowseCarousel(
       state = carouselState,
       preferredItemWidth = preferredItemWidth,
-      modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope),
+      modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
       itemSpacing = itemSpacing,
       flingBehavior = flingBehavior,
       minSmallItemWidth = minSmallItemWidth,
@@ -126,7 +123,7 @@ fun FunctionalComposableScope.CarouselContent(props: CarouselProps) {
     HorizontalUncontainedCarousel(
       state = carouselState,
       itemWidth = itemWidth,
-      modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope),
+      modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
       itemSpacing = itemSpacing,
       flingBehavior = flingBehavior,
       contentPadding = contentPadding

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

@@ -1,176 +1,137 @@
+@file:OptIn(ExperimentalMaterial3ExpressiveApi::class, ExperimentalLayoutApi::class)
+
 package expo.modules.ui
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
-import androidx.compose.material3.Text
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.FloatingToolbarDefaults
+import androidx.compose.material3.FloatingToolbarExitDirection
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.sp
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import expo.modules.kotlin.types.Enumerable
 import expo.modules.kotlin.views.ComposableScope
 import expo.modules.kotlin.views.ComposeProps
 import expo.modules.kotlin.views.FunctionalComposableScope
 import expo.modules.kotlin.views.with
-import android.graphics.Color as AndroidColor
-
-enum class HorizontalArrangement(val value: String) : Enumerable {
-  START("start"),
-  END("end"),
-  CENTER("center"),
-  SPACE_BETWEEN("spaceBetween"),
-  SPACE_AROUND("spaceAround"),
-  SPACE_EVENLY("spaceEvenly");
-
-  fun toComposeArrangement(): Arrangement.Horizontal {
-    return when (this) {
-      START -> Arrangement.Start
-      END -> Arrangement.End
-      CENTER -> Arrangement.Center
-      SPACE_BETWEEN -> Arrangement.SpaceBetween
-      SPACE_AROUND -> Arrangement.SpaceAround
-      SPACE_EVENLY -> Arrangement.SpaceEvenly
-    }
-  }
-}
-
-enum class VerticalArrangement(val value: String) : Enumerable {
+import expo.modules.kotlin.views.withIf
+import expo.modules.ui.convertibles.HorizontalAlignment
+import expo.modules.ui.convertibles.HorizontalArrangement
+import expo.modules.ui.convertibles.VerticalAlignment
+import expo.modules.ui.convertibles.ContentAlignment
+import expo.modules.ui.convertibles.VerticalArrangement
+import expo.modules.ui.convertibles.toComposeArrangement
+
+enum class FloatingToolbarExitAlwaysScrollBehavior(val value: String) : Enumerable {
   TOP("top"),
   BOTTOM("bottom"),
-  CENTER("center"),
-  SPACE_BETWEEN("spaceBetween"),
-  SPACE_AROUND("spaceAround"),
-  SPACE_EVENLY("spaceEvenly");
-
-  fun toComposeArrangement(): Arrangement.Vertical {
-    return when (this) {
-      TOP -> Arrangement.Top
-      BOTTOM -> Arrangement.Bottom
-      CENTER -> Arrangement.Center
-      SPACE_BETWEEN -> Arrangement.SpaceBetween
-      SPACE_AROUND -> Arrangement.SpaceAround
-      SPACE_EVENLY -> Arrangement.SpaceEvenly
-    }
-  }
-}
-
-enum class HorizontalAlignment(val value: String) : Enumerable {
   START("start"),
-  END("end"),
-  CENTER("center");
+  END("end");
 
-  fun toComposeAlignment(): Alignment.Horizontal {
+  fun toComposeExitDirection(): FloatingToolbarExitDirection {
     return when (this) {
-      START -> Alignment.Start
-      END -> Alignment.End
-      CENTER -> Alignment.CenterHorizontally
-    }
-  }
-}
-
-enum class VerticalAlignment(val value: String) : Enumerable {
-  TOP("top"),
-  BOTTOM("bottom"),
-  CENTER("center");
-
-  fun toComposeAlignment(): Alignment.Vertical {
-    return when (this) {
-      TOP -> Alignment.Top
-      BOTTOM -> Alignment.Bottom
-      CENTER -> Alignment.CenterVertically
+      TOP -> FloatingToolbarExitDirection.Top
+      BOTTOM -> FloatingToolbarExitDirection.Bottom
+      START -> FloatingToolbarExitDirection.Start
+      END -> FloatingToolbarExitDirection.End
     }
   }
 }
 
 data class LayoutProps(
-  val horizontalArrangement: HorizontalArrangement = HorizontalArrangement.START,
-  val verticalArrangement: VerticalArrangement = VerticalArrangement.TOP,
-  val horizontalAlignment: HorizontalAlignment = HorizontalAlignment.START,
-  val verticalAlignment: VerticalAlignment = VerticalAlignment.TOP,
+  val horizontalArrangement: HorizontalArrangement? = null,
+  val verticalArrangement: VerticalArrangement? = null,
+  val horizontalAlignment: HorizontalAlignment? = null,
+  val verticalAlignment: VerticalAlignment? = null,
+  val contentAlignment: ContentAlignment? = null,
+  val floatingToolbarExitAlwaysScrollBehavior: FloatingToolbarExitAlwaysScrollBehavior? = null,
   val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
 @Composable
 internal fun FunctionalComposableScope.RowContent(props: LayoutProps) {
+  val scrollBehavior = props.floatingToolbarExitAlwaysScrollBehavior
+    ?.toComposeExitDirection()
+    ?.let {
+      FloatingToolbarDefaults.exitAlwaysScrollBehavior(exitDirection = it)
+    }
   Row(
-    horizontalArrangement = props.horizontalArrangement.toComposeArrangement(),
-    verticalAlignment = props.verticalAlignment.toComposeAlignment(),
-    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope)
+    horizontalArrangement = props.horizontalArrangement?.toComposeArrangement() ?: Arrangement.Start,
+    verticalAlignment = props.verticalAlignment?.toComposeAlignment() ?: Alignment.Top,
+    modifier = ModifierRegistry
+      .applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+      .then(if (scrollBehavior != null) Modifier.nestedScroll(scrollBehavior) else Modifier)
   ) {
-    Children(ComposableScope().with(rowScope = this@Row))
+    val scope = ComposableScope()
+      .with(rowScope = this@Row)
+      .withIf(scrollBehavior != null) {
+        with(nestedScrollConnection = scrollBehavior)
+      }
+    Children(scope)
   }
 }
 
 @Composable
-internal fun FunctionalComposableScope.ColumnContent(props: LayoutProps) {
-  Column(
-    verticalArrangement = props.verticalArrangement.toComposeArrangement(),
-    horizontalAlignment = props.horizontalAlignment.toComposeAlignment(),
-    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope)
+internal fun FunctionalComposableScope.FlowRowContent(props: LayoutProps) {
+  FlowRow(
+    horizontalArrangement = props.horizontalArrangement?.toComposeArrangement() ?: Arrangement.Start,
+    verticalArrangement = props.verticalArrangement?.toComposeArrangement() ?: Arrangement.Top,
+    modifier = ModifierRegistry
+      .applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
   ) {
-    Children(ComposableScope().with(columnScope = this@Column))
+    val scope = ComposableScope()
+      .with(rowScope = this@FlowRow)
+    Children(scope)
   }
 }
 
 @Composable
-fun FunctionalComposableScope.BoxContent(props: LayoutProps) {
-  Box(
-    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope)
+internal fun FunctionalComposableScope.ColumnContent(props: LayoutProps) {
+  val scrollBehavior = props.floatingToolbarExitAlwaysScrollBehavior
+    ?.toComposeExitDirection()
+    ?.let {
+      FloatingToolbarDefaults.exitAlwaysScrollBehavior(exitDirection = it)
+    }
+  Column(
+    verticalArrangement = props.verticalArrangement?.toComposeArrangement() ?: Arrangement.Top,
+    horizontalAlignment = props.horizontalAlignment?.toComposeAlignment() ?: Alignment.Start,
+    modifier = ModifierRegistry
+      .applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+      .then(if (scrollBehavior != null) Modifier.nestedScroll(scrollBehavior) else Modifier)
   ) {
-    Children(ComposableScope().with(boxScope = this@Box))
+    val scope = ComposableScope()
+      .with(columnScope = this@Column)
+      .withIf(scrollBehavior != null) {
+        with(nestedScrollConnection = scrollBehavior)
+      }
+    Children(scope)
   }
 }
 
-enum class TextFontWeight(val value: String) : Enumerable {
-  NORMAL("normal"),
-  BOLD("bold"),
-  W100("100"),
-  W200("200"),
-  W300("300"),
-  W400("400"),
-  W500("500"),
-  W600("600"),
-  W700("700"),
-  W800("800"),
-  W900("900");
-
-  fun toComposeFontWeight(): FontWeight {
-    return when (this) {
-      NORMAL -> FontWeight.Normal
-      BOLD -> FontWeight.Bold
-      W100 -> FontWeight.W100
-      W200 -> FontWeight.W200
-      W300 -> FontWeight.W300
-      W400 -> FontWeight.W400
-      W500 -> FontWeight.W500
-      W600 -> FontWeight.W600
-      W700 -> FontWeight.W700
-      W800 -> FontWeight.W800
-      W900 -> FontWeight.W900
+@Composable
+fun FunctionalComposableScope.BoxContent(props: LayoutProps) {
+  val scrollBehavior = props.floatingToolbarExitAlwaysScrollBehavior
+    ?.toComposeExitDirection()
+    ?.let {
+      FloatingToolbarDefaults.exitAlwaysScrollBehavior(exitDirection = it)
     }
+  Box(
+    contentAlignment = props.contentAlignment?.toComposeAlignment() ?: Alignment.TopStart,
+    modifier = ModifierRegistry
+      .applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+      .then(if (scrollBehavior != null) Modifier.nestedScroll(scrollBehavior) else Modifier)
+  ) {
+    val scope = ComposableScope()
+      .with(boxScope = this@Box)
+      .withIf(scrollBehavior != null) {
+        with(nestedScrollConnection = scrollBehavior)
+      }
+    Children(scope)
   }
 }
-
-data class TextProps(
-  val text: String = "",
-  val color: AndroidColor? = null,
-  val fontSize: Float = 16f,
-  val fontWeight: TextFontWeight = TextFontWeight.NORMAL,
-  val modifiers: ModifierList = emptyList()
-) : ComposeProps
-
-@Composable
-fun FunctionalComposableScope.TextContent(props: TextProps) {
-  Text(
-    text = props.text,
-    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope),
-    color = colorToComposeColor(props.color),
-    style = TextStyle(
-      fontSize = props.fontSize.sp,
-      fontWeight = props.fontWeight.toComposeFontWeight()
-    )
-  )
-}

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

@@ -62,11 +62,11 @@ data class DateTimePickerProps(
 @Composable
 fun FunctionalComposableScope.DateTimePickerContent(props: DateTimePickerProps, onDateSelected: (DatePickerResult) -> Unit) {
   if (props.displayedComponents == DisplayedComponents.HOUR_AND_MINUTE) {
-    ExpoTimePicker(props = props, modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope)) {
+    ExpoTimePicker(props = props, modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)) {
       onDateSelected(it)
     }
   } else {
-    ExpoDatePicker(props = props, modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope)) {
+    ExpoDatePicker(props = props, modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)) {
       onDateSelected(it)
     }
   }

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

@@ -11,5 +11,5 @@ data class DividerProps(
 
 @Composable
 fun FunctionalComposableScope.DividerContent(props: DividerProps) {
-  HorizontalDivider(modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope))
+  HorizontalDivider(modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher))
 }

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

@@ -0,0 +1,53 @@
+@file:OptIn(ExperimentalMaterial3Api::class)
+
+package expo.modules.ui
+
+import androidx.compose.foundation.text.input.rememberTextFieldState
+import androidx.compose.material3.DockedSearchBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.SearchBarDefaults
+import androidx.compose.material3.rememberSearchBarState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.snapshotFlow
+import expo.modules.kotlin.views.ComposableScope
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+
+data class DockedSearchBarProps(
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.DockedSearchBarContent(
+  props: DockedSearchBarProps,
+  onQueryChange: (GenericEventPayload1<String>) -> Unit
+) {
+  val searchBarState = rememberSearchBarState()
+  val textFieldState = rememberTextFieldState()
+
+  LaunchedEffect(Unit) {
+    snapshotFlow { textFieldState.text.toString() }
+      .collect { onQueryChange(GenericEventPayload1(it)) }
+  }
+
+  DockedSearchBar(
+    expanded = false,
+    onExpandedChange = {},
+    inputField = @Composable {
+      SearchBarDefaults.InputField(
+        searchBarState = searchBarState,
+        textFieldState = textFieldState,
+        onSearch = {},
+        placeholder = {
+          Children(ComposableScope(), filter = { isSlotWithName(it, "placeholder") })
+        },
+        leadingIcon = {
+          Children(ComposableScope(), filter = { isSlotWithName(it, "leadingIcon") })
+        }
+      )
+    },
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  ) {}
+}