@expo/ui 57.0.21 → 57.0.23

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{57.0.21/expo.modules.ui-57.0.21.module → 57.0.23/expo.modules.ui-57.0.23.module}

@@ -3,7 +3,7 @@
   "component": {
     "group": "expo.modules.ui",
     "module": "expo.modules.ui",
-    "version": "57.0.21",
+    "version": "57.0.23",
     "attributes": {
       "org.gradle.status": "release"
     }
@@ -24,13 +24,13 @@
       },
       "files": [
         {
-          "name": "expo.modules.ui-57.0.21.aar",
-          "url": "expo.modules.ui-57.0.21.aar",
-          "size": 2074203,
-          "sha512": "894745399f2255f02b84f664c1e62ab66d71daf4a24e3ce48ecfb7e60d0ba9abfbe31a5d9517953e2d365b786ba9da8ba8f476361777fd57006eb7fb7522c32c",
-          "sha256": "edfc30f6ff0935cee758638ea4443ec247e3628ba4a088f44f58becfca185b6e",
-          "sha1": "b8495e88a2dd3b3386885867acede44c5a99186f",
-          "md5": "8b8ece627534269af4e6dfa665f46f6c"
+          "name": "expo.modules.ui-57.0.23.aar",
+          "url": "expo.modules.ui-57.0.23.aar",
+          "size": 2087870,
+          "sha512": "7ba6b0ca0e41c0aeaea90cfc7d49664bb88531a251ba79b1124009eba0b724b48ba1c306744111a40871213cdf5767638b931803dc2229c4ba1850b6cc87ca15",
+          "sha256": "45594b39ac8f0c6eb37b663d40160b8e93b6d5f56b985a739c8a03c6780d910f",
+          "sha1": "bc99884c9e5f484800ffb10156cc8b50fa4d31c8",
+          "md5": "53230bb5c7cc2bcc0d717bc544974f6c"
         }
       ]
     },
@@ -141,13 +141,13 @@
       ],
       "files": [
         {
-          "name": "expo.modules.ui-57.0.21.aar",
-          "url": "expo.modules.ui-57.0.21.aar",
-          "size": 2074203,
-          "sha512": "894745399f2255f02b84f664c1e62ab66d71daf4a24e3ce48ecfb7e60d0ba9abfbe31a5d9517953e2d365b786ba9da8ba8f476361777fd57006eb7fb7522c32c",
-          "sha256": "edfc30f6ff0935cee758638ea4443ec247e3628ba4a088f44f58becfca185b6e",
-          "sha1": "b8495e88a2dd3b3386885867acede44c5a99186f",
-          "md5": "8b8ece627534269af4e6dfa665f46f6c"
+          "name": "expo.modules.ui-57.0.23.aar",
+          "url": "expo.modules.ui-57.0.23.aar",
+          "size": 2087870,
+          "sha512": "7ba6b0ca0e41c0aeaea90cfc7d49664bb88531a251ba79b1124009eba0b724b48ba1c306744111a40871213cdf5767638b931803dc2229c4ba1850b6cc87ca15",
+          "sha256": "45594b39ac8f0c6eb37b663d40160b8e93b6d5f56b985a739c8a03c6780d910f",
+          "sha1": "bc99884c9e5f484800ffb10156cc8b50fa4d31c8",
+          "md5": "53230bb5c7cc2bcc0d717bc544974f6c"
         }
       ]
     },
@@ -161,13 +161,13 @@
       },
       "files": [
         {
-          "name": "expo.modules.ui-57.0.21-sources.jar",
-          "url": "expo.modules.ui-57.0.21-sources.jar",
-          "size": 105285,
-          "sha512": "bd014a7ec6f4940b753de1ef54b686c8316d45a4242893e9a508948dd22fc893063a285538d30a3fa943deedbf32915697892ff4a739e17fcb2b194a79f71d8d",
-          "sha256": "352b556c7e482ce79471552b5d73a5f29d92e9a339fd3edecf327c7df9e6576b",
-          "sha1": "ca977e2408458c690c3555514485a6a8e7fade24",
-          "md5": "711eb23ebb503bc13f871f580afcbcf0"
+          "name": "expo.modules.ui-57.0.23-sources.jar",
+          "url": "expo.modules.ui-57.0.23-sources.jar",
+          "size": 107457,
+          "sha512": "0a89146da34d837d01eb682540df3405b70f6b1d18c50bedc2ecc1d0dee3188df777de03a5b629100950a0f6d3c2d9f89f52416641cb22d8f3a715c8e841ff18",
+          "sha256": "5f4063182b296fa0028d945a2621f9d8a86eb5219b0ad88492a18dfe4d737978",
+          "sha1": "04332c3498b6b2a56dfb4cbefe592c11f4a8f36a",
+          "md5": "9e119ee5a1c2c38e6d69d4f866341e7a"
         }
       ]
     }

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.23/expo.modules.ui-57.0.23.module.md5

@@ -0,0 +1 @@
+b3a06b094eae6f84e73699ac32760a44

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.23/expo.modules.ui-57.0.23.module.sha1

@@ -0,0 +1 @@
+0f57bae59c7621092ebe1c14bfb8c87cc5b7273c

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.23/expo.modules.ui-57.0.23.module.sha256

@@ -0,0 +1 @@
+0b119d47d60446499106b77dc5f2c57ceec7eba851a407248935ad6e2ecc3539

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.23/expo.modules.ui-57.0.23.module.sha512

@@ -0,0 +1 @@
+7f583d3b3219882068aec8344ed3dc1018dd834668efb13abb894a7f40383e29d5927b3831e05e6fdeb563cc88c4dfbc7755f2cd1c196f7f94944a7952e43b70

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{57.0.21/expo.modules.ui-57.0.21.pom → 57.0.23/expo.modules.ui-57.0.23.pom}

@@ -9,7 +9,7 @@
   <modelVersion>4.0.0</modelVersion>
   <groupId>expo.modules.ui</groupId>
   <artifactId>expo.modules.ui</artifactId>
-  <version>57.0.21</version>
+  <version>57.0.23</version>
   <packaging>aar</packaging>
   <name>expo.modules.ui</name>
   <url>https://github.com/expo/expo</url>

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.23/expo.modules.ui-57.0.23.pom.md5

@@ -0,0 +1 @@
+39de5794b34d0288ebb94069326a5c68

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.23/expo.modules.ui-57.0.23.pom.sha1

@@ -0,0 +1 @@
+62243ce65c64f455e89ce81503d756d2e527d796

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.23/expo.modules.ui-57.0.23.pom.sha256

@@ -0,0 +1 @@
+44a4eede4dc8a4bded07f608acb42e408ce8f348f356b2da8c9d59e213cd7211

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.23/expo.modules.ui-57.0.23.pom.sha512

@@ -0,0 +1 @@
+cf1da141b64a97372daa7bd1c5df1e9b385ad5fcc99a1bc61405fe63cbdee68ac487cfd7a034fb6a2b103e9be2559c3f8366cdbec67826b71ccb6718ff31ee4c

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml

@@ -3,11 +3,11 @@
   <groupId>expo.modules.ui</groupId>
   <artifactId>expo.modules.ui</artifactId>
   <versioning>
-    <latest>57.0.21</latest>
-    <release>57.0.21</release>
+    <latest>57.0.23</latest>
+    <release>57.0.23</release>
     <versions>
-      <version>57.0.21</version>
+      <version>57.0.23</version>
     </versions>
-    <lastUpdated>20260929104945</lastUpdated>
+    <lastUpdated>20261012142026</lastUpdated>
   </versioning>
 </metadata>

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.md5

@@ -1 +1 @@
-d9951eb0ffdbd1f3b4e8c66a9506881d
+24ee94a25190ebaeb53918c5209d4321

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha1

@@ -1 +1 @@
-ee273f19364a6847e08cbe5eb1b5daadf787040f
+19abdc5ee5d92e4d98095aba33600fd7d66cdd9a

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha256

@@ -1 +1 @@
-950f75c93b0ef32cc69e20471f3a68ac9088427130a66ded938e0c3ded940478
+d5851aa26d95ed5105d695c05844f6188c86f45a8320f41d9e135463fa0294b0

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha512

@@ -1 +1 @@
-ecc49926b4fd4296bc3b844a0f9a313ef93474eeb921d900d082366cb28c80c466c6dc4c5fa1b3445072b1e1bedb4b8cdf62022039209423a27b5d5c9a381a3e
+5ed30451f94f10e9f83d081992d999c14cca93e46c5d37296d2634c82ae630e4c5cc264158a9de4df3db398c3afa42f99f9b4fb64d19f6c432d0919950274cbc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/ui",
-  "version": "57.0.21",
+  "version": "57.0.23",
   "description": "A collection of UI components",
   "sideEffects": [
     "*.fx.js",
@@ -96,8 +96,8 @@
     "@types/react": "~19.2.0",
     "react-native-reanimated": "4.5.1",
     "react-native-worklets": "0.10.1",
-    "expo-module-scripts": "56.0.3",
-    "expo": "57.0.26"
+    "expo": "57.0.28",
+    "expo-module-scripts": "56.0.3"
   },
   "jest": {
     "preset": "expo-module-scripts"
@@ -121,7 +121,7 @@
       "optional": true
     }
   },
-  "gitHead": "ad1efa3fa5802156660198ba5d787f91014d8df3",
+  "gitHead": "58da4edafcb043872c3ed9bf8f5957e6544d0a9c",
   "scripts": {
     "build": "expo-module build",
     "clean": "expo-module clean",

package/src/community/bottom-sheet/BottomSheet.ios.tsx

@@ -199,8 +199,9 @@ export function BottomSheet(props: BottomSheetProps) {
     const bg = extractBackgroundColor(backgroundStyle);
     return [
       ...(fitToContents
-        ? // Makes the iPad sheet size to that content instead of opening near full height.
-          [presentationSizing('fitted')]
+        ? // Fits the sheet height to the content (iPad opens near full height otherwise) and lets
+          // the system choose the width.
+          [presentationSizing('automatic', { fitted: { horizontal: false, vertical: true } })]
         : [
             presentationDetents(detents, {
               selection: selectedDetent,
@@ -231,16 +232,16 @@ export function BottomSheet(props: BottomSheetProps) {
             onDismiss={fireCloseCallbacks}
             fitToContents={fitToContents}>
             <Group modifiers={modifiers}>
-              <RNHostView matchContents={fitToContents}>
+              <RNHostView matchContents={fitToContents ? { vertical: true } : false}>
                 {/* paddingTop compensates for tighter spacing between native drag indicator and content
                     compared to gorhom's handle. flexGrow:1 + height:0 (flex-basis 0) fills the snap-point
                     height without inheriting the scrollable child's intrinsic content height. With matchContents,
-                    RNHostView lays the hosted view out at its own size, so `width` gives it the sheet width
-                    while its height stays content-sized. */}
+                    RNHostView takes the width from the sheet, which can be narrower than the window, and
+                    the height from the content. */}
                 <View
                   style={
                     fitToContents
-                      ? { width, paddingTop: handleComponent !== null ? 16 : 0 }
+                      ? { paddingTop: handleComponent !== null ? 16 : 0 }
                       : { flexGrow: 1, height: 0, paddingTop: handleComponent !== null ? 16 : 0 }
                   }>
                   <SheetScrollContextReset>{children}</SheetScrollContextReset>

package/src/community/datetime-picker/DateTimePicker.android.tsx

@@ -1,4 +1,5 @@
 import { buildEvent, buildChangeEvent, type DateTimePickerProps } from './types';
+import { localDateToUtcDayISOString, utcDayToLocalDate } from './utils';
 import {
   DateTimePicker as AndroidPicker,
   DatePickerDialog as AndroidDatePickerDialog,
@@ -52,6 +53,14 @@ export function DateTimePicker(props: DateTimePickerProps) {
     negativeButton,
   } = props;
 
+  // Material3 date pickers work in UTC days, while `value` and the reported date are local —
+  // matching `@react-native-community/datetimepicker`. Send `value`'s local calendar day as a UTC
+  // day and convert the picked UTC day back, keeping `value`'s time of day. The native side
+  // already converts `minimumDate`/`maximumDate` by their local calendar day. Time pickers read
+  // local hours from the instant, so they take `value` unchanged.
+  const usesDateComponents = mode !== 'time';
+  const initialDate = usesDateComponents ? localDateToUtcDayISOString(value) : value.toISOString();
+
   const onDismissed = () => {
     if (onDismissProp) {
       onDismissProp();
@@ -70,10 +79,11 @@ export function DateTimePicker(props: DateTimePickerProps) {
   };
 
   const onDateSelected = (date: Date) => {
+    const selected = usesDateComponents ? utcDayToLocalDate(date, value) : date;
     if (onValueChange) {
-      onValueChange(buildChangeEvent(date), date);
+      onValueChange(buildChangeEvent(selected), selected);
     } else {
-      onChange?.(buildEvent(date), date);
+      onChange?.(buildEvent(selected), selected);
     }
   };
 
@@ -81,7 +91,7 @@ export function DateTimePicker(props: DateTimePickerProps) {
     minimumDate || maximumDate ? { start: minimumDate, end: maximumDate } : undefined;
 
   const dialogProps = {
-    initialDate: value.toISOString(),
+    initialDate,
     color: accentColor,
     confirmButtonLabel: positiveButton?.label,
     dismissButtonLabel: negativeButton?.label,
@@ -111,7 +121,7 @@ export function DateTimePicker(props: DateTimePickerProps) {
   return (
     <Host matchContents={{ vertical: true }} style={style}>
       <AndroidPicker
-        initialDate={value.toISOString()}
+        initialDate={initialDate}
         displayedComponents={modeToDisplayedComponents(mode)}
         variant={displayToAndroidVariant(display)}
         selectableDates={selectableDates}
@@ -119,6 +129,10 @@ export function DateTimePicker(props: DateTimePickerProps) {
         color={accentColor}
         onDateSelected={onDateSelected}
         showVariantToggle={false}
+        // Match iOS, where the inline picker has no label: hide Material 3's "Select date" title
+        // and its selected-date headline.
+        showTitle={false}
+        showHeadline={false}
         {...(testID ? { testID } : undefined)}
       />
     </Host>

package/src/community/datetime-picker/utils.ts

@@ -0,0 +1,21 @@
+// Material3's DatePicker (and the native side's `toUtcDayMillis` bounds conversion) works in UTC
+// days, while `value`, `minimumDate`, and `maximumDate` are local dates — matching
+// `@react-native-community/datetimepicker`. These helpers convert between the two.
+
+/**
+ * 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 function localDateToUtcDayISOString(value: Date): string {
+  return new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate())).toISOString();
+}
+
+/**
+ * Converts the UTC-midnight day reported by Material3 back into a local date, keeping the time of
+ * day from `timeOfDay`.
+ */
+export function utcDayToLocalDate(utcDay: Date, timeOfDay: Date): Date {
+  const result = new Date(timeOfDay);
+  result.setFullYear(utcDay.getUTCFullYear(), utcDay.getUTCMonth(), utcDay.getUTCDate());
+  return result;
+}

package/src/community/picker/Picker.android.tsx

@@ -36,6 +36,11 @@ export function Picker<T extends PickerItemValue>(props: PickerProps<T>) {
   const selectedLabel = selectedItem?.label ?? '';
   const labelState = useNativeState(selectedLabel);
 
+  // `useNativeState` only captures its initial value, so push later changes to the field.
+  React.useEffect(() => {
+    labelState.set(selectedLabel);
+  }, [labelState, selectedLabel]);
+
   return (
     <Host style={style} matchContents={{ vertical: true }}>
       <ExposedDropdownMenuBox

package/src/jetpack-compose/DatePicker/index.tsx

@@ -131,6 +131,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.
@@ -252,6 +266,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.
    */
@@ -332,6 +358,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;

package/src/jetpack-compose/RNHostView/index.tsx

@@ -4,6 +4,7 @@ import type { LayoutChangeEvent } from 'react-native';
 
 import { PresentedContentContext, useIsPresentedInOwnWindow } from '../../PresentedContentContext';
 import type { ModifierConfig } from '../../types';
+import { resolveMatchContents } from '../../utils/matchContents';
 import type { PrimitiveBaseProps } from '../layout';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
@@ -11,10 +12,12 @@ export interface RNHostProps extends PrimitiveBaseProps {
   /**
    * When `true`, the RNHost will update its size in the Jetpack Compose view tree to match the children's size.
    * When `false`, the RNHost will use the size of the parent Jetpack Compose View.
+   * Pass an object to choose per axis. For example, `{ vertical: true }` takes the width from the
+   * parent and the height from the children, so text wraps and grows vertically.
    * Can be only set once on mount.
    * @default false
    */
-  matchContents?: boolean;
+  matchContents?: boolean | { vertical?: boolean; horizontal?: boolean };
   /**
    * Called on mount and whenever this view's layout in the React Native view tree changes.
    * With `matchContents`, the reported size is the one measured from the hosted view.
@@ -30,8 +33,10 @@ export interface RNHostProps extends PrimitiveBaseProps {
   modifiers?: ModifierConfig[];
 }
 
-type NativeRNHostProps = RNHostProps & {
+type NativeRNHostProps = Omit<RNHostProps, 'matchContents'> & {
   layoutRoot: boolean;
+  matchContentsHorizontal: boolean;
+  matchContentsVertical: boolean;
   /**
    * Internal. Drives the shadow node's content measurement, see
    * `ExpoViewShadowNode::sizesToContent`.
@@ -44,13 +49,17 @@ const NativeRNHostView: ComponentType<NativeRNHostProps> = requireNativeView(
 );
 
 function transformProps(props: RNHostProps, layoutRoot: boolean): NativeRNHostProps {
-  const { modifiers, ...restProps } = props;
+  const { modifiers, matchContents, ...restProps } = props;
+  const { horizontal: matchContentsHorizontal, vertical: matchContentsVertical } =
+    resolveMatchContents(matchContents);
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
     layoutRoot,
-    expoInternalSizeFromChildren: props.matchContents,
+    matchContentsHorizontal,
+    matchContentsVertical,
+    expoInternalSizeFromChildren: matchContentsHorizontal || matchContentsVertical,
   };
 }
 
@@ -61,12 +70,14 @@ export function RNHostView(props: RNHostProps) {
   // is what makes a `Pressable` drop its press on the first finger movement.
   const layoutRoot = useIsPresentedInOwnWindow();
 
+  const nativeProps = transformProps(props, layoutRoot);
+
   return (
     <NativeRNHostView
-      {...transformProps(props, layoutRoot)}
+      {...nativeProps}
       // `matchContents` can only be used once on mount
       // So we force unmount when it changes to prevent unexpected layout
-      key={props.matchContents ? 'matchContents' : 'noMatchContents'}>
+      key={`${nativeProps.matchContentsHorizontal}-${nativeProps.matchContentsVertical}`}>
       {/* Reset context here so only nearest RNHostView becomes the layout root for its children, and not any other RNHostView above it in the tree. */}
       <PresentedContentContext.Provider value={false}>
         {props.children}

package/src/jetpack-compose/modifiers/index.ts

@@ -79,10 +79,24 @@ export const fillMaxWidth = (fraction?: number) => createModifier('fillMaxWidth'
 export const fillMaxHeight = (fraction?: number) => createModifier('fillMaxHeight', { fraction });
 
 /**
- * Sets the exact width of the view.
- * @param value - Width in dp.
+ * Intrinsic width values for the `width` modifier. `Min` is the smallest width at which the content
+ * still draws correctly, and `Max` is the width the content needs when nothing limits it.
  */
-export const width = (value: number) => createModifier('width', { width: value });
+export const IntrinsicSize = { Min: 'min', Max: 'max' } as const;
+// eslint-disable-next-line @typescript-eslint/no-redeclare -- value and type share the name, like an enum
+export type IntrinsicSize = (typeof IntrinsicSize)[keyof typeof IntrinsicSize];
+
+/**
+ * Sets the width of the view to an exact value, or to the minimum or maximum intrinsic width of its
+ * content. The incoming constraints can still make the view narrower or wider than that width.
+ * @param value - Width in dp, or an `IntrinsicSize`. `IntrinsicSize.Min` uses the minimum intrinsic
+ * width, the smallest width at which the content still draws correctly (for a text, its widest word).
+ * `IntrinsicSize.Max` uses the maximum intrinsic width, the width the content needs when nothing
+ * limits it (for a text, a single line).
+ * @see [Compose `width(IntrinsicSize)` modifier](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/width.modifier#(androidx.compose.ui.Modifier).width(androidx.compose.foundation.layout.IntrinsicSize))
+ * @see [Intrinsic measurements in Compose layouts](https://developer.android.com/develop/ui/compose/layouts/intrinsic-measurements)
+ */
+export const width = (value: number | IntrinsicSize) => createModifier('width', { width: value });
 
 /**
  * Sets the exact height of the view.

package/src/swift-ui/ArrangementView/index.tsx

@@ -0,0 +1,70 @@
+import { requireNativeView } from 'expo';
+
+import { Slot } from '../SlotView';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
+export interface ArrangementViewProps extends CommonViewModifierProps {
+  /**
+   * The views to arrange. Provide `ArrangementView.Primary` and `ArrangementView.Secondary`.
+   */
+  children: React.ReactNode;
+}
+
+const ArrangementViewNativeView: React.ComponentType<ArrangementViewProps> = requireNativeView(
+  'ExpoUI',
+  'ArrangementViewView'
+);
+
+/**
+ * The primary view of the arrangement.
+ */
+function ArrangementViewPrimary(props: { children: React.ReactNode }) {
+  return <Slot name="primary">{props.children}</Slot>;
+}
+
+/**
+ * The secondary view of the arrangement.
+ */
+function ArrangementViewSecondary(props: { children: React.ReactNode }) {
+  return <Slot name="secondary">{props.children}</Slot>;
+}
+
+ArrangementView.Primary = ArrangementViewPrimary;
+ArrangementView.Secondary = ArrangementViewSecondary;
+
+/**
+ * ArrangementView uses the native [ArrangementView](https://developer.apple.com/documentation/swiftui/arrangementview) view.
+ *
+ * A view that arranges primary and secondary content using an adaptive layout that responds to
+ * the environment.
+ *
+ * > **Note:** Below iOS 27.1, the children render without a container.
+ * @example
+ * ```tsx
+ * <Host style={{ flex: 1 }}>
+ *   <ArrangementView modifiers={[arrangementViewStyle('split')]}>
+ *     <ArrangementView.Primary>
+ *       <NowPlaying />
+ *     </ArrangementView.Primary>
+ *     <ArrangementView.Secondary>
+ *       <Lyrics />
+ *     </ArrangementView.Secondary>
+ *   </ArrangementView>
+ * </Host>
+ * ```
+ * @platform ios 27.1+
+ * @platform tvos 27.1+
+ */
+export function ArrangementView(props: ArrangementViewProps) {
+  const { modifiers, children, ...restProps } = props;
+
+  return (
+    <ArrangementViewNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}>
+      {children}
+    </ArrangementViewNativeView>
+  );
+}

package/src/swift-ui/Chart/index.tsx

@@ -102,6 +102,16 @@ export type PieChartStyle = {
    * Space between slices in points.
    */
   angularInset?: number;
+  /**
+   * Corner radius of each slice in points. On a donut, half the ring's thickness gives fully rounded ends.
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * Opacity of each slice, from 0 to 1.
+   * @default 0.8
+   */
+  opacity?: number;
 };
 
 /**

package/src/swift-ui/RNHostView.tsx

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import type { LayoutChangeEvent } from 'react-native';
 
 import { PresentedContentContext, useIsPresentedInOwnWindow } from '../PresentedContentContext';
+import { resolveMatchContents } from '../utils/matchContents';
 
 const RNHostNativeView: React.ComponentType<any> = requireNativeView('ExpoUI', 'RNHostView');
 
@@ -10,10 +11,12 @@ export interface RNHostViewProps {
    * When `true`, the RNHost will update its size in the React Native view tree to match the
    * children's size.
    * When `false`, the RNHost will use the size of the parent SwiftUI View.
+   * Pass an object to choose per axis. For example, `{ vertical: true }` takes the width from the
+   * parent and the height from the children, so text wraps and grows vertically.
    * Can be only set once on mount.
    * @default false
    */
-  matchContents?: boolean;
+  matchContents?: boolean | { vertical?: boolean; horizontal?: boolean };
   onLayout?: (event: LayoutChangeEvent) => void;
   /**
    * The RN View to be hosted.
@@ -21,21 +24,25 @@ export interface RNHostViewProps {
   children: React.ReactElement;
 }
 
-export function RNHostView(props: RNHostViewProps) {
+export function RNHostView({ matchContents, ...props }: RNHostViewProps) {
   // A sheet or popover presents its content in its own view controller, where the React Native
   // surface root is not an ancestor and so touch dispatches don't work.
   // Hosted content there owns its touches and is the origin it is measured from; native reads
   // this one prop for both.
   const layoutRoot = useIsPresentedInOwnWindow();
+  const { horizontal: matchContentsHorizontal, vertical: matchContentsVertical } =
+    resolveMatchContents(matchContents);
 
   return (
     <RNHostNativeView
       {...props}
       layoutRoot={layoutRoot}
-      expoInternalSizeFromChildren={props.matchContents}
+      matchContentsHorizontal={matchContentsHorizontal}
+      matchContentsVertical={matchContentsVertical}
+      expoInternalSizeFromChildren={matchContentsHorizontal || matchContentsVertical}
       // `matchContents` can only be used once on mount
       // So we force unmount when it changes to prevent unexpected layout
-      key={props.matchContents ? 'matchContents' : 'noMatchContents'}>
+      key={`${matchContentsHorizontal}-${matchContentsVertical}`}>
       {/* Reset context here so only nearest RNHostView becomes the layout root for its children, and not any other RNHostView above it in the tree. */}
       <PresentedContentContext.Provider value={false}>
         {props.children}

package/src/swift-ui/index.tsx

@@ -28,6 +28,7 @@ export * from './Menu';
 export * from './NavigationDestination';
 export * from './NavigationLink';
 export * from './NavigationSplitView';
+export * from './ArrangementView';
 export * from './NavigationStack';
 export * from './Picker';
 export * from './ProgressView';