@expo/ui 57.0.15 → 57.0.17

package/src/swift-ui/modifiers/background.ts

@@ -1,12 +1,54 @@
-import { createModifier } from './createModifier';
+import { createModifier, type ModifierConfig } from './createModifier';
+import { resolveShapeStyle, type ShapeStyle } from './shapeStyle';
 import type { Shape } from './shapes/index';
-import type { Color } from './types';
+
+export type BackgroundOptions = {
+  /**
+   * The safe area edges the background extends into.
+   * @default 'all'
+   */
+  ignoresSafeAreaEdges?:
+    | 'all'
+    | 'top'
+    | 'bottom'
+    | 'leading'
+    | 'trailing'
+    | 'horizontal'
+    | 'vertical';
+};
 
 /**
  * Sets the background of a view.
- * @param color - The background color (hex string). For example, `#FF0000`.
- * @param shape - Optional shape to clip the background. If not provided, the background will fill the entire view.
- * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/SwiftUI/View/background(_:alignment:)).
+ *
+ * Two variants matching SwiftUI:
+ * - `background(style)` — paints the whole view, expanding into the safe area unless
+ *   `ignoresSafeAreaEdges` narrows it down
+ * - `background(style, shapes.capsule())` — paints the given shape
+ *
+ * To draw an arbitrary view behind another one, use the `Background` component instead.
+ *
+ * @example
+ * ```tsx
+ * <Text modifiers={[background('#FF0000')]}>Solid color</Text>
+ * <Text modifiers={[background({ type: 'material', material: 'thin' })]}>Blurred backdrop</Text>
+ * <Text modifiers={[background('#FF0000', shapes.roundedRectangle({ cornerRadius: 12 }))]}>
+ *   Rounded
+ * </Text>
+ * ```
+ *
+ * @param style - Any [`ShapeStyle`](#shapestyle): a color, a hierarchical style, a material, or a gradient.
+ * @param shape - The shape the style is painted in. Omit it to paint the whole view.
+ * @param options - Options of the variant without a shape, such as the safe area edges the background extends into.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/background(_:ignoressafeareaedges:)).
  */
-export const background = (color: Color, shape?: Shape) =>
-  createModifier('background', { color, ...shape });
+export function background(style: ShapeStyle, options?: BackgroundOptions): ModifierConfig;
+export function background(style: ShapeStyle, shape?: Shape): ModifierConfig;
+export function background(
+  style: ShapeStyle,
+  shapeOrOptions?: Shape | BackgroundOptions
+): ModifierConfig {
+  return createModifier('background', {
+    style: resolveShapeStyle(style),
+    ...shapeOrOptions,
+  });
+}

package/src/swift-ui/modifiers/containerBackground.ts

@@ -1,13 +1,18 @@
 import { createModifier } from './createModifier';
-import type { Color } from './types';
+import { resolveShapeStyle, type ShapeStyle } from './shapeStyle';
 
 export type ContainerBackgroundPlacement = 'widget' | 'navigation' | 'navigationSplitView';
 
 /**
- * Sets the container background of the enclosing container using a view.
- * @param color - The color to set as the background of the container.
+ * Sets the container background of the enclosing container.
+ *
+ * > **Note:** `navigation` and `navigationSplitView` require iOS 18. On iOS 17 they fall back to
+ * > the `widget` placement.
+ *
+ * @param style - Any [`ShapeStyle`](#shapestyle): a color, a hierarchical style, a material, or a gradient.
  * @param container - The type of container to apply the background to.
+ * @platform ios 17.0+
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/containerbackground(_:for:)).
  */
-export const containerBackground = (color: Color, container: ContainerBackgroundPlacement) =>
-  createModifier('containerBackground', { color, container });
+export const containerBackground = (style: ShapeStyle, container: ContainerBackgroundPlacement) =>
+  createModifier('containerBackground', { style: resolveShapeStyle(style), container });

package/src/swift-ui/modifiers/index.ts

@@ -287,13 +287,38 @@ export const clipShape = (
   cornerRadius?: number
 ) => createModifier('clipShape', { shape, cornerRadius });
 
+/**
+ * The parameters of the `border` modifier.
+ */
+export type BorderParams =
+  | {
+      /**
+       * The style painted along the border. No border is drawn when the style is not available on
+       * the running platform, unlike `strokeBorder`, which falls back to the foreground style.
+       */
+      content: ShapeStyle;
+      /** The border width. @default 1 */
+      width?: number;
+    }
+  | {
+      /**
+       * @deprecated Use `content`, which takes any `ShapeStyle` and not only a color.
+       */
+      color: Color;
+      /** The border width. @default 1 */
+      width?: number;
+    };
+
 /**
  * Adds a border to a view.
- * @param params - The border parameters. Color and width.
+ * @param params - The border parameters. The style painted along the border, and its width.
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/border(_:width:)).
  */
-export const border = (params: { color: Color; width?: number }) =>
-  createModifier('border', params);
+export const border = (params: BorderParams) =>
+  createModifier('border', {
+    content: resolveShapeStyle('content' in params ? params.content : params.color),
+    width: params.width,
+  });
 
 /**
  * The characteristics of a stroke that traces a path.
@@ -316,10 +341,15 @@ export type StrokeStyle = {
 
 /**
  * Strokes an inset border along the view's shape.
- * @param params - The stroke parameters. Color (omit for the foreground style), style, antialiased, shape and cornerRadius.
+ * @param params - The stroke parameters. The style painted along the stroke (omit for the foreground style), the stroke style, antialiased, shape and cornerRadius.
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/insettableshape/strokeborder(_:style:antialiased:)).
  */
 export const strokeBorder = (params: {
+  /** The style painted along the stroke. Omit to use the foreground style. */
+  content?: ShapeStyle;
+  /**
+   * @deprecated Use `content`, which takes any `ShapeStyle` and not only a color.
+   */
   color?: Color;
   style?: StrokeStyle;
   antialiased?: boolean;
@@ -331,7 +361,14 @@ export const strokeBorder = (params: {
     | 'roundedRectangle'
     | 'containerRelativeShape';
   cornerRadius?: number;
-}) => createModifier('strokeBorder', params);
+}) => {
+  const { content, color, ...rest } = params;
+  const shapeStyle = content ?? color;
+  return createModifier('strokeBorder', {
+    ...rest,
+    content: shapeStyle === undefined ? undefined : resolveShapeStyle(shapeStyle),
+  });
+};
 
 /**
  * Applies scaling transformation.
@@ -495,11 +532,11 @@ export const italic = () => createModifier('italic', {});
 export const monospacedDigit = () => createModifier('monospacedDigit', {});
 
 /**
- * Sets the tint color of a view.
- * @param color - The tint color (hex string). For example, `#FF0000`.
+ * Sets the tint of a view.
+ * @param tint - Any [`ShapeStyle`](#shapestyle): a color, a hierarchical style, a material, or a gradient.
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/tint(_:)).
  */
-export const tint = (color: Color) => createModifier('tint', { color });
+export const tint = (tint: ShapeStyle) => createModifier('tint', { tint: resolveShapeStyle(tint) });
 
 /**
  * Hides or shows a view.
@@ -749,6 +786,18 @@ export const scrollDismissesKeyboard = (
 export const scrollDisabled = (disabled: boolean = true) =>
   createModifier('scrollDisabled', { disabled });
 
+/**
+ * Disables or enables clipping of a scrollable view's content to its bounds.
+ * Content drawn outside those bounds, such as a shadow or a view scaled up past the edge, is
+ * cut off by default and stays visible once clipping is disabled.
+ * @param disabled - Whether clipping should be disabled (default: true).
+ * @platform ios 17.0+
+ * @platform tvos 17.0+
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/scrollclipdisabled(_:)).
+ */
+export const scrollClipDisabled = (disabled: boolean = true) =>
+  createModifier('scrollClipDisabled', { disabled });
+
 /**
  * Controls the visibility of scroll indicators for scrollable views.
  * Mirrors SwiftUI's `scrollIndicators(_:axes:)` modifier.
@@ -1002,6 +1051,10 @@ export const overlay = (params: {
 /**
  * Adds a background behind the view.
  * @param params - Background color and alignment.
+ * @deprecated Wraps `background(_:alignment:)`, which SwiftUI deprecated in favor of
+ * `background(alignment:content:)`, available since iOS 15. Use the `background` modifier for a
+ * plain fill, or the `Background` component when the background has to be a view or needs an
+ * alignment.
  */
 export const backgroundOverlay = (params: {
   color?: Color;
@@ -1721,6 +1774,7 @@ export type BuiltInModifier =
   | ReturnType<typeof containerRelativeFrame>
   | ReturnType<typeof scrollContentBackground>
   | ReturnType<typeof scrollDisabled>
+  | ReturnType<typeof scrollClipDisabled>
   | ReturnType<typeof scrollIndicators>
   | ReturnType<typeof defaultScrollAnchor>
   | ReturnType<typeof defaultScrollAnchorForRole>

package/src/swift-ui/modifiers/presentationModifiers.ts

@@ -3,7 +3,7 @@ import {
   createModifierWithEventListener,
   type ModifierConfig,
 } from './createModifier';
-import type { Color } from './types';
+import { resolveShapeStyle, type ShapeStyle } from './shapeStyle';
 
 /**
  * Presentation detent type for controlling sheet heights.
@@ -89,13 +89,16 @@ export const presentationBackgroundInteraction = (
  * Sets the background of a sheet presentation. Paints the entire sheet chrome
  * including the drag-indicator zone and home-indicator safe-area inset, which
  * a regular `background()` modifier cannot reach.
- * @param color - The background color.
+ *
+ * > **Note:** iOS 26 renders a material as a flat color rather than a translucent blur.
+ * @param style - Any [`ShapeStyle`](#shapestyle): a color, a hierarchical style, a material, or a gradient.
  * @platform ios 16.4+
+ * @platform tvos 16.4+
  * @see Official [SwiftUI
 documentation](https://developer.apple.com/documentation/swiftui/view/presentationbackground(_:)).
  */
-export const presentationBackground = (color: Color) =>
-  createModifier('presentationBackground', { color });
+export const presentationBackground = (style: ShapeStyle) =>
+  createModifier('presentationBackground', { style: resolveShapeStyle(style) });
 
 /**
  * Disables interactive dismissal of a sheet.

package/src/universal/transformStyle.ios.ts

@@ -131,12 +131,12 @@ export function transformToModifiers(
 
     // Background (fills the frame area including padding)
     if (style.backgroundColor) {
-      mods.push(background(String(style.backgroundColor)));
+      mods.push(background(style.backgroundColor));
     }
 
     // Border (before clip so the clip rounds the border corners too)
     if (style.borderWidth != null && style.borderColor != null) {
-      mods.push(border({ color: String(style.borderColor), width: style.borderWidth }));
+      mods.push(border({ content: style.borderColor, width: style.borderWidth }));
     }
 
     // Clip (border radius — rounds both background and border)

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15-sources.jar.md5

@@ -1 +0,0 @@
-727cf7bc8ccb03288f429d152d19ebb8

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15-sources.jar.sha1

@@ -1 +0,0 @@
-8f8ba3c03ae3deb578a50866e3aa7c1da0a1608a

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15-sources.jar.sha256

@@ -1 +0,0 @@
-c0de9f779e4c1fa3758abcbbee8831628a015e11cc4d7242fd1c1ead65a62eef

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15-sources.jar.sha512

@@ -1 +0,0 @@
-20a3c1eb5e1bddbb7b3708606f314fbffaa9165cff2e148826fd2e7cd7e1def14e2b3e7ef1190ba853b66f5a71f3d32c05c71f7c7e98dc8470d2e5c2bfccd752

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15.aar.md5

@@ -1 +0,0 @@
-edd3e3bac5983521c3fb8ba7a1830f75

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15.aar.sha1

@@ -1 +0,0 @@
-413330dc1478358eefbcd2ad21a352e69567b868

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15.aar.sha256

@@ -1 +0,0 @@
-3954246789a3258d28107744fc6c8ffb721f105c6403279b0e93ca1a961bcddb

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15.aar.sha512

@@ -1 +0,0 @@
-0fed5da498418bb5841100fac2b2f04d302598b81abd4159f62c8f1caecca14b831712cfff61039087834f9f1f32fe6b695cbab710e70a1b969e0bae70e471f0

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

@@ -1 +0,0 @@
-2795adc5211a8fc7f863c991f23d839d

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

@@ -1 +0,0 @@
-0b9ff6c6054311175dc6bd90b07c314a7ede6f84

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

@@ -1 +0,0 @@
-78e5605f43fc4b0f3d2f9a15f1c4fdec5c2ea8cd318b91c420b6eb15dd5eb494

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

@@ -1 +0,0 @@
-5f05356766b79d9fdcf15c07d42f0d07954b8ccf6603f68f05ce2c1520ef4a7be053913ea4dc39f8c9d778ab0e844d3933e057b56073a68eecb6acbc4dffca05

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

@@ -1 +0,0 @@
-5a8652e710f6244614c44748103be21e

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

@@ -1 +0,0 @@
-20bca33f9608309fa2b6d4b60f481576201db951

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

@@ -1 +0,0 @@
-05310f77cf9090370c199b477a3a20040419deaf872950d919fe112d9820ca3b

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

@@ -1 +0,0 @@
-872bf3ee828e9dcea87db32b2396a6eb3cccacffdedf263d0f85a7943ca20d09fbb5e97c6f20bcd2852e128597f47f67ed957b76350335de57c13f5a103cd67f