@expo/ui 0.2.0-beta.6 → 0.2.0-beta.8

package/CHANGELOG.md

@@ -10,23 +10,82 @@
 
 ### 💡 Others
 
-## 0.2.0-beta.6 — 2025-10-01
+## 0.2.0-beta.8 — 2025-11-06
+
+### 🛠 Breaking changes
+
+- [Android] Move all `jetpack-compose-primitives` components to `jetpack-compose` namespace. ([#40272](https://github.com/expo/expo/pull/40272) by [@aleqsio](https://github.com/aleqsio))
+
+### 🎉 New features
+
+- [iOS] Add `refreshable` modifier. ([#40201](https://github.com/expo/expo/pull/40201) by [@christianwooldridge](https://github.com/christianwooldridge))
+- [iOS] Add RTL support in swiftui. ([#40335](https://github.com/expo/expo/pull/40335) by [@kfirfitousi](https://github.com/kfirfitousi))
+- [Android] Add Carousel component. ([#40325](https://github.com/expo/expo/pull/40325) by [@aleqsio](https://github.com/aleqsio))
+- [iOS] Add `scrollDismissesKeyboard` modifier. ([#40201](https://github.com/expo/expo/pull/40201) by [@christianwooldridge](https://github.com/christianwooldridge))
+- [Android] Add Android BottomSheet ([#37553](https://github.com/expo/expo/pull/37553) by [@Jeroen-G](https://github.com/Jeroen-G))
+- [Android] Move all components to use Host ([#40244](https://github.com/expo/expo/pull/40244) by [@aleqsio](https://github.com/aleqsio))
+- [Android] Add support for modifiers in primitives, add clip modifier. ([#40164](https://github.com/expo/expo/pull/40164) by [@aleqsio](https://github.com/aleqsio))
+- Add scoped compose modifiers, move testID to modifiers. ([#39155](https://github.com/expo/expo/pull/39155) by [@aleqsio](https://github.com/aleqsio))
+- [Android] Add custom button shapes. ([#40163](https://github.com/expo/expo/pull/40163) by [@aleqsio](https://github.com/aleqsio))
+- [iOS] Add ref methods and onChangeFocus to TextField and SecureField. ([#39898](https://github.com/expo/expo/pull/39898) by [@aleqsio](https://github.com/aleqsio))
+- [iOS] Add SF symbol typings ([#39802](https://github.com/expo/expo/pull/39802) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] Add `scrollContentBackground` and `listRowBackground` modifier. ([#40195](https://github.com/expo/expo/pull/40195) by [@doombladeoff](https://github.com/doombladeoff))
+- Added `onAppear` and `onDisappear` modifiers to `swift-ui`. ([#40056](https://github.com/expo/expo/pull/40056) by [@kudo](https://github.com/kudo))
+- [iOS] Add Stepper component. ([#39813](https://github.com/expo/expo/pull/39813) by [@hryhoriiK97](https://github.com/hryhoriiK97))
+- [ios] Add text modifiers (`truncationMode`, `kerning`, `allowsTightening`, `textCase`, `underline`, `strikethrough`, `multilineTextAlignment`,`textSelection` and `lineSpacing`) ([#40282](https://github.com/expo/expo/pull/40282) by [@doombladeoff](https://github.com/doombladeoff))
+- [iOS] Added `header` and `footer` props for sections, support for collapsible sections, and headerProminence modifier ([#40340](https://github.com/expo/expo/pull/40340) by [@doombladeoff](https://github.com/doombladeoff))
+- [iOS] Add new modifiers (`listRowInsets`, `listSectionMargins`, `badgeProminence`, `badge`) ([#40329](https://github.com/expo/expo/pull/40329) by [@doombladeoff](https://github.com/doombladeoff))
+- Add Interpolated string support in button ([#40416](https://github.com/expo/expo/pull/40416) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+- [iOS] Added Popover component ([#40454](https://github.com/expo/expo/pull/40454) by [@doombladeoff](https://github.com/doombladeoff))
+- [iOS] Add RectangleMark and RuleMark support to Chart component ([#40046](https://github.com/expo/expo/pull/40046) by [@hryhoriiK97](https://github.com/hryhoriiK97))
+- Adds selection API in text field, autoFocus, onSubmit event and rounded rectangle (squircle) support in glassEffect. ([#40455](https://github.com/expo/expo/pull/40455) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+- [iOS] Add `font` modifier ([#40553](https://github.com/expo/expo/pull/40553) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] Add `getItemAsync` to `ShareLink` ([#40391](https://github.com/expo/expo/pull/40391) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+- [iOS] Add Grid component and modifiers `gridCellUnsizedAxes`, `gridCellColumns`, `gridColumnAlignment`, `gridCellAnchor` ([#40485](https://github.com/expo/expo/pull/40485) by [@doombladeoff](https://github.com/doombladeoff))
+- [iOS] Add `labelView` to LabeledContent component ([#40798](https://github.com/expo/expo/pull/40798) by [@focux](https://github.com/focux))
+- [iOS] - Add shape in `background` modifier and fix `foregroundStyle` modifer in `Label` ([#40748](https://github.com/expo/expo/pull/40748) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] - Add `systemImage` property to `Switch` component ([#40838](https://github.com/expo/expo/pull/40838) by [@focux](https://github.com/focux))
 
 ### 🐛 Bug fixes
 
-- [iOS] Add `buttonStyle` modifier. ([#40119](https://github.com/expo/expo/pull/40119) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] remove empty section header spacing when no title provided ([#40296](https://github.com/expo/expo/pull/40296) by [@dylancom](https://github.com/dylancom))
+- [iOS] Merge edge and axis paddings correctly in PaddingModifier ([#40414](https://github.com/expo/expo/pull/40414) by [@lucabc2000](https://github.com/lucabc2000))
+- [iOS] Enhance PaddingModifier to support default SwiftUI padding when no custom values are provided ([#40715](https://github.com/expo/expo/pull/40715) by [@betomoedano](https://github.com/betomoedano))
 
-## 0.2.0-beta.5 — 2025-10-01
+### 💡 Others
+
+- [docs] Improve consistency and remove invalid platform checks. ([#40362](https://github.com/expo/expo/pull/40362) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+- Refactored `CommonViewProps` to `UIBaseViewProps` and reduced duplicated code. ([#40492](https://github.com/expo/expo/pull/40492) by [@kudo](https://github.com/kudo))
+
+## 0.2.0-beta.7 - 2025-10-09
+
+### 🎉 New features
+
+- [iOS] Adds `controlSize` prop to Button([#40030](https://github.com/expo/expo/pull/40030) by [@betomoedano](https://github.com/betomoedano))
+- [iOS] Add Divider component. ([#40283](https://github.com/expo/expo/pull/40283) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+
+### 💡 Others
+
+- [iOS] Make `ContextMenu` more composable. ([#40254](https://github.com/expo/expo/pull/40254) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+
+## 0.2.0-beta.6 - 2025-10-01
+
+### 🐛 Bug fixes
+
+- [iOS] Add `buttonStyle` modifier. ([#40119](https://github.com/expo/expo/pull/40119) by [@nishan](https://github.com/intergalacticspacehighway)) ([#40119](https://github.com/expo/expo/pull/40119) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+
+## 0.2.0-beta.5 - 2025-10-01
 
 ### 🎉 New features
 
 - [iOS] Add `variableValue` prop to Image component for SF Symbols with variable color support ([#39852](https://github.com/expo/expo/pull/39852) by [@morellodev](https://github.com/morellodev))
-- [iOS] Adds `Rectangle`, `RoundedRectangle`, `UnevenRoundedRectangle`, `Circle`, `Ellipse`, `Capsule` shape components and `fill` modifier ([#39793](https://github.com/expo/expo/pull/39793) by [@nishan](https://github.com/intergalacticspacehighway))
-- [iOS] Add `ignoreSafeArea` modifier ([#39804](https://github.com/expo/expo/pull/39804) by [@nishan](https://github.com/intergalacticspacehighway))
-- [iOS] Add `presentationDetents`, `presentationDragIndicator`, `interactiveDismissDisabled` props to `BottomSheet`. ([#39952](https://github.com/expo/expo/pull/39952) by [@nishan](https://github.com/intergalacticspacehighway))
-- [iOS] Add `ConcentricRectangle` shape ([#39907](https://github.com/expo/expo/pull/39907) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] Adds `Rectangle`, `RoundedRectangle`, `UnevenRoundedRectangle`, `Circle`, `Ellipse`, `Capsule` shape components and `fill` modifier ([#39793](https://github.com/expo/expo/pull/39793) by [@nishan](https://github.com/intergalacticspacehighway)) ([#39793](https://github.com/expo/expo/pull/39793) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+- [iOS] Add `ignoreSafeArea` modifier ([#39804](https://github.com/expo/expo/pull/39804) by [@nishan](https://github.com/intergalacticspacehighway)) ([#39804](https://github.com/expo/expo/pull/39804) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+- [iOS] Add `presentationDetents`, `presentationDragIndicator`, `interactiveDismissDisabled` props to `BottomSheet`. ([#39952](https://github.com/expo/expo/pull/39952) by [@nishan](https://github.com/intergalacticspacehighway)) ([#39952](https://github.com/expo/expo/pull/39952) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+- [iOS] Add `ConcentricRectangle` shape ([#39907](https://github.com/expo/expo/pull/39907) by [@nishan](https://github.com/intergalacticspacehighway)) ([#39907](https://github.com/expo/expo/pull/39907) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
 - [iOS] Add disabled modifier for swiftui. ([#39864](https://github.com/expo/expo/pull/39864) by [@hryhoriiK97](https://github.com/hryhoriiK97))
-- Add Interpolated string support in button ([#39932](https://github.com/expo/expo/pull/39932) by [@nishan](https://github.com/intergalacticspacehighway))
+- Add Interpolated string support in button ([#39932](https://github.com/expo/expo/pull/39932) by [@nishan](https://github.com/intergalacticspacehighway)) ([#39932](https://github.com/expo/expo/pull/39932) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+- [iOS] list section spacing modifier ([#40291](https://github.com/expo/expo/pull/40291) by [@dylancom](https://github.com/dylancom))
 
 ### 🐛 Bug fixes
 
@@ -34,16 +93,13 @@
 
 ### 💡 Others
 
-- [ios] - Set host dimension synchronously on native ([#40017](https://github.com/expo/expo/pull/40017) by [@nishan](https://github.com/intergalacticspacehighway))
-
-## 0.2.0-beta.4 — 2025-09-22
-
-### 🎉 New features
+- [ios] - Set host dimension synchronously on native ([#40017](https://github.com/expo/expo/pull/40017) by [@nishan](https://github.com/intergalacticspacehighway)) ([#40017](https://github.com/expo/expo/pull/40017) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
 
-- Add SF symbol typings ([#39802](https://github.com/expo/expo/pull/39802) by [@nishan](https://github.com/intergalacticspacehighway))
+## 0.2.0-beta.4 - 2025-09-22
 
 ### 🐛 Bug fixes
 
+- [iOS] Add correct color value types. ([#39899](https://github.com/expo/expo/pull/39899) by [@EvanBacon](https://github.com/EvanBacon))
 - [iOS] Updated description for glass button styles availability ([#39736](https://github.com/expo/expo/pull/39736) by [@terijaki](https://github.com/terijaki))
 
 ## 0.2.0-beta.3 — 2025-09-16

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 = '0.2.0-beta.6'
+version = '0.2.0-beta.8'
 
 android {
   namespace "expo.modules.ui"
   defaultConfig {
     versionCode 1
-    versionName "0.2.0-beta.6"
+    versionName "0.2.0-beta.8"
   }
   buildFeatures {
     compose true
@@ -29,11 +29,11 @@ android {
 }
 
 dependencies {
-  implementation 'androidx.compose.foundation:foundation-android:1.7.6'
-  implementation 'androidx.compose.ui:ui-android:1.7.6'
-  implementation "androidx.compose.material3:material3:1.3.1"
-  implementation 'androidx.lifecycle:lifecycle-runtime:2.8.7'
-  implementation 'androidx.fragment:fragment-ktx:1.8.5'
-  implementation 'androidx.compose.material3:material3-android:1.3.1'
+  implementation 'androidx.compose.foundation:foundation-android:1.9.1'
+  implementation 'androidx.compose.ui:ui-android:1.9.1'
+  implementation "androidx.compose.material3:material3:1.3.2"
+  implementation 'androidx.lifecycle:lifecycle-runtime:2.9.3'
+  implementation 'androidx.fragment:fragment-ktx:1.8.9'
+  implementation 'androidx.compose.material3:material3-android:1.3.2'
   implementation "androidx.graphics:graphics-shapes:1.0.1"
 }

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

@@ -13,6 +13,7 @@ import androidx.compose.ui.Modifier
 import expo.modules.kotlin.views.ExpoComposeView
 import expo.modules.kotlin.viewevent.EventDispatcher
 import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.views.ComposableScope
 import java.io.Serializable
 
 open class AlertDialogButtonPressedEvent() : Record, Serializable
@@ -27,13 +28,13 @@ data class AlertDialogProps(
 ) : ComposeProps
 
 class AlertDialogView(context: Context, appContext: AppContext) :
-  ExpoComposeView<AlertDialogProps>(context, appContext, withHostingView = true) {
+  ExpoComposeView<AlertDialogProps>(context, appContext) {
   override val props = AlertDialogProps()
   private val onDismissPressed by EventDispatcher<AlertDialogButtonPressedEvent>()
   private val onConfirmPressed by EventDispatcher<AlertDialogButtonPressedEvent>()
 
   @Composable
-  override fun Content(modifier: Modifier) {
+  override fun ComposableScope.Content() {
     val (title) = props.title
     val (text) = props.text
     val (confirmButtonText) = props.confirmButtonText

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

@@ -0,0 +1,67 @@
+package expo.modules.ui
+
+import android.content.Context
+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.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.ui.Modifier
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ComposableScope
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.ExpoComposeView
+import java.io.Serializable
+
+open class IsOpenedChangeEvent(
+  @Field open val isOpened: Boolean = false
+) : Record, Serializable
+
+data class BottomSheetProps(
+  val isOpened: MutableState<Boolean> = mutableStateOf(false),
+  val skipPartiallyExpanded: MutableState<Boolean> = mutableStateOf(false)
+) : ComposeProps
+
+@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()
+    }
+  }
+}
+
+class BottomSheetView(context: Context, appContext: AppContext) :
+  ExpoComposeView<BottomSheetProps>(context, appContext) {
+  override val props = BottomSheetProps()
+  private val onIsOpenedChange by EventDispatcher<IsOpenedChangeEvent>()
+
+  @Composable
+  override fun ComposableScope.Content() {
+    val (isOpened) = props.isOpened
+    val (skipPartiallyExpanded) = props.skipPartiallyExpanded
+
+    Box {
+      BottomSheetComposable(
+        skipPartiallyExpanded,
+        isOpened,
+        onIsOpenedChange = { value -> onIsOpenedChange(IsOpenedChangeEvent(value)) }
+      ) {
+        Children(ComposableScope())
+      }
+    }
+  }
+}

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

@@ -0,0 +1,151 @@
+@file:OptIn(EitherType::class)
+
+package expo.modules.ui
+
+import android.content.Context
+import androidx.compose.foundation.gestures.TargetedFlingBehavior
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.material3.ExperimentalMaterial3Api
+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.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.core.view.size
+import expo.modules.kotlin.AppContext
+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 expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.ExpoComposeView
+import expo.modules.kotlin.views.ComposableScope
+
+enum class CarouselVariant(val value: String) : Enumerable {
+  MULTI_BROWSE("multiBrowse"),
+  UNCONSTRAINED("unconstrained")
+}
+
+enum class FlingBehaviorType(val value: String) : Enumerable {
+  SINGLE_ADVANCE("singleAdvance"),
+  NO_SNAP("noSnap")
+}
+
+class PaddingValuesRecord : Record {
+  @Field
+  val start: Float? = null
+
+  @Field
+  val top: Float? = null
+
+  @Field
+  val end: Float? = null
+
+  @Field
+  val bottom: Float? = null
+
+  fun toPaddingValues(): PaddingValues {
+    return PaddingValues(
+      start?.dp ?: 0.dp,
+      top?.dp ?: 0.dp,
+      end?.dp ?: 0.dp,
+      bottom?.dp ?: 0.dp
+    )
+  }
+}
+
+fun paddingValuesFromEither(either: Either<Float, PaddingValuesRecord>?): PaddingValues {
+  if (either == null) {
+    return PaddingValues(0.dp)
+  }
+
+  return when {
+    either.`is`(Float::class) -> PaddingValues(either.get(Float::class).dp)
+    either.`is`(PaddingValuesRecord::class) -> either.get(PaddingValuesRecord::class).toPaddingValues()
+    else -> throw IllegalStateException()
+  }
+}
+
+data class CarouselProps(
+  val variant: MutableState<CarouselVariant?> = mutableStateOf(null),
+  val modifiers: MutableState<List<ExpoModifier>?> = mutableStateOf(null),
+  val itemSpacing: MutableState<Float?> = mutableStateOf(null),
+  val contentPadding: MutableState<Either<Float, PaddingValuesRecord>?> = mutableStateOf(null),
+  val minSmallItemWidth: MutableState<Float?> = mutableStateOf(null),
+  val maxSmallItemWidth: MutableState<Float?> = mutableStateOf(null),
+  val flingBehavior: MutableState<FlingBehaviorType?> = mutableStateOf(null),
+  val preferredItemWidth: MutableState<Float?> = mutableStateOf(null),
+  val itemWidth: MutableState<Float?> = mutableStateOf(null)
+) : ComposeProps
+
+const val DEFAULT_MIN_SMALL_ITEM_WIDTH = 40f
+const val DEFAULT_MAX_SMALL_ITEM_WIDTH = 56f
+const val DEFAULT_PREFERRED_ITEM_WIDTH = 200f
+const val DEFAULT_ITEM_WIDTH = 200f
+
+class CarouselView(context: Context, appContext: AppContext) : ExpoComposeView<CarouselProps>(context, appContext) {
+  override val props = CarouselProps()
+
+  @OptIn(ExperimentalMaterial3Api::class)
+  @Composable
+  override fun ComposableScope.Content() {
+    val variant = props.variant.value ?: CarouselVariant.MULTI_BROWSE
+    val modifiers = props.modifiers.value ?: emptyList()
+    val itemSpacing = (props.itemSpacing.value ?: 0f).dp
+    val minSmallItemWidth = (props.minSmallItemWidth.value ?: DEFAULT_MIN_SMALL_ITEM_WIDTH).dp
+
+    // we need to constrain maxSmallItemWidth to be at least minSmallItemWidth or the app will crash
+    val maxSmallItemWidth = minSmallItemWidth.coerceAtLeast((props.maxSmallItemWidth.value ?: DEFAULT_MAX_SMALL_ITEM_WIDTH).dp)
+    val preferredItemWidth = (props.preferredItemWidth.value ?: DEFAULT_PREFERRED_ITEM_WIDTH).dp
+    val itemWidth = (props.itemWidth.value ?: DEFAULT_ITEM_WIDTH).dp
+    val flingBehaviorType = props.flingBehavior.value ?: FlingBehaviorType.SINGLE_ADVANCE
+    val contentPadding = paddingValuesFromEither(props.contentPadding.value)
+
+    val carouselState = rememberCarouselState(0) { size }
+
+    val flingBehavior: TargetedFlingBehavior = when (flingBehaviorType) {
+      FlingBehaviorType.SINGLE_ADVANCE -> CarouselDefaults.singleAdvanceFlingBehavior(state = carouselState)
+      FlingBehaviorType.NO_SNAP -> CarouselDefaults.noSnapFlingBehavior()
+    }
+
+    @Composable
+    fun MultiBrowseCarouselComposable() {
+      HorizontalMultiBrowseCarousel(
+        state = carouselState,
+        preferredItemWidth = preferredItemWidth,
+        modifier = Modifier.fromExpoModifiers(modifiers, this@Content),
+        itemSpacing = itemSpacing,
+        flingBehavior = flingBehavior,
+        minSmallItemWidth = minSmallItemWidth,
+        maxSmallItemWidth = maxSmallItemWidth,
+        contentPadding = contentPadding
+      ) { itemIndex ->
+        Child(ComposableScope(), itemIndex)
+      }
+    }
+
+    @Composable
+    fun UnconstrainedCarouselComposable() {
+      HorizontalUncontainedCarousel(
+        state = carouselState,
+        itemWidth = itemWidth,
+        modifier = Modifier.fromExpoModifiers(modifiers, this@Content),
+        itemSpacing = itemSpacing,
+        flingBehavior = flingBehavior,
+        contentPadding = contentPadding
+      ) { itemIndex ->
+        Child(ComposableScope(), itemIndex)
+      }
+    }
+
+    when (variant) {
+      CarouselVariant.MULTI_BROWSE -> MultiBrowseCarouselComposable()
+      CarouselVariant.UNCONSTRAINED -> UnconstrainedCarouselComposable()
+    }
+  }
+}

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

@@ -12,6 +12,7 @@ import androidx.compose.ui.unit.dp
 import expo.modules.kotlin.AppContext
 import expo.modules.kotlin.records.Record
 import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ComposableScope
 import expo.modules.kotlin.views.ComposeProps
 import expo.modules.kotlin.views.ExpoComposeView
 import java.io.Serializable
@@ -30,7 +31,7 @@ data class ChipProps(
 ) : ComposeProps
 
 class ChipView(context: Context, appContext: AppContext) :
-  ExpoComposeView<ChipProps>(context, appContext, withHostingView = true) {
+  ExpoComposeView<ChipProps>(context, appContext) {
 
   override val props = ChipProps()
 
@@ -39,7 +40,7 @@ class ChipView(context: Context, appContext: AppContext) :
 
   @OptIn(ExperimentalMaterial3Api::class)
   @Composable
-  override fun Content(modifier: Modifier) {
+  override fun ComposableScope.Content() {
     val variant by props.variant
     val label by props.label
     val leadingIcon by props.leadingIcon
@@ -49,7 +50,7 @@ class ChipView(context: Context, appContext: AppContext) :
     val enabled by props.enabled
     val selected by props.selected
 
-    val chipModifier = modifier
+    val chipModifier = Modifier
       .padding(4.dp)
       .wrapContentSize(Alignment.Center)
 

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

@@ -3,6 +3,7 @@ package expo.modules.ui
 import android.content.Context
 import android.graphics.Color as AndroidColor
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.material3.Text
@@ -20,6 +21,8 @@ import expo.modules.kotlin.AppContext
 import expo.modules.kotlin.types.Enumerable
 import expo.modules.kotlin.views.ComposeProps
 import expo.modules.kotlin.views.ExpoComposeView
+import expo.modules.kotlin.views.ComposableScope
+import expo.modules.kotlin.views.with
 
 enum class HorizontalArrangement(val value: String) : Enumerable {
   START("start"),
@@ -94,20 +97,20 @@ data class LayoutProps(
   val verticalArrangement: MutableState<VerticalArrangement> = mutableStateOf(VerticalArrangement.TOP),
   val horizontalAlignment: MutableState<HorizontalAlignment> = mutableStateOf(HorizontalAlignment.START),
   val verticalAlignment: MutableState<VerticalAlignment> = mutableStateOf(VerticalAlignment.TOP),
-  val modifiers: MutableState<List<ExpoModifier>> = mutableStateOf(emptyList())
+  val modifiers: MutableState<List<ExpoModifier>?> = mutableStateOf(emptyList())
 ) : ComposeProps
 
 class RowView(context: Context, appContext: AppContext) : ExpoComposeView<LayoutProps>(context, appContext) {
   override val props = LayoutProps()
 
   @Composable
-  override fun Content(modifier: Modifier) {
+  override fun ComposableScope.Content() {
     Row(
       horizontalArrangement = props.horizontalArrangement.value.toComposeArrangement(),
       verticalAlignment = props.verticalAlignment.value.toComposeAlignment(),
-      modifier = modifier.then(Modifier.fromExpoModifiers(props.modifiers.value))
+      modifier = Modifier.fromExpoModifiers(props.modifiers.value, this@Content)
     ) {
-      Children()
+      Children(this@Content.with(rowScope = this@Row))
     }
   }
 }
@@ -116,13 +119,26 @@ class ColumnView(context: Context, appContext: AppContext) : ExpoComposeView<Lay
   override val props = LayoutProps()
 
   @Composable
-  override fun Content(modifier: Modifier) {
+  override fun ComposableScope.Content() {
     Column(
       verticalArrangement = props.verticalArrangement.value.toComposeArrangement(),
       horizontalAlignment = props.horizontalAlignment.value.toComposeAlignment(),
-      modifier = modifier.then(Modifier.fromExpoModifiers(props.modifiers.value))
+      modifier = Modifier.fromExpoModifiers(props.modifiers.value, this@Content)
+    ) {
+      Children(this@Content.with(columnScope = this@Column))
+    }
+  }
+}
+
+class BoxView(context: Context, appContext: AppContext) : ExpoComposeView<LayoutProps>(context, appContext) {
+  override val props = LayoutProps()
+
+  @Composable
+  override fun ComposableScope.Content() {
+    Box(
+      modifier = Modifier.fromExpoModifiers(props.modifiers.value, this@Content)
     ) {
-      Children()
+      Children(this@Content.with(boxScope = this@Box))
     }
   }
 }
@@ -169,10 +185,10 @@ class TextView(context: Context, appContext: AppContext) : ExpoComposeView<TextP
   override val props = TextProps()
 
   @Composable
-  override fun Content(modifier: Modifier) {
+  override fun ComposableScope.Content() {
     Text(
       text = props.text.value,
-      modifier = modifier.then(Modifier.fromExpoModifiers(props.modifiers.value)),
+      modifier = Modifier.fromExpoModifiers(props.modifiers.value),
       color = colorToComposeColor(props.color.value),
       style = TextStyle(
         fontSize = props.fontSize.value.sp,
@@ -182,13 +198,17 @@ class TextView(context: Context, appContext: AppContext) : ExpoComposeView<TextP
   }
 }
 
-class ContainerView(context: Context, appContext: AppContext) :
+class HostView(context: Context, appContext: AppContext) :
   ExpoComposeView<ComposeProps>(context, appContext, withHostingView = true) {
   @Composable
-  override fun Content(modifier: Modifier) {
-    for (index in 0..<this.size) {
+  override fun ComposableScope.Content() {
+    for (index in 0..<this@HostView.size) {
       val child = getChildAt(index) as? ExpoComposeView<*> ?: continue
-      child.Content(modifier = modifier)
+      with(this) {
+        with(child) {
+          Content()
+        }
+      }
     }
   }
 }

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

@@ -25,6 +25,7 @@ import expo.modules.kotlin.types.Enumerable
 import expo.modules.kotlin.viewevent.EventDispatcher
 import expo.modules.kotlin.views.ComposeProps
 import expo.modules.kotlin.views.ExpoComposeView
+import expo.modules.kotlin.views.ComposableScope
 import java.util.Calendar
 import java.util.Date
 import android.graphics.Color as AndroidColor
@@ -68,12 +69,12 @@ data class DateTimePickerProps(
 @SuppressLint("ViewConstructor")
 @OptIn(ExperimentalMaterial3Api::class)
 class DateTimePickerView(context: Context, appContext: AppContext) :
-  ExpoComposeView<DateTimePickerProps>(context, appContext, withHostingView = true) {
+  ExpoComposeView<DateTimePickerProps>(context, appContext) {
   override val props = DateTimePickerProps()
   private val onDateSelected by EventDispatcher<DatePickerResult>()
 
   @Composable
-  override fun Content(modifier: Modifier) {
+  override fun ComposableScope.Content() {
     if (props.displayedComponents.value == DisplayedComponents.HOUR_AND_MINUTE) {
       ExpoTimePicker(props = props, modifier = Modifier.fromExpoModifiers(props.modifiers.value)) {
         onDateSelected(it)

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

@@ -1,6 +1,9 @@
 package expo.modules.ui
 
 import android.graphics.Color
+import androidx.compose.animation.animateContentSize
+import androidx.compose.animation.core.Spring
+import androidx.compose.animation.core.spring
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
@@ -12,9 +15,9 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.blur
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.draw.shadow
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
 import expo.modules.kotlin.jni.JavaScriptFunction
@@ -39,6 +42,10 @@ class ExpoUIModule : Module() {
       }
     }
 
+    View(BottomSheetView::class) {
+      Events("onIsOpenedChange")
+    }
+
     // Defines a single view for now – a single choice segmented control
     View(PickerView::class) {
       Events("onOptionSelected")
@@ -85,10 +92,12 @@ class ExpoUIModule : Module() {
       }
     }
 
+    View(BoxView::class)
     View(RowView::class)
     View(ColumnView::class)
-    View(ContainerView::class)
+    View(HostView::class)
     View(TextView::class)
+    View(CarouselView::class)
 
     View(AlertDialogView::class) {
       Events(
@@ -104,8 +113,12 @@ class ExpoUIModule : Module() {
       )
     }
 
-    Function("padding") { all: Int ->
-      return@Function ExpoModifier(Modifier.padding(Dp(all.toFloat())))
+    Function("paddingAll") { all: Int ->
+      return@Function ExpoModifier(Modifier.padding(all.dp))
+    }
+
+    Function("padding") { start: Int, top: Int, end: Int, bottom: Int ->
+      return@Function ExpoModifier(Modifier.padding(start.dp, top.dp, end.dp, bottom.dp))
     }
 
     Function("size") { width: Int, height: Int ->
@@ -160,6 +173,44 @@ class ExpoUIModule : Module() {
       return@Function ExpoModifier(Modifier.zIndex(index))
     }
 
+    Function("animateContentSize") { dampingRatio: Float?, stiffness: Float? ->
+      return@Function ExpoModifier(
+        Modifier.animateContentSize(
+          spring(dampingRatio = dampingRatio ?: Spring.DampingRatioNoBouncy, stiffness = stiffness ?: Spring.StiffnessMedium)
+        )
+      )
+    }
+
+    Function("weight") { weight: Float ->
+      val scopedExpoModifier = ExpoModifier {
+        it.rowScope?.run {
+          Modifier.weight(weight)
+        } ?: it.columnScope?.run {
+          Modifier.weight(weight)
+        } ?: Modifier
+      }
+      return@Function scopedExpoModifier
+    }
+
+    Function("matchParentSize") {
+      val scopedExpoModifier = ExpoModifier {
+        it.boxScope?.run {
+          Modifier.matchParentSize()
+        } ?: Modifier
+      }
+      return@Function scopedExpoModifier
+    }
+
+    Function("testID") { testID: String ->
+      return@Function ExpoModifier(Modifier.applyTestTag(testID))
+    }
+
+    Function("clip") { shapeRecord: ShapeRecord ->
+      val shape = shapeFromShapeRecord(shapeRecord)
+        ?: return@Function Modifier
+      return@Function ExpoModifier(Modifier.clip(shape))
+    }
+
     // TODO: Consider implementing semantics, layoutId, clip, navigationBarsPadding, systemBarsPadding
   }
 }