@expo/ui 57.0.21 → 57.0.23

package/CHANGELOG.md

@@ -10,6 +10,45 @@
 
 ### 💡 Others
 
+## 57.0.23 — 2026-10-12
+
+### 🎉 New features
+
+- [Android] Add `showTitle` and `showHeadline` to the Jetpack Compose `DateTimePicker`, `DatePickerDialog`, `DateRangePicker`, and `DateRangePickerDialog` to hide Material 3's title and headline. The community `DateTimePicker` with `presentation="inline"` now hides both on Android, matching iOS. To keep the title and headline, use `DateTimePicker` from `@expo/ui/jetpack-compose` instead. ([#51274](https://github.com/expo/expo/pull/51274) by [@IGx89](https://github.com/IGx89))
+- [iOS] Add `searchable` and `searchToolbarBehavior` SwiftUI modifiers. ([#50369](https://github.com/expo/expo/pull/50369) by [@expo-bot](https://github.com/expo-bot))
+- [iOS][Android] `RNHostView` `matchContents` accepts `{ horizontal, vertical }`, so hosted content can take its width from the parent and its height from the content. ([#50674](https://github.com/expo/expo/pull/50674) by [@nishan](https://github.com/intergalacticspacehighway))
+- [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))
+
+### 🐛 Bug fixes
+
+- [Android] Fix a `Pressable` (or any JS responder) being cancelled when a `MaskedView`, or any other component that renders a `Host`, is laid over it. Once React Native grants the JS responder, the responder's view intercepts the touch stream and sends `ACTION_CANCEL` to its native children, including that `Host`. The `Host` reported this cancel as Compose claiming the gesture, which cancelled the press it belonged to. Holds longer than about 30 ms never fired `onPress`. ([#51163](https://github.com/expo/expo/pull/51163) by [@1kuko3](https://github.com/1kuko3))
+- [iOS] Fix `Picker` not reporting a selection that equals the last `selection` prop when the user changes it again before the prop updates. ([#51196](https://github.com/expo/expo/pull/51196) by [@expo-bot](https://github.com/expo-bot))
+- [iOS] Fix `Chart` ignoring `lineStyle.width` on line charts. The line mark applied `.lineStyle` twice (once for the dash pattern, once for the width), and the first one wins, so lines always rendered at 1 pt. The width and the dash pattern are now set in one `StrokeStyle`. ([#51283](https://github.com/expo/expo/pull/51283) by [@brentvatne](https://github.com/brentvatne))
+- [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] 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 [@nishan](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 [@nishan](https://github.com/intergalacticspacehighway))
+
+## 57.0.22 — 2026-10-06
+
+### 🎉 New features
+
+- [android] Added `IntrinsicSize` support to the `width` modifier. ([#50693](https://github.com/expo/expo/pull/50693) by [@janicduplessis](https://github.com/janicduplessis))
+- [iOS] Added the `preferredColorScheme` modifier, which sets the color scheme of a presentation such as `BottomSheet`, including its background. ([#50851](https://github.com/expo/expo/pull/50851) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] Added the `navigationBarTitleDisplayMode` and `toolbarTitleDisplayMode` modifiers for controlling navigation and toolbar title presentation. ([#50687](https://github.com/expo/expo/pull/50687) by [@0x5bfa](https://github.com/0x5bfa))
+- [iOS] Added the `smooth`, `snappy`, and `bouncy` spring presets to `Animation`. Like their SwiftUI counterparts, they take an optional `duration` and `extraBounce`. ([#50984](https://github.com/expo/expo/pull/50984) by [@Den1Marshall](https://github.com/Den1Marshall))
+- [iOS] Add `ArrangementView` component and `arrangementViewStyle`, `splitArrangementLayoutRatio`, `splitArrangementLayoutSize`, `splitArrangementFixedLayoutSize`, and `overlayArrangementEdge` modifiers. ([#50893](https://github.com/expo/expo/pull/50893) by [@nishan](https://github.com/intergalacticspacehighway))
+
+### 🐛 Bug fixes
+
+- [Android] Fix the community `DateTimePicker` reading `value` as a UTC day while `minimumDate`/`maximumDate` use the device-local day. In non-UTC timezones the picker could select and return the wrong day — one before `minimumDate`. `value`'s local calendar day is now sent to Material3 as a UTC day, and the picked day is returned as a local date that keeps `value`'s time of day. ([#50941](https://github.com/expo/expo/pull/50941) by [@expo-bot](https://github.com/expo-bot))
+- [Android] Fix `TimePickerDialog` ignoring `elementColors.containerColor`. ([#51116](https://github.com/expo/expo/pull/51116) by [@expo-bot](https://github.com/expo-bot))
+- [Android] Fix an intermittent `performMeasureAndLayout called during measure layout` crash that tore down the ReactHost when a `Host` with `matchContents` was measured while react-native-reanimated was active. The `onLayoutContent` event is now posted after the measure pass instead of emitted inside it. ([#49933](https://github.com/expo/expo/pull/49933) by [@expo-bot](https://github.com/expo-bot))
+- [android] Fix `Switch` label rendering one letter per line inside a `Host` with `matchContents`. ([#50693](https://github.com/expo/expo/pull/50693) by [@janicduplessis](https://github.com/janicduplessis))
+- [android] Fix `community/picker` `Picker` not updating its displayed label after a selection or a `selectedValue` change. ([#50801](https://github.com/expo/expo/pull/50801) by [@RaddishIoW](https://github.com/RaddishIoW))
+- [iOS] Fixed `delay()` and `repeat()` modifying the animation they are called on. Chaining from a shared animation, such as `Animation.default` or one stored in a constant, no longer changes that animation everywhere else it is used. ([#50927](https://github.com/expo/expo/pull/50927) by [@Den1Marshall](https://github.com/Den1Marshall))
+- [iOS] Stop linking WidgetKit into apps that use `@expo/ui` without widgets. The `widgetURL`, `activityBackgroundTint`, `widgetAccentedRenderingMode`, and `containerBackground` (`widget` placement) modifiers and the `AccessoryWidgetBackground` view now take effect only inside `expo-widgets` widgets and Live Activities. ([#50786](https://github.com/expo/expo/pull/50786) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS][tvOS] Fix the tvOS build failing to compile with `'inlineLarge' is unavailable in tvOS` when `@expo/ui` is linked. `ToolbarTitleDisplayMode.inlineLarge` is unavailable on tvOS, but the `inlineLarge` case of the `toolbarTitleDisplayMode` modifier was only gated behind an OS version check that listed `tvOS 18.0`, so it was compiled into the tvOS slice. It is now guarded by platform and returns `nil` on tvOS. The same check also required iOS 18.0 / macOS 15.0, so `inlineLarge` silently fell back to `automatic` on iOS 17 and macOS 14 even though it is available there; it now applies on those versions. ([#51007](https://github.com/expo/expo/pull/51007) by [@gabrieldonadel](https://github.com/gabrieldonadel))
+
 ## 57.0.21 — 2026-09-29
 
 ### 🎉 New features

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 = '57.0.21'
+version = '57.0.23'
 
 android {
   namespace "expo.modules.ui"
   defaultConfig {
     versionCode 1
-    versionName "57.0.21"
+    versionName "57.0.23"
     testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
   }
   buildFeatures {

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

@@ -4,6 +4,7 @@ import androidx.compose.material3.AlertDialog
 import androidx.compose.ui.res.stringResource
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.DatePicker
+import androidx.compose.material3.DatePickerColors
 import androidx.compose.material3.DatePickerDefaults
 import androidx.compose.material3.DatePickerDialog
 import androidx.compose.material3.DatePickerState
@@ -158,6 +159,8 @@ data class DateTimePickerProps(
   val variant: Variant = Variant.PICKER,
   val displayedComponents: DisplayedComponents = DisplayedComponents.DATE,
   val showVariantToggle: Boolean = true,
+  val showTitle: Boolean = true,
+  val showHeadline: Boolean = true,
   val is24Hour: Boolean = true,
   val color: AndroidColor? = null,
   val elementColors: DateTimePickerColorOverrides = DateTimePickerColorOverrides(),
@@ -170,6 +173,8 @@ data class DatePickerDialogProps(
   val initialDate: Long? = null,
   val variant: Variant = Variant.PICKER,
   val showVariantToggle: Boolean = true,
+  val showTitle: Boolean = true,
+  val showHeadline: Boolean = true,
   val confirmButtonLabel: String? = null,
   val dismissButtonLabel: String? = null,
   val color: AndroidColor? = null,
@@ -388,7 +393,7 @@ fun ExpoDatePickerDialogContent(props: DatePickerDialogProps, onDateSelected: (D
     // Material3's year-selector chevron tints from the ambient LocalContentColor (which defaults to
     // black), not `navigationContentColor`; bind the local so the chevron honors the navigation color.
     CompositionLocalProvider(LocalContentColor provides colors.navigationContentColor) {
-      DatePicker(
+      MaterialDatePicker(
         modifier = if (displayMode == DisplayMode.Picker) {
           Modifier.wrapContentHeight(align = Alignment.Top, unbounded = true)
         } else {
@@ -396,6 +401,8 @@ fun ExpoDatePickerDialogContent(props: DatePickerDialogProps, onDateSelected: (D
         },
         state = state,
         showModeToggle = props.showVariantToggle,
+        showTitle = props.showTitle,
+        showHeadline = props.showHeadline,
         colors = colors
       )
     }
@@ -443,6 +450,7 @@ fun ExpoTimePickerDialogContent(props: TimePickerDialogProps, onDateSelected: (D
         Text(props.dismissButtonLabel ?: stringResource(android.R.string.cancel))
       }
     },
+    containerColor = timePickerColors.containerColor,
     text = {
       TimePicker(
         state = state,
@@ -498,15 +506,41 @@ fun ExpoDatePicker(modifier: Modifier = Modifier, props: DateTimePickerProps, on
   // Material3's year-selector chevron tints from the ambient LocalContentColor (which defaults to
   // black), not `navigationContentColor`; bind the local so the chevron honors the navigation color.
   CompositionLocalProvider(LocalContentColor provides colors.navigationContentColor) {
-    DatePicker(
+    MaterialDatePicker(
       modifier = modifier,
       state = state,
       showModeToggle = props.showVariantToggle,
+      showTitle = props.showTitle,
+      showHeadline = props.showHeadline,
       colors = colors
     )
   }
 }
 
+// Material 3 hides the title or headline when its slot is `null`. Its default slots pad themselves
+// with private constants, so branch on the call instead of copying them, keeping the defaults exact.
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun MaterialDatePicker(
+  modifier: Modifier = Modifier,
+  state: DatePickerState,
+  showModeToggle: Boolean,
+  showTitle: Boolean,
+  showHeadline: Boolean,
+  colors: DatePickerColors
+) {
+  when {
+    showTitle && showHeadline ->
+      DatePicker(state = state, modifier = modifier, colors = colors, showModeToggle = showModeToggle)
+    showTitle ->
+      DatePicker(state = state, modifier = modifier, colors = colors, headline = null, showModeToggle = showModeToggle)
+    showHeadline ->
+      DatePicker(state = state, modifier = modifier, colors = colors, title = null, showModeToggle = showModeToggle)
+    else ->
+      DatePicker(state = state, modifier = modifier, colors = colors, title = null, headline = null, showModeToggle = showModeToggle)
+  }
+}
+
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ExpoTimePicker(modifier: Modifier = Modifier, props: DateTimePickerProps, onDateSelected: (DatePickerResult) -> Unit) {

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

@@ -1,6 +1,7 @@
 package expo.modules.ui
 
 import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.DatePickerColors
 import androidx.compose.material3.DatePickerDefaults
 import androidx.compose.material3.DatePickerDialog
 import androidx.compose.material3.DateRangePicker
@@ -13,6 +14,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.stringResource
 import expo.modules.kotlin.records.Field
@@ -38,6 +40,8 @@ data class DateRangePickerProps(
   val initialEndDate: Long? = null,
   val variant: Variant = Variant.PICKER,
   val showVariantToggle: Boolean = true,
+  val showTitle: Boolean = true,
+  val showHeadline: Boolean = true,
   val color: AndroidColor? = null,
   val elementColors: DateTimePickerColorOverrides = DateTimePickerColorOverrides(),
   val selectableDates: SelectableDatesRecord? = null,
@@ -50,6 +54,8 @@ data class DateRangePickerDialogProps(
   val initialEndDate: Long? = null,
   val variant: Variant = Variant.PICKER,
   val showVariantToggle: Boolean = true,
+  val showTitle: Boolean = true,
+  val showHeadline: Boolean = true,
   val confirmButtonLabel: String? = null,
   val dismissButtonLabel: String? = null,
   val color: AndroidColor? = null,
@@ -147,9 +153,11 @@ fun ExpoDateRangePickerDialogContent(
     ApplyDatePickerDialogKeyboardBehavior(displayMode)
 
     CompositionLocalProvider(LocalContentColor provides colors.navigationContentColor) {
-      DateRangePicker(
+      MaterialDateRangePicker(
         state = state,
         showModeToggle = props.showVariantToggle,
+        showTitle = props.showTitle,
+        showHeadline = props.showHeadline,
         colors = colors
       )
     }
@@ -181,11 +189,36 @@ fun FunctionalComposableScope.DateRangePickerContent(
 
   val colors = buildDatePickerColors(props.elementColors, props.color.composeOrNull)
   CompositionLocalProvider(LocalContentColor provides colors.navigationContentColor) {
-    DateRangePicker(
+    MaterialDateRangePicker(
       modifier = modifier,
       state = state,
       showModeToggle = props.showVariantToggle,
+      showTitle = props.showTitle,
+      showHeadline = props.showHeadline,
       colors = colors
     )
   }
 }
+
+// See MaterialDatePicker: branching keeps Material 3's own default title and headline slots.
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun MaterialDateRangePicker(
+  modifier: Modifier = Modifier,
+  state: DateRangePickerState,
+  showModeToggle: Boolean,
+  showTitle: Boolean,
+  showHeadline: Boolean,
+  colors: DatePickerColors
+) {
+  when {
+    showTitle && showHeadline ->
+      DateRangePicker(state = state, modifier = modifier, colors = colors, showModeToggle = showModeToggle)
+    showTitle ->
+      DateRangePicker(state = state, modifier = modifier, colors = colors, headline = null, showModeToggle = showModeToggle)
+    showHeadline ->
+      DateRangePicker(state = state, modifier = modifier, colors = colors, title = null, showModeToggle = showModeToggle)
+    else ->
+      DateRangePicker(state = state, modifier = modifier, colors = colors, title = null, headline = null, showModeToggle = showModeToggle)
+  }
+}

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

@@ -4,6 +4,7 @@ package expo.modules.ui
 
 import android.annotation.SuppressLint
 import android.content.Context
+import android.view.MotionEvent
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.displayCutout
@@ -104,6 +105,26 @@ internal class HostView(context: Context, appContext: AppContext) :
   private val onLayoutContent by EventDispatcher<LayoutContentEvent>()
   private var lastDispatchedContentSize: IntSize? = null
 
+  /**
+   * True while this view passes down an `ACTION_CANCEL` that came from its React Native parent,
+   * not from a Compose gesture detector. React Native already owns that gesture: the usual cause is
+   * the JS responder's view intercepting the stream, which cancels its native children.
+   */
+  internal var isDispatchingCancelFromParent = false
+    private set
+
+  override fun dispatchTouchEvent(ev: MotionEvent): Boolean {
+    if (ev.actionMasked != MotionEvent.ACTION_CANCEL) {
+      return super.dispatchTouchEvent(ev)
+    }
+    isDispatchingCancelFromParent = true
+    try {
+      return super.dispatchTouchEvent(ev)
+    } finally {
+      isDispatchingCancelFromParent = false
+    }
+  }
+
   @Composable
   override fun ComposableScope.Content() {
     val context = LocalContext.current
@@ -232,7 +253,13 @@ internal class HostView(context: Context, appContext: AppContext) :
         shadowNodeProxy.setStyleSize(styleWidth?.toDouble(), styleHeight?.toDouble())
       }
 
-      onLayoutContent(LayoutContentEvent(width.toDouble(), height.toDouble()))
+      // `onSizeChanged` runs inside the Compose measure pass. Emitting the event here reaches
+      // Fabric event listeners synchronously (e.g. reanimated's `onEventDispatch` hook), which
+      // can flush mount items and re-enter `onMeasure` of a view that is mid-measure — Compose
+      // then throws "performMeasureAndLayout called during measure layout" and takes down the
+      // ReactHost. Post the dispatch so it runs after the measure pass completes.
+      // See https://github.com/expo/expo/issues/47625.
+      post { onLayoutContent(LayoutContentEvent(width.toDouble(), height.toDouble())) }
     }
   }
 

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

@@ -19,6 +19,7 @@ import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -73,6 +74,7 @@ import expo.modules.kotlin.AppContext
 import expo.modules.kotlin.records.Field
 import expo.modules.kotlin.records.Record
 import expo.modules.kotlin.records.recordFromMap
+import expo.modules.kotlin.types.Either
 import expo.modules.kotlin.types.Enumerable
 import expo.modules.kotlin.views.ComposableScope
 import expo.modules.ui.convertibles.AlignmentType
@@ -127,6 +129,21 @@ internal data class WidthParams(
   @Field val width: Int = 0
 ) : Record
 
+internal enum class IntrinsicSizeType(val value: String) : Enumerable {
+  MIN("min"),
+  MAX("max");
+
+  fun toComposeIntrinsicSize(): IntrinsicSize = when (this) {
+    MIN -> IntrinsicSize.Min
+    MAX -> IntrinsicSize.Max
+  }
+}
+
+@OptimizedRecord
+internal data class ComposeWidthParams(
+  @Field val width: Either<Double, IntrinsicSizeType>? = null
+) : Record
+
 @OptimizedRecord
 internal data class HeightParams(
   @Field val height: Int = 0
@@ -453,8 +470,12 @@ object ModifierRegistry {
     }
 
     register("width") { map, _, _, _ ->
-      val params = recordFromMap<WidthParams>(map)
-      Modifier.width(params.width.dp)
+      val width = recordFromMap<ComposeWidthParams>(map).width
+      if (width?.`is`(IntrinsicSizeType::class) == true) {
+        Modifier.width(width.second().toComposeIntrinsicSize())
+      } else {
+        Modifier.width((width?.first() ?: 0.0).dp)
+      }
     }
 
     register("height") { map, _, _, _ ->

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

@@ -8,15 +8,23 @@ import android.view.View
 import android.view.ViewGroup
 import android.view.ViewParent
 import android.widget.FrameLayout
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.requiredHeight
 import androidx.compose.foundation.layout.requiredSize
+import androidx.compose.foundation.layout.requiredWidth
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.ui.Alignment
 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
@@ -40,7 +48,8 @@ import expo.modules.kotlin.views.OptimizedComposeProps
 
 @OptimizedComposeProps
 internal data class RNHostViewProps(
-  val matchContents: MutableState<Boolean?> = mutableStateOf(null),
+  val matchContentsHorizontal: MutableState<Boolean?> = mutableStateOf(null),
+  val matchContentsVertical: MutableState<Boolean?> = mutableStateOf(null),
   //  Adds LeafNode and MeasurableYogaNode trait in Shadow node
   val expoInternalSizeFromChildren: MutableState<Boolean?> = mutableStateOf(null),
   val modifiers: ModifierList = emptyList()
@@ -144,22 +153,33 @@ internal class RNHostView(context: Context, appContext: AppContext) :
 
   @Composable
   override fun ComposableScope.Content() {
-    val matchContents = props.matchContents.value ?: false
+    val matchContentsHorizontal = props.matchContentsHorizontal.value ?: false
+    val matchContentsVertical = props.matchContentsVertical.value ?: false
     val scope: ComposableScope = this
 
     wrapperState.value?.let { wrapper ->
       childViewState.value ?: return@let
-      val sizingModifier = if (matchContents) {
-        applySizeFromYogaNodeModifier()
-      } else {
-        Modifier
-          .fillMaxSize()
-          .then(reportSizeToYogaNodeModifier())
+      val sizingModifier = when {
+        matchContentsHorizontal && matchContentsVertical -> applySizeFromYogaNodeModifier()
+        matchContentsVertical ->
+          Modifier
+            .fillMaxWidth()
+            .then(reportSizeToYogaNodeModifier(reportHeight = false))
+            .then(applyHeightFromYogaNodeModifier())
+        matchContentsHorizontal ->
+          Modifier
+            .fillMaxHeight()
+            .then(reportSizeToYogaNodeModifier(reportWidth = false))
+            .then(applyWidthFromYogaNodeModifier())
+        else ->
+          Modifier
+            .fillMaxSize()
+            .then(reportSizeToYogaNodeModifier())
       }
-      // Origin last: a chain applies outside-in, so a caller `padding` or `offset` has to shift the
-      // content before it is read.
-      val modifiers = sizingModifier
-        .then(ModifierRegistry.applyModifiers(props.modifiers, appContext, scope, globalEventDispatcher))
+      // A chain applies outside-in. Caller modifiers go first so a `padding` or `border` shrinks the
+      // box before its size is reported and its origin is read.
+      val modifiers = ModifierRegistry.applyModifiers(props.modifiers, appContext, scope, globalEventDispatcher)
+        .then(sizingModifier)
         .then(publishContentOriginModifier())
 
       AndroidView(
@@ -190,6 +210,28 @@ internal class RNHostView(context: Context, appContext: AppContext) :
     }
   }
 
+  @Composable
+  private fun applyHeightFromYogaNodeModifier(): Modifier {
+    val height = childSizeState.value.height
+    if (height <= 0) {
+      return Modifier
+    }
+    return Modifier
+      .wrapContentHeight(Alignment.Top, unbounded = true)
+      .requiredHeight(with(LocalDensity.current) { height.toDp() })
+  }
+
+  @Composable
+  private fun applyWidthFromYogaNodeModifier(): Modifier {
+    val width = childSizeState.value.width
+    if (width <= 0) {
+      return Modifier
+    }
+    return Modifier
+      .wrapContentWidth(Alignment.CenterHorizontally, unbounded = true)
+      .requiredWidth(with(LocalDensity.current) { width.toDp() })
+  }
+
   /**
    * Publishes where Compose placed this view inside its `Host`, which Yoga has no way to know:
    * Yoga puts the box at the `Host`'s origin while Compose may draw it anywhere inside. Without
@@ -219,13 +261,21 @@ internal class RNHostView(context: Context, appContext: AppContext) :
   // Sets Yoga node size from Compose view size
   // Listens Compose view size changes and updates the Yoga node size
   @Composable
-  private fun reportSizeToYogaNodeModifier(): Modifier {
+  private fun reportSizeToYogaNodeModifier(reportWidth: Boolean = true, reportHeight: Boolean = true): Modifier {
     val density = LocalDensity.current
     return Modifier.onSizeChanged { size ->
       with(density) {
         shadowNodeProxy.setViewSize(
-          size.width.toDp().value.toDouble(),
-          size.height.toDp().value.toDouble()
+          if (reportWidth) {
+            size.width.toDp().value.toDouble()
+          } else {
+            Double.NaN
+          },
+          if (reportHeight) {
+            size.height.toDp().value.toDouble()
+          } else {
+            Double.NaN
+          }
         )
       }
     }
@@ -247,6 +297,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
@@ -304,7 +376,8 @@ private class TouchDispatchingRootViewGroup(
 
   override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
     // Always gets called with EXACTLY mode
-    // because parent has either fillMaxSize (matchContents = false) or requiredSize (matchContents = true) modifiers
+    // because parent has fillMaxSize (matchContents = false), requiredSize (matchContents = true), or a
+    // fillMax* + required* pair (one matched axis) modifiers
     setMeasuredDimension(
       MeasureSpec.getSize(widthMeasureSpec),
       MeasureSpec.getSize(heightMeasureSpec)
@@ -316,8 +389,25 @@ 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 && !dispatchesTouchesToJS) {
+    if (
+      ev.actionMasked == MotionEvent.ACTION_CANCEL &&
+      !dispatchesTouchesToJS &&
+      !isCancelFromReactNative()
+    ) {
       // Compose cancels this subtree when a gesture detector above it claims the gesture. The
       // ancestor root, which dispatches this subtree's touches, keeps streaming moves, so a
       // `Pressable` still fires on release. Tell it a native child took over.
@@ -371,6 +461,23 @@ private class TouchDispatchingRootViewGroup(
     return handled
   }
 
+  /**
+   * Whether this cancel reached the `Host` from React Native rather than from Compose. The JS
+   * responder's view intercepts the stream once it's granted, which cancels its native children,
+   * including the `Host` of a `MaskedView` laid over a `Pressable`. JS still owns that gesture, so
+   * reporting it as a native one would cancel the press it belongs to.
+   */
+  private fun isCancelFromReactNative(): Boolean {
+    var current: ViewParent? = parent
+    while (current != null) {
+      if (current is HostView) {
+        return current.isDispatchingCancelFromParent
+      }
+      current = current.parent
+    }
+    return false
+  }
+
   private inline fun notifyAncestorRootViews(block: (RootView) -> Unit) {
     var current: ViewParent? = parent
     while (current != null) {

package/build/community/bottom-sheet/BottomSheet.ios.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.ios.d.ts","sourceRoot":"","sources":["../../../src/community/bottom-sheet/BottomSheet.ios.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAsB,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAepE,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAwD3C;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA4KlD"}
+{"version":3,"file":"BottomSheet.ios.d.ts","sourceRoot":"","sources":["../../../src/community/bottom-sheet/BottomSheet.ios.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAsB,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAepE,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAwD3C;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA6KlD"}

package/build/community/datetime-picker/DateTimePicker.android.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.android.d.ts","sourceRoot":"","sources":["../../../src/community/datetime-picker/DateTimePicker.android.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAmCjF,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CA0FxD"}
+{"version":3,"file":"DateTimePicker.android.d.ts","sourceRoot":"","sources":["../../../src/community/datetime-picker/DateTimePicker.android.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAoCjF,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CAuGxD"}

package/build/community/datetime-picker/utils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Returns the ISO string of the UTC midnight of `value`'s local calendar day, so Material3 shows
+ * the same day the user sees locally.
+ */
+export declare function localDateToUtcDayISOString(value: Date): string;
+/**
+ * Converts the UTC-midnight day reported by Material3 back into a local date, keeping the time of
+ * day from `timeOfDay`.
+ */
+export declare function utcDayToLocalDate(utcDay: Date, timeOfDay: Date): Date;
+//# sourceMappingURL=utils.d.ts.map

package/build/community/datetime-picker/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/community/datetime-picker/utils.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,CAE9D;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,GAAG,IAAI,CAIrE"}

package/build/community/picker/Picker.android.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.android.d.ts","sourceRoot":"","sources":["../../../src/community/picker/Picker.android.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,WAAW,EACjB,MAAM,SAAS,CAAC;AAYjB;;;GAGG;AACH,wBAAgB,MAAM,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,2CA8CtE;yBA9Ce,MAAM"}
+{"version":3,"file":"Picker.android.d.ts","sourceRoot":"","sources":["../../../src/community/picker/Picker.android.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,WAAW,EACjB,MAAM,SAAS,CAAC;AAYjB;;;GAGG;AACH,wBAAgB,MAAM,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,2CAmDtE;yBAnDe,MAAM"}

package/build/jetpack-compose/DatePicker/index.d.ts

@@ -122,6 +122,20 @@ export interface DateTimePickerProps {
      * @default true
      */
     showVariantToggle?: boolean;
+    /**
+     * Whether the picker shows its title, such as "Select date". When `false`, the picker passes
+     * `null` to Material 3's `title` slot. This prop has no effect when `displayedComponents` is
+     * `'hourAndMinute'`.
+     * @default true
+     */
+    showTitle?: boolean;
+    /**
+     * Whether the picker shows its headline, which displays the current selection. When `false`,
+     * the picker passes `null` to Material 3's `headline` slot. This prop has no effect when
+     * `displayedComponents` is `'hourAndMinute'`.
+     * @default true
+     */
+    showHeadline?: boolean;
     /**
      * The components that the picker should display.
      * On Android, you can have a picker that selects just the date or just the time.
@@ -191,6 +205,18 @@ export interface DateRangePickerProps {
      * @default true
      */
     showVariantToggle?: boolean;
+    /**
+     * Whether the picker shows its title, such as "Select date". When `false`, the picker passes
+     * `null` to Material 3's `title` slot.
+     * @default true
+     */
+    showTitle?: boolean;
+    /**
+     * Whether the picker shows its headline, which displays the current selection. When `false`,
+     * the picker passes `null` to Material 3's `headline` slot.
+     * @default true
+     */
+    showHeadline?: boolean;
     /**
      * The tint color to use on the picker elements.
      */
@@ -224,6 +250,18 @@ export interface DatePickerDialogProps {
     initialDate?: string | null;
     variant?: AndroidVariant;
     showVariantToggle?: boolean;
+    /**
+     * Whether the picker shows its title, such as "Select date". When `false`, the picker passes
+     * `null` to Material 3's `title` slot.
+     * @default true
+     */
+    showTitle?: boolean;
+    /**
+     * Whether the picker shows its headline, which displays the current selection. When `false`,
+     * the picker passes `null` to Material 3's `headline` slot.
+     * @default true
+     */
+    showHeadline?: boolean;
     confirmButtonLabel?: string;
     dismissButtonLabel?: string;
     color?: ColorValue;