@expo/ui 58.0.8 → 58.0.10

package/build/universal/RNHostView/index.js

@@ -1,13 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet, View } from 'react-native';
+import { resolveMatchContents } from '../../utils/matchContents';
 import { useUniversalLifecycle } from '../hooks';
 const styles = StyleSheet.create({
-    fillParent: {
-        width: '100%',
+    fillWidth: {
+        width: '100%'
+    },
+    fillHeight: {
         height: '100%'
     },
-    matchContents: {
-        width: 'fit-content',
+    fitWidth: {
+        width: 'fit-content'
+    },
+    fitHeight: {
         height: 'fit-content'
     },
     hidden: {
@@ -18,11 +23,13 @@ const styles = StyleSheet.create({
  * Hosts React Native views inside Jetpack Compose or SwiftUI views.
  */ export function RNHostView({ children, style, onAppear, onDisappear, hidden = false, testID, matchContents = false, onLayout }) {
     useUniversalLifecycle(onAppear, onDisappear);
+    const { horizontal, vertical } = resolveMatchContents(matchContents);
     return /*#__PURE__*/ _jsx(View, {
         testID: testID,
         onLayout: onLayout,
         style: [
-            matchContents ? styles.matchContents : styles.fillParent,
+            horizontal ? styles.fitWidth : styles.fillWidth,
+            vertical ? styles.fitHeight : styles.fillHeight,
             style,
             hidden && styles.hidden
         ],

package/build/universal/RNHostView/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["universal/RNHostView/index.tsx"],"sourcesContent":[null],"names":["StyleSheet","View","useUniversalLifecycle","styles","create","fillParent","width","height","matchContents","hidden","display","RNHostView","children","style","onAppear","onDisappear","testID","onLayout"],"mappings":";AAAA,SAASA,UAAU,EAAEC,IAAI,QAAQ,eAAe;AAEhD,SAASC,qBAAqB,QAAQ,WAAW;AAGjD,MAAMC,SAASH,WAAWI,MAAM,CAAC;IAC/BC,YAAY;QAAEC,OAAO;QAAQC,QAAQ;IAAO;IAC5CC,eAAe;QAAEF,OAAO;QAAeC,QAAQ;IAAc;IAC7DE,QAAQ;QAAEC,SAAS;IAAO;AAC5B;AAEA;;CAEC,GACD,OAAO,SAASC,WAAW,EACzBC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXN,SAAS,KAAK,EACdO,MAAM,EACNR,gBAAgB,KAAK,EACrBS,QAAQ,EACQ;IAChBf,sBAAsBY,UAAUC;IAEhC,qBACE,KAACd;QACCe,QAAQA;QACRC,UAAUA;QACVJ,OAAO;YACLL,gBAAgBL,OAAOK,aAAa,GAAGL,OAAOE,UAAU;YACxDQ;YACAJ,UAAUN,OAAOM,MAAM;SACxB;kBACAG;;AAGP;AAEA,cAAc,UAAU"}
+{"version":3,"sources":["universal/RNHostView/index.tsx"],"sourcesContent":[null],"names":["StyleSheet","View","resolveMatchContents","useUniversalLifecycle","styles","create","fillWidth","width","fillHeight","height","fitWidth","fitHeight","hidden","display","RNHostView","children","style","onAppear","onDisappear","testID","matchContents","onLayout","horizontal","vertical"],"mappings":";AAAA,SAASA,UAAU,EAAEC,IAAI,QAAQ,eAAe;AAEhD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,qBAAqB,QAAQ,WAAW;AAGjD,MAAMC,SAASJ,WAAWK,MAAM,CAAC;IAC/BC,WAAW;QAAEC,OAAO;IAAO;IAC3BC,YAAY;QAAEC,QAAQ;IAAO;IAC7BC,UAAU;QAAEH,OAAO;IAAc;IACjCI,WAAW;QAAEF,QAAQ;IAAc;IACnCG,QAAQ;QAAEC,SAAS;IAAO;AAC5B;AAEA;;CAEC,GACD,OAAO,SAASC,WAAW,EACzBC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXN,SAAS,KAAK,EACdO,MAAM,EACNC,gBAAgB,KAAK,EACrBC,QAAQ,EACQ;IAChBlB,sBAAsBc,UAAUC;IAChC,MAAM,EAAEI,UAAU,EAAEC,QAAQ,EAAE,GAAGrB,qBAAqBkB;IAEtD,qBACE,KAACnB;QACCkB,QAAQA;QACRE,UAAUA;QACVL,OAAO;YACLM,aAAalB,OAAOM,QAAQ,GAAGN,OAAOE,SAAS;YAC/CiB,WAAWnB,OAAOO,SAAS,GAAGP,OAAOI,UAAU;YAC/CQ;YACAJ,UAAUR,OAAOQ,MAAM;SACxB;kBACAG;;AAGP;AAEA,cAAc,UAAU"}

package/build/universal/RNHostView/types.d.ts

@@ -6,16 +6,21 @@ import type { UniversalBaseProps } from '../types';
  */
 export interface RNHostViewProps extends UniversalBaseProps {
     /**
-     * When `true`, the host updates its size in the native view tree to match
-     * the children's size. When `false`, the host uses the size of the parent
-     * native view.
+     * When `true`, the host updates its size in the SwiftUI or Compose view tree to
+     * match the children's size. When `false`, the host uses the size of the parent
+     * SwiftUI or 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 only be set once on mount; changing it remounts the component.
      * @default false
      * @platform android
      * @platform ios
      */
-    matchContents?: boolean;
+    matchContents?: boolean | {
+        vertical?: boolean;
+        horizontal?: boolean;
+    };
     onLayout?: (event: LayoutChangeEvent) => void;
     /**
      * The React Native view to host.

package/build/universal/RNHostView/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["universal/RNHostView/types.ts"],"sourcesContent":[null],"names":[],"mappings":"AAKA;;CAEC,GACD,WAmBC"}
+{"version":3,"sources":["universal/RNHostView/types.ts"],"sourcesContent":[null],"names":[],"mappings":"AAKA;;CAEC,GACD,WAqBC"}

package/build/universal/Switch/index.android.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Row, Switch as ComposeSwitch, Text } from '@expo/ui/jetpack-compose';
-import { testID as testIDModifier, weight } from '@expo/ui/jetpack-compose/modifiers';
+import { fillMaxWidth, IntrinsicSize, testID as testIDModifier, weight, width } from '@expo/ui/jetpack-compose/modifiers';
 export function Switch({ value, onValueChange, label, disabled, testID, modifiers }) {
     const toggle = /*#__PURE__*/ _jsx(ComposeSwitch, {
         value: value,
@@ -19,6 +19,10 @@ export function Switch({ value, onValueChange, label, disabled, testID, modifier
         horizontalArrangement: {
             spacedBy: 8
         },
+        modifiers: [
+            fillMaxWidth(),
+            width(IntrinsicSize.Max)
+        ],
         children: [
             /*#__PURE__*/ _jsx(Text, {
                 modifiers: [

package/build/universal/Switch/index.android.js.map

@@ -1 +1 @@
-{"version":3,"sources":["universal/Switch/index.android.tsx"],"sourcesContent":[null],"names":["Row","Switch","ComposeSwitch","Text","testID","testIDModifier","weight","value","onValueChange","label","disabled","modifiers","toggle","onCheckedChange","undefined","enabled","verticalAlignment","horizontalArrangement","spacedBy"],"mappings":";AAAA,SAASA,GAAG,EAAEC,UAAUC,aAAa,EAAEC,IAAI,QAAQ,2BAA2B;AAC9E,SAASC,UAAUC,cAAc,EAAEC,MAAM,QAAQ,qCAAqC;AAItF,OAAO,SAASL,OAAO,EAAEM,KAAK,EAAEC,aAAa,EAAEC,KAAK,EAAEC,QAAQ,EAAEN,MAAM,EAAEO,SAAS,EAAe;IAC9F,MAAMC,uBACJ,KAACV;QACCK,OAAOA;QACPM,iBAAiBH,WAAWI,YAAYN;QACxCO,SAAS,CAACL;QACVC,WAAW;eAAKA,aAAa,EAAE;eAAOP,SAAS;gBAACC,eAAeD;aAAQ,GAAG,EAAE;SAAE;;IAIlF,IAAIK,SAAS,MAAM,OAAOG;IAE1B,qBACE,MAACZ;QAAIgB,mBAAkB;QAASC,uBAAuB;YAAEC,UAAU;QAAE;;0BACnE,KAACf;gBAAKQ,WAAW;oBAACL,OAAO;iBAAG;0BAAGG;;YAC9BG;;;AAGP;AAEA,cAAc,UAAU"}
+{"version":3,"sources":["universal/Switch/index.android.tsx"],"sourcesContent":[null],"names":["Row","Switch","ComposeSwitch","Text","fillMaxWidth","IntrinsicSize","testID","testIDModifier","weight","width","value","onValueChange","label","disabled","modifiers","toggle","onCheckedChange","undefined","enabled","verticalAlignment","horizontalArrangement","spacedBy","Max"],"mappings":";AAAA,SAASA,GAAG,EAAEC,UAAUC,aAAa,EAAEC,IAAI,QAAQ,2BAA2B;AAC9E,SACEC,YAAY,EACZC,aAAa,EACbC,UAAUC,cAAc,EACxBC,MAAM,EACNC,KAAK,QACA,qCAAqC;AAI5C,OAAO,SAASR,OAAO,EAAES,KAAK,EAAEC,aAAa,EAAEC,KAAK,EAAEC,QAAQ,EAAEP,MAAM,EAAEQ,SAAS,EAAe;IAC9F,MAAMC,uBACJ,KAACb;QACCQ,OAAOA;QACPM,iBAAiBH,WAAWI,YAAYN;QACxCO,SAAS,CAACL;QACVC,WAAW;eAAKA,aAAa,EAAE;eAAOR,SAAS;gBAACC,eAAeD;aAAQ,GAAG,EAAE;SAAE;;IAIlF,IAAIM,SAAS,MAAM,OAAOG;IAE1B,qBACE,MAACf;QACCmB,mBAAkB;QAClBC,uBAAuB;YAAEC,UAAU;QAAE;QACrCP,WAAW;YAACV;YAAgBK,MAAMJ,cAAciB,GAAG;SAAE;;0BACrD,KAACnB;gBAAKW,WAAW;oBAACN,OAAO;iBAAG;0BAAGI;;YAC9BG;;;AAGP;AAEA,cAAc,UAAU"}

package/build/utils/matchContents.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Resolves `RNHostView`'s `matchContents` prop to one flag per axis.
+ */
+export declare function resolveMatchContents(matchContents: boolean | {
+    vertical?: boolean;
+    horizontal?: boolean;
+} | null | undefined): {
+    horizontal: boolean;
+    vertical: boolean;
+};

package/build/utils/matchContents.js

@@ -0,0 +1,16 @@
+/**
+ * Resolves `RNHostView`'s `matchContents` prop to one flag per axis.
+ */ export function resolveMatchContents(matchContents) {
+    if (matchContents != null && typeof matchContents === 'object') {
+        return {
+            horizontal: matchContents.horizontal ?? false,
+            vertical: matchContents.vertical ?? false
+        };
+    }
+    return {
+        horizontal: matchContents ?? false,
+        vertical: matchContents ?? false
+    };
+}
+
+//# sourceMappingURL=matchContents.js.map

package/build/utils/matchContents.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/matchContents.ts"],"sourcesContent":[null],"names":["resolveMatchContents","matchContents","horizontal","vertical"],"mappings":"AAAA;;CAEC,GACD,OAAO,SAASA,qBACdC,aAAwF;IAExF,IAAIA,iBAAiB,QAAQ,OAAOA,kBAAkB,UAAU;QAC9D,OAAO;YACLC,YAAYD,cAAcC,UAAU,IAAI;YACxCC,UAAUF,cAAcE,QAAQ,IAAI;QACtC;IACF;IACA,OAAO;QAAED,YAAYD,iBAAiB;QAAOE,UAAUF,iBAAiB;IAAM;AAChF"}

package/expo-module.config.json

@@ -10,7 +10,6 @@
     "publication": {
       "groupId": "expo.modules.ui",
       "artifactId": "expo.modules.ui",
-      "version": "58.0.8",
       "repository": "local-maven-repo"
     }
   }

package/ios/DataListForEachView.swift

@@ -3,7 +3,26 @@
 import ExpoModulesCore
 import SwiftUI
 
+// The axis the rows scroll along: vertical in `List` and `LazyVStack`, horizontal in `LazyHStack`.
+enum DataListForEachAxis: String, Enumerable {
+  case vertical
+  case horizontal
+}
+
+private struct ContainerCrossAxisSizeKey: EnvironmentKey {
+  static let defaultValue: CGFloat = 0
+}
+
+extension EnvironmentValues {
+  // Set by `ListView`, `LazyVStackView` and `LazyHStackView`, so recycled rows reset their cached sizes when it changes.
+  var containerCrossAxisSize: CGFloat {
+    get { self[ContainerCrossAxisSizeKey.self] }
+    set { self[ContainerCrossAxisSizeKey.self] = newValue }
+  }
+}
+
 final class DataListForEachProps: UIBaseViewProps {
+  @Field var axis: DataListForEachAxis = .vertical
   @Field var itemKeys: [String] = []
   @Field var revision: Int = 0
   @Field var estimatedItemSize: Double = 64
@@ -79,6 +98,7 @@ private struct DataListForEachRow: View {
   @ObservedObject var listProps: DataListForEachProps
   @ObservedObject var poolProps: DataListForEachPoolProps
   let window: DataListForEachWindow
+  @Environment(\.containerCrossAxisSize) private var crossAxisSize
   @State private var appeared = false
   @State private var visibilityID = UUID()
 
@@ -99,27 +119,27 @@ private struct DataListForEachRow: View {
           itemKey: itemKey,
           index: index,
           revision: listProps.revision,
-          estimatedHeight: CGFloat(listProps.estimatedItemSize),
+          estimatedSize: CGFloat(listProps.estimatedItemSize),
+          axis: listProps.axis,
           window: window
         )
       } else {
-        Color.clear
-          .frame(height: window.height(for: itemKey, fallback: listProps.estimatedItemSize))
-          .accessibilityHidden(true)
+        DataListForEachPlaceholder(
+          size: window.size(for: itemKey, fallback: listProps.estimatedItemSize),
+          axis: listProps.axis
+        )
       }
     }
-    .frame(maxWidth: .infinity, alignment: .leading)
     .onAppear {
       appeared = true
+      window.updateCrossAxisSize(crossAxisSize)
       window.appear(itemKey, index: index, token: visibilityID, props: listProps)
     }
+    .onChange(of: crossAxisSize) { window.updateCrossAxisSize($0) }
     .onChange(of: listProps.revision) { _ in
       window.reset(listProps)
       if appeared { window.appear(itemKey, index: index, token: visibilityID, props: listProps) }
     }
-    .onGeometryChange(for: CGFloat.self, of: { $0.size.width }, action: { width in
-      window.updateWidth(width)
-    })
     .onDisappear {
       appeared = false
       window.disappear(itemKey, token: visibilityID)
@@ -127,12 +147,25 @@ private struct DataListForEachRow: View {
   }
 }
 
+private struct DataListForEachPlaceholder: View {
+  let size: CGFloat
+  let axis: DataListForEachAxis
+
+  // Sized along the scroll axis only, so it never stretches a lazy stack across it.
+  var body: some View {
+    Color.clear
+      .frame(width: axis == .horizontal ? size : 0, height: axis == .horizontal ? 0 : size)
+      .accessibilityHidden(true)
+  }
+}
+
 private struct DataListForEachSlotContent: View {
   @ObservedObject var props: DataListForEachItemProps
   let itemKey: String
   let index: Int
   let revision: Int
-  let estimatedHeight: CGFloat
+  let estimatedSize: CGFloat
+  let axis: DataListForEachAxis
   let window: DataListForEachWindow
   // we use this state so swiftui re-layouts when the slot is reused for a different item
   @State private var showsContent = false
@@ -146,14 +179,17 @@ private struct DataListForEachSlotContent: View {
       if showsContent {
         DataListForEachItemView(props: props)
           .id(itemKey)
-          .onGeometryChange(for: CGFloat.self, of: { $0.size.height }, action: { height in
-            window.measure(height, for: itemKey, revision: revision)
-          })
+          .onGeometryChange(
+            for: CGFloat.self,
+            of: { axis == .horizontal ? $0.size.width : $0.size.height },
+            action: { size in window.measure(size, for: itemKey, revision: revision) }
+          )
       } else {
         // Hide the previous item while JS updates this slot.
-        Color.clear
-          .frame(height: window.height(for: itemKey, fallback: Double(estimatedHeight)))
-          .accessibilityHidden(true)
+        DataListForEachPlaceholder(
+          size: window.size(for: itemKey, fallback: Double(estimatedSize)),
+          axis: axis
+        )
       }
     }
     .onAppear { showsContent = matches }
@@ -166,8 +202,9 @@ private final class DataListForEachWindow: ObservableObject {
   private weak var props: DataListForEachProps?
   private var appeared: [String: Int] = [:]
   private var visibilityTokens: [String: UUID] = [:]
-  private var heights: [String: CGFloat] = [:]
-  private var width: CGFloat = 0
+  // Row sizes along the scroll axis.
+  private var sizes: [String: CGFloat] = [:]
+  private var crossAxisSize: CGFloat = 0
   private var revision = -1
   private var pending: DispatchWorkItem?
   private var lastSent: [Int] = []
@@ -182,7 +219,7 @@ private final class DataListForEachWindow: ObservableObject {
       return
     }
     revision = props.revision
-    heights.removeAll()
+    sizes.removeAll()
     let positions = Dictionary(uniqueKeysWithValues: props.itemKeys.enumerated().map { ($0.element, $0.offset) })
     appeared = positions.filter { appeared[$0.key] != nil }
     visibilityTokens = visibilityTokens.filter { positions[$0.key] != nil }
@@ -190,12 +227,12 @@ private final class DataListForEachWindow: ObservableObject {
     schedule()
   }
 
-  func updateWidth(_ newWidth: CGFloat) {
-    if width != newWidth {
-      if width > 0 {
-        heights.removeAll()
+  func updateCrossAxisSize(_ newSize: CGFloat) {
+    if crossAxisSize != newSize {
+      if crossAxisSize > 0 {
+        sizes.removeAll()
       }
-      width = newWidth
+      crossAxisSize = newSize
     }
   }
 
@@ -220,15 +257,15 @@ private final class DataListForEachWindow: ObservableObject {
     schedule()
   }
 
-  func height(for key: String, fallback: Double) -> CGFloat {
-    heights[key] ?? CGFloat(fallback)
+  func size(for key: String, fallback: Double) -> CGFloat {
+    sizes[key] ?? CGFloat(fallback)
   }
 
-  func measure(_ height: CGFloat, for key: String, revision: Int) {
-    guard revision == self.revision, height.isFinite, height > 0 else {
+  func measure(_ size: CGFloat, for key: String, revision: Int) {
+    guard revision == self.revision, size.isFinite, size > 0 else {
       return
     }
-    heights[key] = height
+    sizes[key] = size
   }
 
   private func schedule() {

package/ios/ExpoUIModule.swift

@@ -204,7 +204,6 @@ public final class ExpoUIModule: Module {
     ExpoUIView(BackgroundView.self)
     ExpoUIView(MaskView.self)
     ExpoUIView(GridView.self)
-    ExpoUIView(AccessoryWidgetBackgroundView.self)
     ExpoUIView(LinkView.self)
     ExpoUIView(TabView.self)
     ExpoUIView(Tab.self)

package/ios/LazyHStackView.swift

@@ -10,6 +10,7 @@ public final class LazyHStackViewProps: UIBaseViewProps {
 
 public struct LazyHStackView: ExpoSwiftUI.View {
   @ObservedObject public var props: LazyHStackViewProps
+  @State private var crossAxisSize: CGFloat = 0
 
   public init(props: LazyHStackViewProps) {
     self.props = props
@@ -21,5 +22,7 @@ public struct LazyHStackView: ExpoSwiftUI.View {
       spacing: props.spacing.map { CGFloat($0) }) {
         Children()
     }
+    .onGeometryChange(for: CGFloat.self, of: { $0.size.height }, action: { crossAxisSize = $0 })
+    .environment(\.containerCrossAxisSize, crossAxisSize)
   }
 }

package/ios/LazyVStackView.swift

@@ -10,6 +10,7 @@ public final class LazyVStackViewProps: UIBaseViewProps {
 
 public struct LazyVStackView: ExpoSwiftUI.View {
   @ObservedObject public var props: LazyVStackViewProps
+  @State private var crossAxisSize: CGFloat = 0
 
   public init(props: LazyVStackViewProps) {
     self.props = props
@@ -21,5 +22,7 @@ public struct LazyVStackView: ExpoSwiftUI.View {
       spacing: props.spacing.map { CGFloat($0) }) {
         Children()
     }
+    .onGeometryChange(for: CGFloat.self, of: { $0.size.width }, action: { crossAxisSize = $0 })
+    .environment(\.containerCrossAxisSize, crossAxisSize)
   }
 }

package/ios/ListView.swift

@@ -11,8 +11,16 @@ final class ListProps: UIBaseViewProps {
 struct ListView: ExpoSwiftUI.View {
   @ObservedObject var props: ListProps
   @State private var selection = Set<AnyHashable>()
+  @State private var crossAxisSize: CGFloat = 0
 
   var body: some View {
+    list
+      .onGeometryChange(for: CGFloat.self, of: { $0.size.width }, action: { crossAxisSize = $0 })
+      .environment(\.containerCrossAxisSize, crossAxisSize)
+  }
+
+  @ViewBuilder
+  private var list: some View {
     if props.selection != nil {
       List(selection: $selection) {
         Children()

package/ios/Modifiers/ContainerBackgroundModifier.swift

@@ -2,9 +2,6 @@
 
 import ExpoModulesCore
 import SwiftUI
-#if !os(tvOS)
-import WidgetKit
-#endif
 
 internal enum ContainerBackgroundPlacementOptions: String, Enumerable {
   case widget
@@ -12,10 +9,11 @@ internal enum ContainerBackgroundPlacementOptions: String, Enumerable {
   case navigationSplitView
 
 #if !os(tvOS) && !os(macOS)
+  // `widget` is declared in WidgetKit, so expo-widgets applies it through `ViewModifierRegistry.widgetKit`.
   @available(iOS 18.0, *)
-  var toContainerBackgroundPlacement: ContainerBackgroundPlacement {
+  var toContainerBackgroundPlacement: ContainerBackgroundPlacement? {
     switch self {
-    case .widget: return .widget
+    case .widget: return nil
     case .navigation: return .navigation
     case .navigationSplitView: return .navigationSplitView
     }
@@ -28,20 +26,17 @@ internal struct ContainerBackgroundModifier: ViewModifier, Record {
   @Field var container: ContainerBackgroundPlacementOptions?
 
   func body(content: Content) -> some View {
-#if os(tvOS)
+#if os(tvOS) || os(macOS)
     content
-#elseif os(macOS)
-    if let shapeStyle = style?.toAnyShapeStyle(), container == .widget {
-      content.containerBackground(shapeStyle, for: .widget)
-    } else {
-      content
-    }
 #else
     if let shapeStyle = style?.toAnyShapeStyle(), let container {
-      if #available(iOS 18.0, *) {
-        content.containerBackground(shapeStyle, for: container.toContainerBackgroundPlacement)
-      } else if #available(iOS 17.0, *) {
-        content.containerBackground(shapeStyle, for: .widget)
+      if container == .widget, let widgetKit = ViewModifierRegistry.widgetKit {
+        widgetKit.containerBackground(AnyView(content), style: shapeStyle)
+      } else if #available(iOS 18.0, *), let placement = container.toContainerBackgroundPlacement {
+        content.containerBackground(shapeStyle, for: placement)
+      } else if let widgetKit = ViewModifierRegistry.widgetKit {
+        // On iOS 17, the other placements fall back to `widget`.
+        widgetKit.containerBackground(AnyView(content), style: shapeStyle)
       } else {
         content
       }
@@ -50,4 +45,16 @@ internal struct ContainerBackgroundModifier: ViewModifier, Record {
     }
 #endif
   }
+
+#if DEBUG
+  private static var didWarnAboutWidgetPlacement = false
+
+  func warnIfWidgetPlacementIsUnavailable() {
+    guard container == .widget, ViewModifierRegistry.widgetKit == nil, !Self.didWarnAboutWidgetPlacement else {
+      return
+    }
+    Self.didWarnAboutWidgetPlacement = true
+    log.warn("containerBackground with the 'widget' placement has no effect here, because it only applies inside widgets rendered by expo-widgets. Use the 'navigation' or 'navigationSplitView' placement in app screens.")
+  }
+#endif
 }

package/ios/Modifiers/PreferredColorSchemeModifier.swift

@@ -0,0 +1,12 @@
+// Copyright 2025-present 650 Industries. All rights reserved.
+
+import ExpoModulesCore
+import SwiftUI
+
+internal struct PreferredColorSchemeModifier: ViewModifier, Record {
+  @Field var colorScheme: ColorSchemeType?
+
+  func body(content: Content) -> some View {
+    content.preferredColorScheme(colorScheme?.toNativeColorScheme())
+  }
+}

package/ios/Modifiers/View+ModifierArray.swift

@@ -67,10 +67,10 @@ internal extension Image {
         )
       }
 
-      if #available(iOS 18.0, macOS 15.0, *),
+      if let widgetKit = ViewModifierRegistry.widgetKit,
          let modifierConfig = modifiers.first(where: { $0["$type"] as? String == "widgetAccentedRenderingMode" }),
-         let modifier = try? WidgetAccentedRenderingModeModifier(from: modifierConfig, appContext: appContext) {
-        modifier.apply(to: image)
+         let view = widgetKit.widgetAccentedRenderingMode(image, params: modifierConfig, appContext: appContext) {
+        view
       } else {
         image
       }

package/ios/Modifiers/ViewModifierRegistry.swift

@@ -1533,6 +1533,8 @@ public class ViewModifierRegistry {
   public typealias ModifierFactory = ([String: Any], AppContext, EventDispatcher) throws -> any ViewModifier
   private(set) internal var modifierFactories: [String: ModifierFactory] = [:]
 
+  public static var widgetKit: WidgetKitModifiers?
+
   private init() {
     registerBuiltInModifiers()
   }
@@ -2309,6 +2311,10 @@ extension ViewModifierRegistry {
       return try ScrollDisabledModifier(from: params, appContext: appContext)
     }
 
+    register("preferredColorScheme") { params, appContext, _ in
+      return try PreferredColorSchemeModifier(from: params, appContext: appContext)
+    }
+
     register("scrollClipDisabled") { params, appContext, _ in
       return try ScrollClipDisabledModifier(from: params, appContext: appContext)
     }
@@ -2393,14 +2399,6 @@ extension ViewModifierRegistry {
       return try ContentTransitionModifier(from: params, appContext: appContext)
     }
 
-    register("widgetURL") { params, appContext, _ in
-      return try WidgetURLModifier(from: params, appContext: appContext)
-    }
-
-    register("activityBackgroundTint") { params, appContext, _ in
-      return try ActivityBackgroundTintModifier(from: params, appContext: appContext)
-    }
-
     register("keyboardType") { params, appContext, _ in
       return try KeyboardTypeModifier(from: params, appContext: appContext)
     }
@@ -2414,7 +2412,11 @@ extension ViewModifierRegistry {
     }
 
     register("containerBackground") { params, appContext, _ in
-      return try ContainerBackgroundModifier(from: params, appContext: appContext)
+      let modifier = try ContainerBackgroundModifier(from: params, appContext: appContext)
+      #if DEBUG
+      modifier.warnIfWidgetPlacementIsUnavailable()
+      #endif
+      return modifier
     }
 
     register("symbolEffect") { params, appContext, _ in

package/ios/Modifiers/WidgetKitModifiers.swift

@@ -0,0 +1,13 @@
+// Copyright 2026-present 650 Industries. All rights reserved.
+
+import ExpoModulesCore
+import SwiftUI
+
+/**
+ * The parts of SwiftUI that are declared in WidgetKit. expo-widgets sets
+ * `ViewModifierRegistry.widgetKit`, so ExpoUI does not link WidgetKit.
+ */
+public protocol WidgetKitModifiers {
+  func containerBackground(_ view: AnyView, style: AnyShapeStyle) -> AnyView
+  func widgetAccentedRenderingMode(_ image: Image, params: [String: Any], appContext: AppContext) -> AnyView?
+}

package/ios/RNHostView.swift

@@ -4,7 +4,8 @@ import SwiftUI
 import ExpoModulesCore
 
 internal final class RNHostViewProps: ExpoSwiftUI.ViewProps {
-  @Field var matchContents: Bool = false
+  @Field var matchContentsHorizontal: Bool = false
+  @Field var matchContentsVertical: Bool = false
   /**
    Adds LeafNode and MeasurableYogaNode trait in Shadow node
    */
@@ -50,8 +51,13 @@ struct RNHostView: ExpoSwiftUI.View {
 
   @ViewBuilder
   private var hostedContent: some View {
-    if props.matchContents, let childUIView = firstChildUIView {
-      ApplySizeFromYogaNode(childUIView: childUIView) {
+    if matchesContents, let childUIView = firstChildUIView {
+      ApplySizeFromYogaNode(
+        childUIView: childUIView,
+        horizontal: props.matchContentsHorizontal,
+        vertical: props.matchContentsVertical,
+        shadowNodeProxy: props.shadowNodeProxy
+      ) {
         Children()
       }
       .onAppear {
@@ -62,7 +68,7 @@ struct RNHostView: ExpoSwiftUI.View {
       .onDisappear {
         touchHandler.detach()
       }
-    } else if props.matchContents {
+    } else if matchesContents {
       // No hosted UIView (a pure SwiftUI child, e.g. Text/Image). Render it at its
       // natural size instead of falling into the fill branch below, which would
       // stretch a self-sizing SwiftUI view to fill its container.
@@ -87,6 +93,10 @@ struct RNHostView: ExpoSwiftUI.View {
     }
   }
 
+  private var matchesContents: Bool {
+    props.matchContentsHorizontal || props.matchContentsVertical
+  }
+
   private var firstChildUIView: UIView? {
     props.children?.first?.uiView
   }
@@ -143,20 +153,52 @@ private final class RNHostTouchHandler: ObservableObject {
   }
 }
 
-// Sets SwiftUI view size from Yoga node size
+// Sets SwiftUI view size from Yoga node size on the matched axes
 // Listens to Yoga node size changes and updates the SwiftUI view size
+// An axis that is not matched fills the parent and reports its size to the Yoga node instead
 private struct ApplySizeFromYogaNode<Content: SwiftUI.View>: SwiftUI.View {
   @StateObject private var observer: Observer
+  let horizontal: Bool
+  let vertical: Bool
+  let shadowNodeProxy: ExpoSwiftUI.ShadowNodeProxy
   let content: Content
 
-  init(childUIView: UIView, @ViewBuilder content: () -> Content) {
+  init(
+    childUIView: UIView,
+    horizontal: Bool,
+    vertical: Bool,
+    shadowNodeProxy: ExpoSwiftUI.ShadowNodeProxy,
+    @ViewBuilder content: () -> Content
+  ) {
     _observer = StateObject(wrappedValue: Observer(view: childUIView))
+    self.horizontal = horizontal
+    self.vertical = vertical
+    self.shadowNodeProxy = shadowNodeProxy
     self.content = content()
   }
 
   var body: some SwiftUI.View {
-    content
-      .frame(width: observer.size.width, height: observer.size.height)
+    if horizontal && vertical {
+      content
+        .frame(width: observer.size.width, height: observer.size.height)
+    } else {
+      content
+        .frame(
+          width: horizontal ? observer.size.width : nil,
+          height: vertical ? observer.size.height : nil
+        )
+        .frame(
+          maxWidth: horizontal ? nil : .infinity,
+          maxHeight: vertical ? nil : .infinity
+        )
+        .modifier(
+          ReportSizeToYogaNodeModifier(
+            shadowNodeProxy: shadowNodeProxy,
+            reportWidth: !horizontal,
+            reportHeight: !vertical
+          )
+        )
+    }
   }
 
   @MainActor
@@ -183,9 +225,13 @@ private struct ApplySizeFromYogaNode<Content: SwiftUI.View>: SwiftUI.View {
 // Listens to SwiftUI view size changes and updates the Yoga node size
 private struct ReportSizeToYogaNodeModifier: ViewModifier {
   let shadowNodeProxy: ExpoSwiftUI.ShadowNodeProxy
+  var reportWidth = true
+  var reportHeight = true
 
   private func handleSizeChange(_ size: CGSize) {
-    shadowNodeProxy.setViewSize?(size)
+    shadowNodeProxy.setViewSize?(
+      CGSize(width: reportWidth ? size.width : .nan, height: reportHeight ? size.height : .nan)
+    )
   }
 
   func body(content: Content) -> some View {