@expo/ui 57.0.16 → 57.0.17

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

@@ -234,12 +234,13 @@ export function BottomSheet(props: BottomSheetProps) {
               <RNHostView matchContents={fitToContents}>
                 {/* 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. Omitted for fitToContents
-                    so RNHostView can measure natural content height. */}
+                    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. */}
                 <View
                   style={
                     fitToContents
-                      ? { paddingTop: handleComponent !== null ? 16 : 0 }
+                      ? { width, paddingTop: handleComponent !== null ? 16 : 0 }
                       : { flexGrow: 1, height: 0, paddingTop: handleComponent !== null ? 16 : 0 }
                   }>
                   <SheetScrollContextReset>{children}</SheetScrollContextReset>

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

@@ -8,6 +8,20 @@ export type AndroidVariant = 'picker' | 'input';
 
 export type DisplayedComponents = 'date' | 'hourAndMinute' | 'dateAndTime';
 
+/**
+ * The date range reported by `DateRangePicker` and `DateRangePickerDialog`.
+ */
+export type DateRangeSelection = {
+  /**
+   * The selected start date, or `null` when no start date is selected.
+   */
+  start: Date | null;
+  /**
+   * The selected end date, or `null` until the user selects the second date of the range.
+   */
+  end: Date | null;
+};
+
 /**
  * Color overrides for the Material 3 DatePicker component.
  * All properties are optional — unset values use Material 3 theme defaults.
@@ -177,6 +191,10 @@ function convertSelectableDates(selectableDates?: {
   };
 }
 
+function convertTimestampToDate(timestamp: number | null): Date | null {
+  return timestamp == null ? null : new Date(timestamp);
+}
+
 function transformDateTimePickerProps(props: DateTimePickerProps): NativeDatePickerProps {
   const { modifiers, variant, initialDate, selectableDates, elementColors, color, ...rest } = props;
 
@@ -210,6 +228,100 @@ export function DateTimePicker(props: DateTimePickerProps) {
   return <DatePickerNativeView {...transformDateTimePickerProps(props)} />;
 }
 
+export interface DateRangePickerProps {
+  /**
+   * The initially selected start date, as an ISO 8601 string.
+   */
+  initialStartDate?: string | null;
+  /**
+   * The initially selected end date, as an ISO 8601 string. It must be on or after `initialStartDate`.
+   */
+  initialEndDate?: string | null;
+  /**
+   * Called once when the component mounts with the initial range, and again whenever the selected date range changes.
+   * The end date is `null` while the user is selecting a range.
+   */
+  onDateRangeSelected?: (range: DateRangeSelection) => void;
+  /**
+   * The variant of the picker, which determines its appearance and behavior.
+   * @default 'picker'
+   */
+  variant?: AndroidVariant;
+  /**
+   * Show a button to toggle between variants on Android.
+   * @default true
+   */
+  showVariantToggle?: boolean;
+  /**
+   * The tint color to use on the picker elements.
+   */
+  color?: ColorValue;
+  /**
+   * Fine-grained color overrides for individual picker elements.
+   */
+  elementColors?: DatePickerElementColors;
+  /**
+   * Constrains which dates can be selected. `start` is the earliest selectable date and `end` is
+   * the latest.
+   */
+  selectableDates?: { start?: Date; end?: Date };
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+}
+
+type NativeDateRangePickerProps = Omit<
+  DateRangePickerProps,
+  'onDateRangeSelected' | 'initialStartDate' | 'initialEndDate' | 'selectableDates'
+> & {
+  initialStartDate?: number | null;
+  initialEndDate?: number | null;
+  selectableDates?: { start?: number | null; end?: number | null } | null;
+} & ViewEvent<'onDateRangeSelected', { start: number | null; end: number | null }>;
+
+function transformDateRangePickerProps(
+  props: Omit<DateRangePickerProps, 'modifiers'>
+): Omit<NativeDateRangePickerProps, 'modifiers'> {
+  const {
+    initialStartDate,
+    initialEndDate,
+    selectableDates,
+    elementColors,
+    onDateRangeSelected,
+    ...rest
+  } = props;
+  return {
+    ...rest,
+    initialStartDate: initialStartDate ? new Date(initialStartDate).getTime() : null,
+    initialEndDate: initialEndDate ? new Date(initialEndDate).getTime() : null,
+    selectableDates: convertSelectableDates(selectableDates),
+    onDateRangeSelected: ({ nativeEvent: { start, end } }) => {
+      onDateRangeSelected?.({
+        start: convertTimestampToDate(start),
+        end: convertTimestampToDate(end),
+      });
+    },
+    ...(elementColors != null ? { elementColors } : undefined),
+  };
+}
+
+const DateRangePickerNativeView: React.ComponentType<NativeDateRangePickerProps> =
+  requireNativeView('ExpoUI', 'DateRangePickerView');
+
+/**
+ * Renders an inline Material 3 date range picker.
+ */
+export function DateRangePicker(props: DateRangePickerProps) {
+  const { modifiers, ...rest } = props;
+  const nativeProps: NativeDateRangePickerProps = {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...transformDateRangePickerProps(rest),
+  };
+  return <DateRangePickerNativeView {...nativeProps} />;
+}
+
 // -- Dialog views (used internally by the compat layer) ---------------------
 
 export interface DatePickerDialogProps {
@@ -260,6 +372,46 @@ export function DatePickerDialog(props: DatePickerDialogProps) {
   return <DatePickerDialogNativeView {...nativeProps} />;
 }
 
+export interface DateRangePickerDialogProps extends Omit<DateRangePickerProps, 'modifiers'> {
+  /**
+   * The label for the button that confirms the selected range.
+   * Defaults to the system "Ok" string.
+   */
+  confirmButtonLabel?: string;
+  /**
+   * The label for the button that dismisses the dialog.
+   * Defaults to the system "Cancel" string.
+   */
+  dismissButtonLabel?: string;
+  /** The tint color to use on the picker elements and dialog buttons. */
+  color?: ColorValue;
+  /** Callback function that is called when the user confirms a complete date range. */
+  onDateRangeSelected?: (range: DateRangeSelection) => void;
+  /** Callback function that is called when the dialog is dismissed. */
+  onDismissRequest: () => void;
+}
+
+type NativeDateRangePickerDialogProps = Omit<NativeDateRangePickerProps, 'modifiers'> &
+  Pick<DateRangePickerDialogProps, 'confirmButtonLabel' | 'dismissButtonLabel'> &
+  ViewEvent<'onDismissRequest', void>;
+
+const DateRangePickerDialogNativeView: React.ComponentType<NativeDateRangePickerDialogProps> =
+  requireNativeView('ExpoUI', 'DateRangePickerDialogView');
+
+/**
+ * Renders a modal Material 3 date range picker.
+ */
+export function DateRangePickerDialog(props: DateRangePickerDialogProps) {
+  const { confirmButtonLabel, dismissButtonLabel, onDismissRequest, ...rest } = props;
+  const nativeProps: NativeDateRangePickerDialogProps = {
+    ...transformDateRangePickerProps(rest),
+    confirmButtonLabel,
+    dismissButtonLabel,
+    onDismissRequest,
+  };
+  return <DateRangePickerDialogNativeView {...nativeProps} />;
+}
+
 export interface TimePickerDialogProps {
   initialDate?: string | null;
   is24Hour?: boolean;

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

@@ -1,17 +1,37 @@
 import { requireNativeView } from 'expo';
+import type { ColorValue } from 'react-native';
 
 import { type ModifierConfig, type ViewEvent } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
+/**
+ * Colors for the radio button in different states.
+ */
+export type RadioButtonColors = {
+  selectedColor?: ColorValue;
+  unselectedColor?: ColorValue;
+  disabledSelectedColor?: ColorValue;
+  disabledUnselectedColor?: ColorValue;
+};
+
 export interface RadioButtonProps {
   /**
    * Whether the radio button is selected.
    */
   selected: boolean;
+  /**
+   * Whether the radio button is enabled.
+   * @default true
+   */
+  enabled?: boolean;
   /**
    * Callback that is called when the radio button is clicked.
    */
   onClick?: () => void;
+  /**
+   * Colors for the radio button in different states.
+   */
+  colors?: RadioButtonColors;
   /**
    * Modifiers for the component.
    */

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.
@@ -1725,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.16/expo.modules.ui-57.0.16-sources.jar.md5

@@ -1 +0,0 @@
-56549744b9307aa46758e19db9dabf90

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

@@ -1 +0,0 @@
-6b28263e7e0227478fe261eeffb9f640dced8ca0

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

@@ -1 +0,0 @@
-36bbbdb98934c3b0ecf275049cb2012dcb65ad2d329fee1f7e42428dcb49da04

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

@@ -1 +0,0 @@
-99fa1b7ecf29945c1331833c23ab82c3717bea6a43f8056dacf7179a8eb86b18b7d1511838585debdaa6df79b9ea528e8af0babce933a03bd606838ef8747b7a

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

@@ -1 +0,0 @@
-e2ee254493f7d171d19e6e659e95a4b5

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

@@ -1 +0,0 @@
-a14f54eee92691240a7cd6a83f944b0ba11733a0

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

@@ -1 +0,0 @@
-478029e9cf52a0e86909c248a99329f7e3488a65fc3ac06bce0fbf614f5553f1

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

@@ -1 +0,0 @@
-5e177e8e0e7abb84c61422d42bd006f13589886297c6835028fd8df1be8a86bac8415dff355cd4d29abe28b209eca4171c32b5ef5552f46d71c2fc39a8f2a9fd

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

@@ -1 +0,0 @@
-dd8aaf57dde82e067e3b01e533d18c81

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

@@ -1 +0,0 @@
-e8be172ae1de0c69a4721b510ad4b2a57f38d0d7

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

@@ -1 +0,0 @@
-606fea92fbb5bee94b622a8c8c181f4c7a092d8b495fbc69a5b78efe602667fd

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

@@ -1 +0,0 @@
-29813d4039bcdd201463695c4dc7c25cd2a542a3e3b18d8a5dc483cd9ee8e654edcf8e87f896a44c31548e845e3f0b562440200ec50c23dcba4faf29e7918436

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

@@ -1 +0,0 @@
-94c56cd4cc07d1314adeb432470b7e18

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

@@ -1 +0,0 @@
-ba7bbd6ac7336e57e6f2bff3bbf73cb50e280e27

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

@@ -1 +0,0 @@
-7a5ff13f5a7f7b543453f3ca4d75fc04c726c75bd6ab837043af8100f6154adb

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

@@ -1 +0,0 @@
-63a8a73c453fe98411f22786180631b84d8299418a6eded64c4a4b9df88017f60e8812a4d658d050ac0e9f4e79434cbb486799d5840b7a552978e24692160173