@expo/ui 55.0.0-beta.3 → 55.0.0-preview.4

package/CHANGELOG.md

@@ -10,6 +10,17 @@
 
 ### 💡 Others
 
+## 55.0.0-preview.4 — 2026-02-03
+
+### 🛠 Breaking changes
+
+- [iOS] Renamed `ignoreSafeAreaKeyboardInsets` to `ignoreSafeArea` on `Host` component. It now accepts `'all'` or `'keyboard'` instead of a boolean. ([#42598](https://github.com/expo/expo/pull/42598) by [@nishan](https://github.com/intergalacticspacehighway))
+
+### 💡 Others
+
+- [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))
+
 ## 55.0.0-beta.3 — 2026-01-27
 
 _This version does not introduce any user-facing changes._

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 = '55.0.0-beta.3'
+version = '55.0.0-preview.4'
 
 android {
   namespace "expo.modules.ui"
   defaultConfig {
     versionCode 1
-    versionName "55.0.0-beta.3"
+    versionName "55.0.0-preview.4"
   }
   buildFeatures {
     compose true

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

@@ -4,10 +4,9 @@ import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import expo.modules.kotlin.records.Record
 import expo.modules.kotlin.views.ComposeProps
-import expo.modules.kotlin.views.ExpoViewComposableScope
+import expo.modules.kotlin.views.FunctionalComposableScope
 import java.io.Serializable
 
 open class AlertDialogButtonPressedEvent() : Record, Serializable
@@ -18,11 +17,11 @@ data class AlertDialogProps(
   val confirmButtonText: String? = null,
   val dismissButtonText: String? = null,
   val visible: Boolean = false,
-  val modifiers: List<ModifierConfig> = emptyList()
+  val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
 @Composable
-fun ExpoViewComposableScope.AlertDialogContent(
+fun FunctionalComposableScope.AlertDialogContent(
   props: AlertDialogProps,
   onDismissPressed: (AlertDialogButtonPressedEvent) -> Unit,
   onConfirmPressed: (AlertDialogButtonPressedEvent) -> Unit

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

@@ -11,7 +11,7 @@ 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.ExpoViewComposableScope
+import expo.modules.kotlin.views.FunctionalComposableScope
 import java.io.Serializable
 
 open class IsOpenedChangeEvent(
@@ -36,11 +36,12 @@ fun BottomSheetComposable(skipPartiallyExpanded: Boolean, isOpened: Boolean, onI
 
 data class BottomSheetProps(
   val isOpened: Boolean = false,
-  val skipPartiallyExpanded: Boolean = false
+  val skipPartiallyExpanded: Boolean = false,
+  val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
 @Composable
-fun ExpoViewComposableScope.BottomSheetContent(props: BottomSheetProps, onIsOpenedChange: (IsOpenedChangeEvent) -> Unit) {
+fun FunctionalComposableScope.BottomSheetContent(props: BottomSheetProps, onIsOpenedChange: (IsOpenedChangeEvent) -> Unit) {
   Box {
     BottomSheetComposable(
       props.skipPartiallyExpanded,

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

@@ -5,22 +5,21 @@ package expo.modules.ui
 import androidx.compose.foundation.gestures.TargetedFlingBehavior
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.carousel.CarouselDefaults
 import androidx.compose.material3.carousel.HorizontalMultiBrowseCarousel
 import androidx.compose.material3.carousel.HorizontalUncontainedCarousel
 import androidx.compose.material3.carousel.rememberCarouselState
-import androidx.compose.material3.carousel.CarouselDefaults
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import androidx.core.view.size
 import expo.modules.kotlin.apifeatures.EitherType
-import expo.modules.kotlin.types.Enumerable
 import expo.modules.kotlin.records.Field
 import expo.modules.kotlin.records.Record
 import expo.modules.kotlin.types.Either
-import androidx.core.view.size
-import expo.modules.kotlin.views.ComposeProps
-import expo.modules.kotlin.views.ExpoViewComposableScope
+import expo.modules.kotlin.types.Enumerable
 import expo.modules.kotlin.views.ComposableScope
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
 
 enum class CarouselVariant(val value: String) : Enumerable {
   MULTI_BROWSE("multiBrowse"),
@@ -69,14 +68,14 @@ fun paddingValuesFromEither(either: Either<Float, PaddingValuesRecord>?): Paddin
 
 data class CarouselProps(
   val variant: CarouselVariant? = null,
-  val modifiers: List<ModifierConfig>? = null,
   val itemSpacing: Float? = null,
   val contentPadding: Either<Float, PaddingValuesRecord>? = null,
   val minSmallItemWidth: Float? = null,
   val maxSmallItemWidth: Float? = null,
   val flingBehavior: FlingBehaviorType? = null,
   val preferredItemWidth: Float? = null,
-  val itemWidth: Float? = null
+  val itemWidth: Float? = null,
+  val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
 const val DEFAULT_MIN_SMALL_ITEM_WIDTH = 40f
@@ -86,7 +85,7 @@ const val DEFAULT_ITEM_WIDTH = 200f
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun ExpoViewComposableScope.CarouselContent(props: CarouselProps) {
+fun FunctionalComposableScope.CarouselContent(props: CarouselProps) {
   val variant = props.variant ?: CarouselVariant.MULTI_BROWSE
   val modifiers = props.modifiers ?: emptyList()
   val itemSpacing = (props.itemSpacing ?: 0f).dp
@@ -111,7 +110,7 @@ fun ExpoViewComposableScope.CarouselContent(props: CarouselProps) {
     HorizontalMultiBrowseCarousel(
       state = carouselState,
       preferredItemWidth = preferredItemWidth,
-      modifier = ModifierRegistry.applyModifiers(modifiers),
+      modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope),
       itemSpacing = itemSpacing,
       flingBehavior = flingBehavior,
       minSmallItemWidth = minSmallItemWidth,
@@ -127,7 +126,7 @@ fun ExpoViewComposableScope.CarouselContent(props: CarouselProps) {
     HorizontalUncontainedCarousel(
       state = carouselState,
       itemWidth = itemWidth,
-      modifier = ModifierRegistry.applyModifiers(modifiers),
+      modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope),
       itemSpacing = itemSpacing,
       flingBehavior = flingBehavior,
       contentPadding = contentPadding

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

@@ -1,8 +1,20 @@
 package expo.modules.ui
 
-import androidx.compose.foundation.layout.*
-import androidx.compose.material3.*
-import androidx.compose.runtime.*
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.material3.AssistChip
+import androidx.compose.material3.AssistChipDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.FilterChip
+import androidx.compose.material3.FilterChipDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.InputChip
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SuggestionChip
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -10,7 +22,7 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import expo.modules.kotlin.records.Record
 import expo.modules.kotlin.views.ComposeProps
-import expo.modules.kotlin.views.ExpoViewComposableScope
+import expo.modules.kotlin.views.FunctionalComposableScope
 import java.io.Serializable
 
 open class ChipPressedEvent : Record, Serializable
@@ -23,12 +35,13 @@ data class ChipProps(
   val iconSize: Int = 18,
   val textStyle: String = "labelSmall",
   val enabled: Boolean = true,
-  val selected: Boolean = false
+  val selected: Boolean = false,
+  val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun ExpoViewComposableScope.ChipContent(
+fun FunctionalComposableScope.ChipContent(
   props: ChipProps,
   onPress: (ChipPressedEvent) -> Unit,
   onDismiss: (ChipPressedEvent) -> Unit
@@ -133,7 +146,7 @@ fun ExpoViewComposableScope.ChipContent(
 @Composable
 private fun ChipText(label: String, textStyle: String = "labelSmall") {
   Box(
-    contentAlignment = Alignment.Center,
+    contentAlignment = Alignment.Center
   ) {
     Text(
       text = label,

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

@@ -1,6 +1,5 @@
 package expo.modules.ui
 
-import android.graphics.Color as AndroidColor
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -8,15 +7,15 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.sp
 import expo.modules.kotlin.types.Enumerable
-import expo.modules.kotlin.views.ComposeProps
 import expo.modules.kotlin.views.ComposableScope
-import expo.modules.kotlin.views.ExpoViewComposableScope
+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"),
@@ -91,35 +90,35 @@ data class LayoutProps(
   val verticalArrangement: VerticalArrangement = VerticalArrangement.TOP,
   val horizontalAlignment: HorizontalAlignment = HorizontalAlignment.START,
   val verticalAlignment: VerticalAlignment = VerticalAlignment.TOP,
-  val modifiers: List<ModifierConfig>? = emptyList()
+  val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
 @Composable
-fun ExpoViewComposableScope.RowContent(props: LayoutProps) {
+internal fun FunctionalComposableScope.RowContent(props: LayoutProps) {
   Row(
     horizontalArrangement = props.horizontalArrangement.toComposeArrangement(),
     verticalAlignment = props.verticalAlignment.toComposeAlignment(),
-    modifier = ModifierRegistry.applyModifiers(props.modifiers)
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope)
   ) {
     Children(ComposableScope().with(rowScope = this@Row))
   }
 }
 
 @Composable
-fun ExpoViewComposableScope.ColumnContent(props: LayoutProps) {
+internal fun FunctionalComposableScope.ColumnContent(props: LayoutProps) {
   Column(
     verticalArrangement = props.verticalArrangement.toComposeArrangement(),
     horizontalAlignment = props.horizontalAlignment.toComposeAlignment(),
-    modifier = ModifierRegistry.applyModifiers(props.modifiers)
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope)
   ) {
     Children(ComposableScope().with(columnScope = this@Column))
   }
 }
 
 @Composable
-fun ExpoViewComposableScope.BoxContent(props: LayoutProps) {
+fun FunctionalComposableScope.BoxContent(props: LayoutProps) {
   Box(
-    modifier = ModifierRegistry.applyModifiers(props.modifiers)
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope)
   ) {
     Children(ComposableScope().with(boxScope = this@Box))
   }
@@ -160,14 +159,14 @@ data class TextProps(
   val color: AndroidColor? = null,
   val fontSize: Float = 16f,
   val fontWeight: TextFontWeight = TextFontWeight.NORMAL,
-  val modifiers: List<ModifierConfig> = emptyList()
+  val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
 @Composable
-fun ExpoViewComposableScope.TextContent(props: TextProps) {
+fun FunctionalComposableScope.TextContent(props: TextProps) {
   Text(
     text = props.text,
-    modifier = ModifierRegistry.applyModifiers(props.modifiers),
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope),
     color = colorToComposeColor(props.color),
     style = TextStyle(
       fontSize = props.fontSize.sp,

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

@@ -18,7 +18,7 @@ import expo.modules.kotlin.records.Field
 import expo.modules.kotlin.records.Record
 import expo.modules.kotlin.types.Enumerable
 import expo.modules.kotlin.views.ComposeProps
-import expo.modules.kotlin.views.ExpoViewComposableScope
+import expo.modules.kotlin.views.FunctionalComposableScope
 import java.util.Calendar
 import java.util.Date
 import android.graphics.Color as AndroidColor
@@ -55,18 +55,18 @@ data class DateTimePickerProps(
   val showVariantToggle: Boolean = true,
   val is24Hour: Boolean = true,
   val color: AndroidColor? = null,
-  val modifiers: List<ModifierConfig> = emptyList()
+  val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun ExpoViewComposableScope.DateTimePickerContent(props: DateTimePickerProps, onDateSelected: (DatePickerResult) -> Unit) {
+fun FunctionalComposableScope.DateTimePickerContent(props: DateTimePickerProps, onDateSelected: (DatePickerResult) -> Unit) {
   if (props.displayedComponents == DisplayedComponents.HOUR_AND_MINUTE) {
-    ExpoTimePicker(props = props, modifier = ModifierRegistry.applyModifiers(props.modifiers)) {
+    ExpoTimePicker(props = props, modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope)) {
       onDateSelected(it)
     }
   } else {
-    ExpoDatePicker(props = props, modifier = ModifierRegistry.applyModifiers(props.modifiers)) {
+    ExpoDatePicker(props = props, modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope)) {
       onDateSelected(it)
     }
   }

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

@@ -2,16 +2,14 @@ package expo.modules.ui
 
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import expo.modules.kotlin.views.ComposeProps
-import expo.modules.kotlin.views.ExpoViewComposableScope
+import expo.modules.kotlin.views.FunctionalComposableScope
 
 data class DividerProps(
-  val modifiers: List<ModifierConfig> = emptyList()
+  val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
 @Composable
-fun ExpoViewComposableScope.DividerContent(props: DividerProps) {
-  HorizontalDivider(modifier = ModifierRegistry.applyModifiers(props.modifiers))
+fun FunctionalComposableScope.DividerContent(props: DividerProps) {
+  HorizontalDivider(modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope))
 }
-

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

@@ -3,7 +3,6 @@ package expo.modules.ui
 import androidx.compose.runtime.remember
 import expo.modules.kotlin.modules.Module
 import expo.modules.kotlin.modules.ModuleDefinition
-import expo.modules.kotlin.viewevent.EventDispatcher
 import expo.modules.kotlin.viewevent.getValue
 import expo.modules.ui.button.ButtonContent
 import expo.modules.ui.button.ButtonPressedEvent
@@ -20,7 +19,21 @@ class ExpoUIModule : Module() {
   override fun definition() = ModuleDefinition {
     Name("ExpoUI")
 
-    View("BottomSheetView", events = {
+    //region Views use expo-modules-core DSL for uncommon features
+
+    View(HostView::class) {
+      Events("onLayoutContent")
+
+      OnViewDidUpdateProps { view ->
+        view.onViewDidUpdateProps()
+      }
+    }
+
+    //endregion Views use expo-modules-core DSL for uncommon features
+
+    //region Expo UI views
+
+    ExpoUIView("BottomSheetView", events = {
       Events("onIsOpenedChange")
     }) { props: BottomSheetProps ->
       val onIsOpenedChange by remember { EventDispatcher<IsOpenedChangeEvent>() }
@@ -28,56 +41,56 @@ class ExpoUIModule : Module() {
     }
 
     // Defines a single view for now – a single choice segmented control
-    View("PickerView", events = {
+    ExpoUIView("PickerView", events = {
       Events("onOptionSelected")
     }) { props: PickerProps ->
       val onOptionSelected by remember { EventDispatcher<PickerOptionSelectedEvent>() }
       PickerContent(props) { onOptionSelected(it) }
     }
 
-    View("SwitchView", events = {
+    ExpoUIView("SwitchView", events = {
       Events("onValueChange")
     }) { props: SwitchProps ->
       val onValueChange by remember { EventDispatcher<ValueChangeEvent>() }
       SwitchContent(props) { onValueChange(it) }
     }
 
-    View("Button", events = {
+    ExpoUIView("Button", events = {
       Events("onButtonPressed")
     }) { props: ButtonProps ->
       val onButtonPressed by remember { EventDispatcher<ButtonPressedEvent>() }
       ButtonContent(props) { onButtonPressed(it) }
     }
 
-    View("IconButton", events = {
+    ExpoUIView("IconButton", events = {
       Events("onButtonPressed")
     }) { props: IconButtonProps ->
       val onButtonPressed by remember { EventDispatcher<ButtonPressedEvent>() }
       IconButtonContent(props) { onButtonPressed(it) }
     }
 
-    View("SliderView", events = {
+    ExpoUIView("SliderView", events = {
       Events("onValueChanged")
     }) { props: SliderProps ->
       SliderContent(props)
     }
 
-    View("ShapeView") { props: ShapeProps ->
+    ExpoUIView("ShapeView") { props: ShapeProps ->
       ShapeContent(props)
     }
 
-    View("DividerView") { props: DividerProps ->
+    ExpoUIView("DividerView") { props: DividerProps ->
       DividerContent(props)
     }
 
-    View("DateTimePickerView", events = {
+    ExpoUIView("DateTimePickerView", events = {
       Events("onDateSelected")
     }) { props: DateTimePickerProps ->
       val onDateSelected by remember { EventDispatcher<DatePickerResult>() }
       DateTimePickerContent(props) { onDateSelected(it) }
     }
 
-    View("ContextMenuView", events = {
+    ExpoUIView("ContextMenuView", events = {
       Events(
         "onContextMenuButtonPressed",
         "onContextMenuSwitchValueChanged",
@@ -95,7 +108,7 @@ class ExpoUIModule : Module() {
       )
     }
 
-    View("ProgressView") { props: ProgressProps ->
+    ExpoUIView("ProgressView") { props: ProgressProps ->
       ProgressContent(props)
     }
 
@@ -111,36 +124,27 @@ class ExpoUIModule : Module() {
       }
     }
 
-    View("BoxView") { props: LayoutProps ->
+    ExpoUIView("BoxView") { props: LayoutProps ->
       BoxContent(props)
     }
 
-    View("RowView") { props: LayoutProps ->
+    ExpoUIView("RowView") { props: LayoutProps ->
       RowContent(props)
     }
 
-    View("ColumnView") { props: LayoutProps ->
+    ExpoUIView("ColumnView") { props: LayoutProps ->
       ColumnContent(props)
     }
 
-    // HostView kept as class-based due to OnViewDidUpdateProps callback and custom measure logic
-    View(HostView::class) {
-      Events("onLayoutContent")
-
-      OnViewDidUpdateProps { view ->
-        view.onViewDidUpdateProps()
-      }
-    }
-
-    View("TextView") { props: TextProps ->
+    ExpoUIView("TextView") { props: TextProps ->
       TextContent(props)
     }
 
-    View("CarouselView") { props: CarouselProps ->
+    ExpoUIView("CarouselView") { props: CarouselProps ->
       CarouselContent(props)
     }
 
-    View("AlertDialogView", events = {
+    ExpoUIView("AlertDialogView", events = {
       Events(
         "onDismissPressed",
         "onConfirmPressed"
@@ -155,7 +159,7 @@ class ExpoUIModule : Module() {
       )
     }
 
-    View("ChipView", events = {
+    ExpoUIView("ChipView", events = {
       Events(
         "onPress",
         "onDismiss"
@@ -165,5 +169,7 @@ class ExpoUIModule : Module() {
       val onDismiss by remember { EventDispatcher<ChipPressedEvent>() }
       ChipContent(props, { onPress(it) }, { onDismiss(it) })
     }
+
+    //endregion Expo UI views
   }
 }