@expo/ui 58.0.15 → 58.0.17

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 58.0.17
+
+### Patch Changes
+
+- [Android] Fix the universal `ListItem` ignoring `testID`. The prop was never passed to Compose, so end-to-end tools such as Maestro could not find list rows on Android. It is now applied as the `testID` modifier, like the universal `Button` and `Checkbox` do. ([#51480](https://github.com/expo/expo/pull/51480) by [@devonik](https://github.com/devonik))
+- [Android] Bump Jetpack Compose UI and Foundation to 1.12.1 and Material3 to 1.5.0-beta01. Add `preferredItemWidth` to `HorizontalCenteredHeroCarousel` and deprecate `maxItemWidth`, matching the Material3 rename. Add `TimePickerElementColors` props without the `Unselected` infix (for example `clockDialContentColor`) and deprecate the old names. ([#51426](https://github.com/expo/expo/pull/51426) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+
+## 58.0.16
+
+### Patch Changes
+
+- [Internal] Bump precompiled artifacts due to ABI breakage in expo-modules-jsi, which makes `JavaScriptValue` a non-copyable struct. ([#51368](https://github.com/expo/expo/pull/51368) by [@tsapeta](https://github.com/tsapeta))
+- [iOS] Fix the community `BottomSheet` clipping its content when the sheet is narrower than the window, as on iPhone Duo. When the sheet sized itself to its content, the content was pinned to the window width and centered in the sheet, so its leading edge was cut off. The content now takes its width from the sheet and its height from the content. `presentationSizing` takes a `fitted` option (`{ horizontal, vertical }`) to fit a sheet to its content on one axis only. ([#51319](https://github.com/expo/expo/pull/51319) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+- [Android] Fix an `RNHostView` that ignores touches when a Compose button with a ripple in the same `Host` was pressed earlier. The ripple container that Compose adds was found first during React Native's touch-target search, so the touch went to the `Host` instead of the hosted view. ([#51237](https://github.com/expo/expo/pull/51237) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+- Fixed `measure()` of views hosted in `RNHostView` inside SwiftUI and Jetpack Compose containers. ([#50715](https://github.com/expo/expo/pull/50715) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+- Added a development warning when a `Host` renders directly inside another `Host` without an `RNHostView`. The universal `BottomSheet` no longer adds its own `Host` when it renders inside one. ([#50715](https://github.com/expo/expo/pull/50715) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+- [iOS] Fixed `measure()` of views hosted in `RNHostView` when SwiftUI insets the `Host`'s content, for example by the safe area. ([#50727](https://github.com/expo/expo/pull/50727) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+- [Android] Fix the community `MenuView` opening detached above its anchor near the bottom of the screen, and add a `properties` prop to the Jetpack Compose `DropdownMenu`. ([#51412](https://github.com/expo/expo/pull/51412) by [@intergalacticspacehighway](https://github.com/intergalacticspacehighway))
+- [Android] Fix a numeric `width()` modifier crashing the app on launch with `FieldCastException: Cannot cast value for field 'width'` since the `IntrinsicSize` support added in 57.0.22 / 58.0.9. JS numbers reach the modifier record as `Double`, which matched neither branch of `Either<Int, IntrinsicSizeType>`; the field is now `Either<Double, IntrinsicSizeType>`, so numeric widths convert again and `width(IntrinsicSize.Min|Max)` keeps working. ([#51322](https://github.com/expo/expo/pull/51322) by [@expo-bot](https://github.com/expo-bot))
+- [iOS] Add `cornerRadius` and `opacity` to `Chart`'s `pieStyle`. Pie slices could not have rounded corners, and their opacity was fixed at 0.8, so a chart drawn in solid colors always looked washed out. Both default to the previous behavior. Rounded corners let a single-slice donut work as a progress ring with rounded ends. ([#51351](https://github.com/expo/expo/pull/51351) by [@jsg2021](https://github.com/jsg2021))
+
 ## 58.0.15
 
 ### Patch 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 = '58.0.15'
+version = '58.0.17'
 
 android {
   namespace "expo.modules.ui"
   defaultConfig {
     versionCode 1
-    versionName "58.0.15"
+    versionName "58.0.17"
     testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
   }
   buildFeatures {
@@ -38,10 +38,10 @@ android {
 dependencies {
   implementation 'com.facebook.react:react-android'
 
-  implementation 'androidx.compose.foundation:foundation-android:1.10.6'
-  implementation 'androidx.compose.ui:ui-android:1.10.6'
-  implementation "androidx.compose.material3:material3:1.5.0-alpha17"
-  implementation 'androidx.compose.material3:material3-android:1.5.0-alpha17'
+  implementation 'androidx.compose.foundation:foundation-android:1.12.1'
+  implementation 'androidx.compose.ui:ui-android:1.12.1'
+  implementation "androidx.compose.material3:material3:1.5.0-beta01"
+  implementation 'androidx.compose.material3:material3-android:1.5.0-beta01'
   implementation 'androidx.lifecycle:lifecycle-runtime:2.10.0'
   implementation 'androidx.fragment:fragment-ktx:1.8.9'
   implementation "androidx.graphics:graphics-shapes:1.1.0"

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

@@ -24,6 +24,7 @@ enum class FlingBehaviorType(val value: String) : Enumerable {
 
 @OptimizedComposeProps
 data class HorizontalCenteredHeroCarouselProps(
+  val preferredItemWidth: Float? = null,
   val maxItemWidth: Float? = null,
   val itemSpacing: Float? = null,
   val contentPadding: Either<Float, PaddingValuesRecord>? = null,
@@ -50,7 +51,7 @@ fun FunctionalComposableScope.HorizontalCenteredHeroCarouselContent(props: Horiz
   HorizontalCenteredHeroCarousel(
     state = carouselState,
     modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
-    maxItemWidth = props.maxItemWidth?.dp ?: Dp.Unspecified,
+    preferredItemWidth = (props.preferredItemWidth ?: props.maxItemWidth)?.dp ?: Dp.Unspecified,
     itemSpacing = (props.itemSpacing ?: 0f).dp,
     flingBehavior = flingBehavior,
     userScrollEnabled = props.userScrollEnabled ?: true,

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

@@ -123,6 +123,8 @@ class DateTimePickerColorOverrides : Record {
 
   @Field val clockDialSelectedContentColor: AndroidColor? = null
 
+  @Field val clockDialContentColor: AndroidColor? = null
+
   @Field val clockDialUnselectedContentColor: AndroidColor? = null
 
   @Field val selectorColor: AndroidColor? = null
@@ -131,18 +133,26 @@ class DateTimePickerColorOverrides : Record {
 
   @Field val periodSelectorSelectedContainerColor: AndroidColor? = null
 
+  @Field val periodSelectorContainerColor: AndroidColor? = null
+
   @Field val periodSelectorUnselectedContainerColor: AndroidColor? = null
 
   @Field val periodSelectorSelectedContentColor: AndroidColor? = null
 
+  @Field val periodSelectorContentColor: AndroidColor? = null
+
   @Field val periodSelectorUnselectedContentColor: AndroidColor? = null
 
   @Field val timeSelectorSelectedContainerColor: AndroidColor? = null
 
+  @Field val timeSelectorContainerColor: AndroidColor? = null
+
   @Field val timeSelectorUnselectedContainerColor: AndroidColor? = null
 
   @Field val timeSelectorSelectedContentColor: AndroidColor? = null
 
+  @Field val timeSelectorContentColor: AndroidColor? = null
+
   @Field val timeSelectorUnselectedContentColor: AndroidColor? = null
 }
 
@@ -323,17 +333,17 @@ fun buildTimePickerColors(
     containerColor = elementColors.containerColor.composeOrNull ?: defaults.containerColor,
     clockDialColor = elementColors.clockDialColor.composeOrNull ?: colorProp?.copy(alpha = 0.3f) ?: defaults.clockDialColor,
     clockDialSelectedContentColor = elementColors.clockDialSelectedContentColor.composeOrNull ?: defaults.clockDialSelectedContentColor,
-    clockDialUnselectedContentColor = elementColors.clockDialUnselectedContentColor.composeOrNull ?: defaults.clockDialUnselectedContentColor,
+    clockDialContentColor = (elementColors.clockDialContentColor ?: elementColors.clockDialUnselectedContentColor).composeOrNull ?: defaults.clockDialContentColor,
     selectorColor = elementColors.selectorColor.composeOrNull ?: colorProp ?: defaults.selectorColor,
     periodSelectorBorderColor = elementColors.periodSelectorBorderColor.composeOrNull ?: defaults.periodSelectorBorderColor,
     periodSelectorSelectedContainerColor = elementColors.periodSelectorSelectedContainerColor.composeOrNull ?: defaults.periodSelectorSelectedContainerColor,
-    periodSelectorUnselectedContainerColor = elementColors.periodSelectorUnselectedContainerColor.composeOrNull ?: defaults.periodSelectorUnselectedContainerColor,
+    periodSelectorContainerColor = (elementColors.periodSelectorContainerColor ?: elementColors.periodSelectorUnselectedContainerColor).composeOrNull ?: defaults.periodSelectorContainerColor,
     periodSelectorSelectedContentColor = elementColors.periodSelectorSelectedContentColor.composeOrNull ?: defaults.periodSelectorSelectedContentColor,
-    periodSelectorUnselectedContentColor = elementColors.periodSelectorUnselectedContentColor.composeOrNull ?: defaults.periodSelectorUnselectedContentColor,
+    periodSelectorContentColor = (elementColors.periodSelectorContentColor ?: elementColors.periodSelectorUnselectedContentColor).composeOrNull ?: defaults.periodSelectorContentColor,
     timeSelectorSelectedContainerColor = elementColors.timeSelectorSelectedContainerColor.composeOrNull ?: colorProp ?: defaults.timeSelectorSelectedContainerColor,
-    timeSelectorUnselectedContainerColor = elementColors.timeSelectorUnselectedContainerColor.composeOrNull ?: defaults.timeSelectorUnselectedContainerColor,
+    timeSelectorContainerColor = (elementColors.timeSelectorContainerColor ?: elementColors.timeSelectorUnselectedContainerColor).composeOrNull ?: defaults.timeSelectorContainerColor,
     timeSelectorSelectedContentColor = elementColors.timeSelectorSelectedContentColor.composeOrNull ?: defaults.timeSelectorSelectedContentColor,
-    timeSelectorUnselectedContentColor = elementColors.timeSelectorUnselectedContentColor.composeOrNull ?: defaults.timeSelectorUnselectedContentColor
+    timeSelectorContentColor = (elementColors.timeSelectorContentColor ?: elementColors.timeSelectorUnselectedContentColor).composeOrNull ?: defaults.timeSelectorContentColor
   )
 }
 

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

@@ -2,6 +2,7 @@
 
 package expo.modules.ui
 
+import android.os.Handler
 import android.os.Looper
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.SwitchDefaults
@@ -77,6 +78,8 @@ class ExpoUIModule : Module() {
       // Tags restart in the next app context, so an entry whose view was never torn down would be
       // read by an unrelated view after a reload.
       NativeStatePropsGetter().clearAllContentOrigins()
+      // React Native destroys modules on a background thread, but `ZeroContentOrigins` is UI-thread only.
+      Handler(Looper.getMainLooper()).post { ZeroContentOrigins.clear() }
 
       imageLoader?.close()
       imageLoader = null

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

@@ -147,7 +147,7 @@ internal enum class IntrinsicSizeType(val value: String) : Enumerable {
 
 @OptimizedRecord
 internal data class ComposeWidthParams(
-  @Field val width: Either<Int, IntrinsicSizeType>? = null
+  @Field val width: Either<Double, IntrinsicSizeType>? = null
 ) : Record
 
 @OptimizedRecord
@@ -496,7 +496,7 @@ object ModifierRegistry {
       if (width?.`is`(IntrinsicSizeType::class) == true) {
         Modifier.width(width.second().toComposeIntrinsicSize())
       } else {
-        Modifier.width((width?.first() ?: 0).dp)
+        Modifier.width((width?.first() ?: 0.0).dp)
       }
     }
 

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

@@ -8,6 +8,7 @@ import android.view.View
 import android.view.ViewGroup
 import android.view.ViewParent
 import android.widget.FrameLayout
+import androidx.annotation.UiThread
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -25,6 +26,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.layout.positionInRoot
+import androidx.compose.ui.platform.AbstractComposeView
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.viewinterop.AndroidView
@@ -45,6 +47,7 @@ import expo.modules.kotlin.views.ComposableScope
 import expo.modules.kotlin.views.ComposeProps
 import expo.modules.kotlin.views.ExpoComposeView
 import expo.modules.kotlin.views.OptimizedComposeProps
+import java.util.WeakHashMap
 
 @OptimizedComposeProps
 internal data class RNHostViewProps(
@@ -151,6 +154,25 @@ internal class RNHostView(context: Context, appContext: AppContext) :
     shadowNodeProxy.clearContentOrigin()
   }
 
+  // Compose places the views between this view and its `Host`, so `measure()` must skip their Yoga
+  // origins. A zero content origin on each one does that while this view is attached.
+  private var composeAncestors: List<ExpoComposeView<*>> = emptyList()
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    composeAncestors = generateSequence(parent) { it.parent }
+      .takeWhile { it is ExpoComposeView<*> && !it.shouldUseAndroidLayout }
+      .filterIsInstance<ExpoComposeView<*>>()
+      .toList()
+    composeAncestors.forEach(ZeroContentOrigins::acquire)
+  }
+
+  override fun onDetachedFromWindow() {
+    super.onDetachedFromWindow()
+    composeAncestors.forEach(ZeroContentOrigins::release)
+    composeAncestors = emptyList()
+  }
+
   @Composable
   override fun ComposableScope.Content() {
     val matchContentsHorizontal = props.matchContentsHorizontal.value ?: false
@@ -294,6 +316,44 @@ internal class RNHostView(context: Context, appContext: AppContext) :
   }
 }
 
+/**
+ * Counts, for each Compose ancestor, the attached `RNHostView`s below it. Several can share an
+ * ancestor, so the ancestor's zero content origin is set when its count becomes 1 and cleared when
+ * it returns to 0.
+ */
+internal object ZeroContentOrigins {
+  private val counts = WeakHashMap<ExpoComposeView<*>, Int>()
+
+  @UiThread
+  fun acquire(view: ExpoComposeView<*>) {
+    val count = counts[view] ?: 0
+    if (count == 0) {
+      view.shadowNodeProxy.setContentOrigin(0.0, 0.0)
+    }
+    counts[view] = count + 1
+  }
+
+  @UiThread
+  fun release(view: ExpoComposeView<*>) {
+    val count = counts[view] ?: return
+    if (count > 1) {
+      counts[view] = count - 1
+      return
+    }
+    counts.remove(view)
+    view.shadowNodeProxy.clearContentOrigin()
+  }
+
+  /**
+   * Called on reload, after the content origins themselves are cleared. A late `release` from the
+   * old app context then finds no count and can't clear an entry for a reused tag.
+   */
+  @UiThread
+  fun clear() {
+    counts.clear()
+  }
+}
+
 /**
  * Removes [wrapper] from the view that currently contains it, and clears its bounds.
  *
@@ -309,6 +369,28 @@ internal fun detachForReuse(wrapper: View) {
   wrapper.layout(0, 0, 0, 0)
 }
 
+/**
+ * React Native looks for touch targets from the last child to the first, and Compose appends helper
+ * views such as ripple containers to its owner view after the hosted views. Those helpers have no
+ * React tag, so a touch on them goes to the `Host` instead of the hosted view.
+ * This is a workaround: React Native has no way to let the `Host` choose the touch target.
+ * This causes https://github.com/expo/expo/issues/51159
+ */
+internal fun keepLastForTouchTargeting(composeOwnerView: ViewGroup, hostedViewsContainer: View) {
+  if (composeOwnerView.indexOfChild(hostedViewsContainer) != composeOwnerView.childCount - 1) {
+    composeOwnerView.bringChildToFront(hostedViewsContainer)
+  }
+  composeOwnerView.setOnHierarchyChangeListener(object : ViewGroup.OnHierarchyChangeListener {
+    override fun onChildViewAdded(parent: View, child: View) {
+      if (child !== hostedViewsContainer) {
+        composeOwnerView.bringChildToFront(hostedViewsContainer)
+      }
+    }
+
+    override fun onChildViewRemoved(parent: View, child: View) = Unit
+  })
+}
+
 /**
  * A thin FrameLayout that intercepts touch events and dispatches them to JS via
  * JSTouchDispatcher/JSPointerDispatcher, replicating the pattern from React Native's
@@ -379,6 +461,19 @@ private class TouchDispatchingRootViewGroup(
     // and we must not override those values.
   }
 
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    // Walk up until the parent is the ComposeView. That ancestor is the Compose owner view, and the
+    // child we came from is the container that Compose keeps all hosted views in.
+    var hostedViewsContainer: View = this
+    var composeOwnerView = parent as? ViewGroup
+    while (composeOwnerView != null && composeOwnerView.parent !is AbstractComposeView) {
+      hostedViewsContainer = composeOwnerView
+      composeOwnerView = composeOwnerView.parent as? ViewGroup
+    }
+    composeOwnerView?.let { keepLastForTouchTargeting(it, hostedViewsContainer) }
+  }
+
   override fun dispatchTouchEvent(ev: MotionEvent): Boolean {
     if (
       ev.actionMasked == MotionEvent.ACTION_CANCEL &&

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

@@ -5,10 +5,11 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Slider
 import androidx.compose.material3.SliderDefaults
+import androidx.compose.material3.SliderState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.SideEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
-import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import expo.modules.kotlin.records.Field
@@ -66,13 +67,20 @@ fun FunctionalComposableScope.SliderContent(props: SliderProps) {
   val effectiveUpper = minOf(props.max, props.upperLimit ?: Float.POSITIVE_INFINITY)
 
   var localValue by remember { mutableFloatStateOf(props.value.coerceIn(effectiveLower, effectiveUpper)) }
-  var isDragging by remember { mutableStateOf(false) }
   val clampedPropsValue = props.value.coerceIn(effectiveLower, effectiveUpper)
   var prevPropsValue by remember { mutableFloatStateOf(clampedPropsValue) }
 
+  val sliderState = remember(props.min, props.max, props.steps) {
+    SliderState(
+      value = localValue.coerceIn(effectiveLower, effectiveUpper),
+      steps = props.steps,
+      trackRange = props.min..props.max
+    )
+  }
+
   if (clampedPropsValue != prevPropsValue) {
     prevPropsValue = clampedPropsValue
-    if (!isDragging) {
+    if (!sliderState.isDragging) {
       localValue = clampedPropsValue
     }
   }
@@ -88,24 +96,28 @@ fun FunctionalComposableScope.SliderContent(props: SliderProps) {
     inactiveTickColor = props.colors.inactiveTickColor.compose
   )
 
+  SideEffect {
+    val target = localValue.coerceIn(effectiveLower, effectiveUpper)
+    if (sliderState.value != target) {
+      sliderState.value = target
+    }
+  }
+
   Slider(
-    value = localValue,
-    valueRange = props.min..props.max,
-    steps = props.steps,
+    state = sliderState,
     enabled = props.enabled,
     interactionSource = interactionSource,
     onValueChange = {
       val clamped = it.coerceIn(effectiveLower, effectiveUpper)
-      isDragging = true
       localValue = clamped
+      sliderState.value = clamped
       onValueChange(SliderValueChangedEvent(clamped))
     },
     onValueChangeFinished = {
-      isDragging = false
       onValueChangeFinished(Unit)
     },
     colors = sliderColors,
-    thumb = { sliderState ->
+    thumb = {
       if (thumbSlotView != null) {
         with(UIComposableScope()) { with(thumbSlotView) { Content() } }
       } else {

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

@@ -52,7 +52,7 @@ fun FunctionalComposableScope.ToggleButtonContent(
     onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
     enabled = props.enabled,
     modifier = modifier,
-    colors = ToggleButtonDefaults.toggleButtonColors(
+    colors = ToggleButtonDefaults.colors(
       checkedContainerColor = props.colors.checkedContainerColor.compose,
       checkedContentColor = props.colors.checkedContentColor.compose,
       containerColor = props.colors.containerColor.compose,

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

@@ -49,7 +49,7 @@ fun FunctionalComposableScope.VerticalSliderContent(props: VerticalSliderProps)
     SliderState(
       value = localValue.coerceIn(effectiveLower, effectiveUpper),
       steps = props.steps,
-      valueRange = props.min..props.max
+      trackRange = props.min..props.max
     )
   }
 
@@ -77,16 +77,17 @@ fun FunctionalComposableScope.VerticalSliderContent(props: VerticalSliderProps)
     globalEventDispatcher
   )
 
+  val handleValueChange: (Float) -> Unit = {
+    val clamped = it.coerceIn(effectiveLower, effectiveUpper)
+    localValue = clamped
+    sliderState.value = clamped
+    onValueChange(SliderValueChangedEvent(clamped))
+  }
+  val handleValueChangeFinished: () -> Unit = {
+    onValueChangeFinished(Unit)
+  }
+
   SideEffect {
-    sliderState.onValueChange = {
-      val clamped = it.coerceIn(effectiveLower, effectiveUpper)
-      localValue = clamped
-      sliderState.value = clamped
-      onValueChange(SliderValueChangedEvent(clamped))
-    }
-    sliderState.onValueChangeFinished = {
-      onValueChangeFinished(Unit)
-    }
     val target = localValue.coerceIn(effectiveLower, effectiveUpper)
     if (sliderState.value != target) {
       sliderState.value = target
@@ -97,7 +98,9 @@ fun FunctionalComposableScope.VerticalSliderContent(props: VerticalSliderProps)
     thumbSlotView != null && trackSlotView != null -> VerticalSlider(
       state = sliderState,
       enabled = props.enabled,
-      reverseDirection = props.reverseDirection,
+      onValueChange = handleValueChange,
+      onValueChangeFinished = handleValueChangeFinished,
+      topToBottom = !props.reverseDirection,
       colors = sliderColors,
       interactionSource = interactionSource,
       thumb = {
@@ -112,7 +115,9 @@ fun FunctionalComposableScope.VerticalSliderContent(props: VerticalSliderProps)
     thumbSlotView != null -> VerticalSlider(
       state = sliderState,
       enabled = props.enabled,
-      reverseDirection = props.reverseDirection,
+      onValueChange = handleValueChange,
+      onValueChangeFinished = handleValueChangeFinished,
+      topToBottom = !props.reverseDirection,
       colors = sliderColors,
       interactionSource = interactionSource,
       thumb = {
@@ -124,7 +129,9 @@ fun FunctionalComposableScope.VerticalSliderContent(props: VerticalSliderProps)
     trackSlotView != null -> VerticalSlider(
       state = sliderState,
       enabled = props.enabled,
-      reverseDirection = props.reverseDirection,
+      onValueChange = handleValueChange,
+      onValueChangeFinished = handleValueChangeFinished,
+      topToBottom = !props.reverseDirection,
       colors = sliderColors,
       interactionSource = interactionSource,
       track = {
@@ -136,7 +143,9 @@ fun FunctionalComposableScope.VerticalSliderContent(props: VerticalSliderProps)
     else -> VerticalSlider(
       state = sliderState,
       enabled = props.enabled,
-      reverseDirection = props.reverseDirection,
+      onValueChange = handleValueChange,
+      onValueChangeFinished = handleValueChangeFinished,
+      topToBottom = !props.reverseDirection,
       colors = sliderColors,
       interactionSource = interactionSource,
       modifier = modifier

package/android/src/main/java/expo/modules/ui/menu/DropdownMenu.kt

@@ -6,6 +6,7 @@ import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.MenuDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.PopupProperties
 import expo.modules.kotlin.views.FunctionalComposableScope
 import expo.modules.ui.UIComposableScope
 import expo.modules.ui.ModifierRegistry
@@ -29,7 +30,13 @@ fun FunctionalComposableScope.DropdownMenuContent(
       shape = props.cornerRadius?.let { RoundedCornerShape(it.dp) } ?: MenuDefaults.shape,
       shadowElevation = props.shadowElevation?.dp ?: MenuDefaults.ShadowElevation,
       expanded = props.expanded,
-      onDismissRequest = onDismissRequest
+      onDismissRequest = onDismissRequest,
+      properties = PopupProperties(
+        focusable = props.properties.focusable,
+        dismissOnBackPress = props.properties.dismissOnBackPress,
+        dismissOnClickOutside = props.properties.dismissOnClickOutside,
+        clippingEnabled = props.properties.clippingEnabled
+      )
     ) {
       itemsSlotView?.let {
         with(UIComposableScope()) {

package/android/src/main/java/expo/modules/ui/menu/DropdownMenuRecords.kt

@@ -1,7 +1,10 @@
 package expo.modules.ui.menu
 
 import android.graphics.Color
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
 import expo.modules.kotlin.types.Enumerable
+import expo.modules.kotlin.types.OptimizedRecord
 import expo.modules.kotlin.views.ComposeProps
 import expo.modules.ui.ModifierList
 import expo.modules.kotlin.views.OptimizedComposeProps
@@ -11,6 +14,14 @@ enum class ActivationMethod(val value: String) : Enumerable {
   LONG_PRESS("longPress")
 }
 
+@OptimizedRecord
+data class ExpoPopupProperties(
+  @Field val focusable: Boolean = true,
+  @Field val dismissOnBackPress: Boolean = true,
+  @Field val dismissOnClickOutside: Boolean = true,
+  @Field val clippingEnabled: Boolean = true
+) : Record
+
 @OptimizedComposeProps
 data class DropdownMenuProps(
   val activationMethod: ActivationMethod = ActivationMethod.SINGLE_PRESS,
@@ -18,5 +29,6 @@ data class DropdownMenuProps(
   val color: Color? = null,
   val cornerRadius: Float? = null,
   val modifiers: ModifierList = emptyList(),
-  val shadowElevation: Float? = null
+  val shadowElevation: Float? = null,
+  val properties: ExpoPopupProperties = ExpoPopupProperties()
 ) : ComposeProps

package/android/src/main/java/expo/modules/ui/menu/ExposedDropdownMenuView.kt

@@ -2,6 +2,7 @@ package expo.modules.ui.menu
 
 import android.graphics.Color
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ExposedDropdownMenu
 import androidx.compose.material3.MenuDefaults
 import androidx.compose.runtime.Composable
 import expo.modules.kotlin.views.ComposeProps

package/build/NativeTreeContext.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `true` inside a `Host`, where SwiftUI or Jetpack Compose renders the content. `RNHostView` sets it
+ * back to `false`, because its children are React Native views again.
+ */
+export declare const NativeTreeContext: import("react").Context<boolean>;
+export declare function useIsInsideNativeTree(): boolean;
+/**
+ * Warns once in development when a `Host` renders directly inside another `Host`'s native content.
+ */
+export declare function useWarnIfNestedHost(layoutSystem: 'SwiftUI' | 'Jetpack Compose'): void;

package/build/NativeTreeContext.js

@@ -0,0 +1,25 @@
+import { createContext, useContext, useEffect } from 'react';
+/**
+ * `true` inside a `Host`, where SwiftUI or Jetpack Compose renders the content. `RNHostView` sets it
+ * back to `false`, because its children are React Native views again.
+ */ export const NativeTreeContext = /*#__PURE__*/ createContext(false);
+export function useIsInsideNativeTree() {
+    return useContext(NativeTreeContext);
+}
+let warned = false;
+/**
+ * Warns once in development when a `Host` renders directly inside another `Host`'s native content.
+ */ export function useWarnIfNestedHost(layoutSystem) {
+    const isNested = useIsInsideNativeTree();
+    useEffect(()=>{
+        if (__DEV__ && isNested && !warned) {
+            warned = true;
+            console.warn(`[@expo/ui] A \`Host\` is rendered directly inside another \`Host\`'s ${layoutSystem} content. ` + `${layoutSystem} places it, but React Native can't see where, so its layout and \`measure()\` ` + `can be wrong, and a \`Pressable\` inside it can cancel its press. Wrap the nested \`Host\` in ` + `\`RNHostView\`, or render its ${layoutSystem} components directly in the outer \`Host\`.`);
+        }
+    }, [
+        isNested,
+        layoutSystem
+    ]);
+}
+
+//# sourceMappingURL=NativeTreeContext.js.map

package/build/NativeTreeContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["NativeTreeContext.tsx"],"sourcesContent":[null],"names":["createContext","useContext","useEffect","NativeTreeContext","useIsInsideNativeTree","warned","useWarnIfNestedHost","layoutSystem","isNested","__DEV__","console","warn"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,EAAEC,SAAS,QAAQ,QAAQ;AAE7D;;;CAGC,GACD,OAAO,MAAMC,kCAAoBH,cAAc,OAAO;AAEtD,OAAO,SAASI;IACd,OAAOH,WAAWE;AACpB;AAEA,IAAIE,SAAS;AAEb;;CAEC,GACD,OAAO,SAASC,oBAAoBC,YAA2C;IAC7E,MAAMC,WAAWJ;IACjBF,UAAU;QACR,IAAIO,WAAWD,YAAY,CAACH,QAAQ;YAClCA,SAAS;YACTK,QAAQC,IAAI,CACV,CAAC,qEAAqE,EAAEJ,aAAa,UAAU,CAAC,GAC9F,GAAGA,aAAa,8EAA8E,CAAC,GAC/F,CAAC,8FAA8F,CAAC,GAChG,CAAC,8BAA8B,EAAEA,aAAa,2CAA2C,CAAC;QAEhG;IACF,GAAG;QAACC;QAAUD;KAAa;AAC7B"}

package/build/community/bottom-sheet/BottomSheet.ios.js

@@ -177,8 +177,14 @@ function findNearestDetentIndex(detents, position) {
     const modifiers = useMemo(()=>{
         const bg = extractBackgroundColor(backgroundStyle);
         return [
-            ...fitToContents ? [
-                presentationSizing('fitted')
+            ...fitToContents ? // the system choose the width.
+            [
+                presentationSizing('automatic', {
+                    fitted: {
+                        horizontal: false,
+                        vertical: true
+                    }
+                })
             ] : [
                 presentationDetents(detents, {
                     selection: selectedDetent,
@@ -218,10 +224,11 @@ function findNearestDetentIndex(detents, position) {
                     children: /*#__PURE__*/ _jsx(Group, {
                         modifiers: modifiers,
                         children: /*#__PURE__*/ _jsx(RNHostView, {
-                            matchContents: fitToContents,
+                            matchContents: fitToContents ? {
+                                vertical: true
+                            } : false,
                             children: /*#__PURE__*/ _jsx(View, {
                                 style: fitToContents ? {
-                                    width,
                                     paddingTop: handleComponent !== null ? 16 : 0
                                 } : {
                                     flexGrow: 1,