@expo/ui 55.0.3 → 55.0.5

package/src/datetime-picker/types.tsx

@@ -0,0 +1,147 @@
+import type { ViewProps } from 'react-native';
+
+// -- Public types matching @react-native-community/datetimepicker ----------
+
+/**
+ * @deprecated used with the deprecated `onChange` prop
+ * */
+export type DateTimePickerEvent = {
+  /**
+   * `'set'` when the user selects a date. `'dismissed'` when the user cancels
+   * an Android dialog picker. iOS never fires `'dismissed'`.
+   */
+  type: 'set' | 'dismissed';
+  nativeEvent: {
+    timestamp: number;
+    utcOffset: number;
+  };
+};
+
+export type DateTimePickerChangeEvent = {
+  nativeEvent: {
+    timestamp: number;
+    utcOffset: number;
+  };
+};
+
+export type DateTimePickerProps = {
+  /**
+   * The current date value (controlled).
+   */
+  value: Date;
+  /**
+   * @deprecated Use `onValueChange` and `onDismiss` instead.
+   *
+   * Called when the user changes the date/time or dismisses the picker.
+   * The event type is encoded in `event.type`.
+   * If the new specific listeners are provided, they take precedence.
+   */
+  onChange?: (event: DateTimePickerEvent, date?: Date) => void;
+  /**
+   * Called when the user selects a date or time.
+   */
+  onValueChange?: (event: DateTimePickerChangeEvent, date: Date) => void;
+  /**
+   * Called when the picker is dismissed without selecting a value.
+   * @platform android
+   */
+  onDismiss?: () => void;
+  /**
+   * The picker mode.
+   * @default 'date'
+   */
+  mode?: 'date' | 'time' | 'datetime';
+  /**
+   * The earliest selectable date.
+   */
+  minimumDate?: Date;
+  /**
+   * The latest selectable date.
+   */
+  maximumDate?: Date;
+  /**
+   * A test ID forwarded to the native view.
+   * Note: on Android dialog presentation, the test ID is not forwarded.
+   */
+  testID?: string;
+  /**
+   * Display style. Android supports `'default' | 'spinner'` — `'spinner'` shows a text input
+   * rather than a scroll wheel (Material 3 does not have a wheel-style picker).
+   * iOS supports `'default' | 'spinner' | 'compact' | 'inline'`.
+   * @default 'default'
+   */
+  display?: 'default' | 'spinner' | 'compact' | 'inline' | 'calendar' | 'clock';
+  /**
+   * Use 24-hour format.
+   * @platform android
+   */
+  is24Hour?: boolean;
+  /**
+   * Accent/tint color applied to the picker.
+   * Maps to `color` on Android and `tint` on iOS.
+   */
+  accentColor?: string;
+  /**
+   * Whether the picker is disabled.
+   * @platform ios
+   */
+  disabled?: boolean;
+  /**
+   * Locale identifier (e.g. 'en_US', 'fr_FR') for the picker display.
+   * @platform ios
+   */
+  locale?: string;
+  /**
+   * Force a specific color scheme on the picker.
+   * @platform ios
+   */
+  themeVariant?: 'dark' | 'light';
+  /**
+   * IANA time zone name (e.g. 'America/New_York') for the picker display.
+   * @platform ios
+   */
+  timeZoneName?: string;
+  /**
+   * How the picker is presented.
+   * - `'inline'` renders the picker directly in the view hierarchy.
+   * - `'dialog'` shows a modal dialog that opens on mount. Fires `onValueChange` on confirmation, `onDismiss` on cancel. The caller should
+   *   unmount the component in response.
+   *
+   * On iOS this prop is accepted but ignored (always inline).
+   * On Android the default is `'dialog'`.
+   * @default 'dialog'
+   * @platform android
+   */
+  presentation?: 'inline' | 'dialog';
+  /**
+   * Set the positive (confirm) button label.
+   * @platform android
+   */
+  positiveButton?: { label?: string };
+  /**
+   * Set the negative (cancel) button label.
+   * @platform android
+   */
+  negativeButton?: { label?: string };
+} & Pick<ViewProps, 'style'>;
+
+// -- Helpers ---------------------------------------------------------------
+
+export function buildEvent(date: Date): DateTimePickerEvent {
+  return {
+    type: 'set',
+    nativeEvent: {
+      timestamp: date.getTime(),
+      utcOffset: -date.getTimezoneOffset(),
+    },
+  };
+}
+
+export function buildChangeEvent(date: Date): DateTimePickerChangeEvent {
+  return {
+    nativeEvent: {
+      timestamp: date.getTime(),
+      utcOffset: -date.getTimezoneOffset(),
+    },
+  };
+}

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

@@ -1,8 +1,11 @@
 import { requireNativeView } from 'expo';
 
-import { ExpoModifier } from '../../types';
+import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
+/**
+ * Per-side padding values in dp for carousel content.
+ */
 export type PaddingValuesRecord = {
   start?: number;
   top?: number;
@@ -10,50 +13,135 @@ export type PaddingValuesRecord = {
   bottom?: number;
 };
 
-export type CarouselVariant = 'multiBrowse' | 'unconstrained';
+/**
+ * Fling behavior type for controlling carousel snapping.
+ */
 export type FlingBehaviorType = 'singleAdvance' | 'noSnap';
 
-export type CarouselProps = {
+/**
+ * Shared props across all carousel components.
+ */
+export type CarouselCommonConfig = {
   /**
-   * Modifiers for the component.
+   * Spacing between items in dp.
+   * @default 0
    */
-  modifiers?: ExpoModifier[];
-  /** Carousel variant */
-  variant?: CarouselVariant;
-  /** Spacing between items (dp) */
   itemSpacing?: number;
-  /** Padding for carousel content (dp or object) */
+  /**
+   * Padding for carousel content (dp or object).
+   */
   contentPadding?: number | PaddingValuesRecord;
-  /** Minimum small item width (dp) */
-  minSmallItemWidth?: number;
-  /** Maximum small item width (dp) */
-  maxSmallItemWidth?: number;
-  /** Fling behavior type */
+  /**
+   * Controls snapping behavior when the user flings the carousel.
+   * `'singleAdvance'` snaps to the next item, `'noSnap'` allows free scrolling.
+   */
   flingBehavior?: FlingBehaviorType;
-  /** Preferred item width (dp) for multiBrowse variant */
-  preferredItemWidth?: number;
-  /** Item width (dp) for unconstrained variant */
-  itemWidth?: number;
-  /** Children to render */
+  /**
+   * Whether the user can scroll the carousel.
+   * @default true
+   */
+  userScrollEnabled?: boolean;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+  /**
+   * Children to render as carousel items.
+   */
   children: React.ReactNode;
 };
 
-type NativeCarouselProps = CarouselProps;
-
-const CarouselNativeView: React.ComponentType<NativeCarouselProps> = requireNativeView(
-  'ExpoUI',
-  'CarouselView'
-);
-
-export function transformCarouselProps(props: CarouselProps): NativeCarouselProps {
+function transformProps<T extends { modifiers?: ModifierConfig[] }>(props: T): T {
   const { modifiers, ...restProps } = props;
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
-  };
+  } as T;
 }
 
-export function Carousel(props: CarouselProps) {
-  return <CarouselNativeView {...transformCarouselProps(props)} />;
+function createCarouselComponent<P extends { modifiers?: ModifierConfig[] }>(
+  viewName: string
+): React.ComponentType<P> {
+  const NativeView: React.ComponentType<P> = requireNativeView('ExpoUI', viewName);
+  return function CarouselComponent(props: P) {
+    return <NativeView {...transformProps(props)} />;
+  };
 }
+
+// region HorizontalCenteredHeroCarousel
+
+export type HorizontalCenteredHeroCarouselProps = CarouselCommonConfig & {
+  /**
+   * Maximum width of the hero item in dp.
+   * When unspecified, the hero item will be as wide as possible.
+   */
+  maxItemWidth?: number;
+  /**
+   * Minimum width of small peek items in dp.
+   * @default CarouselDefaults.MinSmallItemSize
+   */
+  minSmallItemWidth?: number;
+  /**
+   * Maximum width of small peek items in dp.
+   * @default CarouselDefaults.MaxSmallItemSize
+   */
+  maxSmallItemWidth?: number;
+};
+
+/**
+ * A hero carousel that centers one large item between two small peek items,
+ * matching Compose's `HorizontalCenteredHeroCarousel`.
+ */
+export const HorizontalCenteredHeroCarousel =
+  createCarouselComponent<HorizontalCenteredHeroCarouselProps>(
+    'HorizontalCenteredHeroCarouselView'
+  );
+
+// endregion
+
+// region HorizontalMultiBrowseCarousel
+
+export type HorizontalMultiBrowseCarouselProps = CarouselCommonConfig & {
+  /**
+   * The preferred width of the large item in dp.
+   */
+  preferredItemWidth: number;
+  /**
+   * Minimum width of small peek items in dp.
+   * @default CarouselDefaults.MinSmallItemSize
+   */
+  minSmallItemWidth?: number;
+  /**
+   * Maximum width of small peek items in dp.
+   * @default CarouselDefaults.MaxSmallItemSize
+   */
+  maxSmallItemWidth?: number;
+};
+
+/**
+ * A carousel that shows a large item alongside smaller peek items,
+ * matching Compose's `HorizontalMultiBrowseCarousel`.
+ */
+export const HorizontalMultiBrowseCarousel =
+  createCarouselComponent<HorizontalMultiBrowseCarouselProps>('HorizontalMultiBrowseCarouselView');
+
+// endregion
+
+// region HorizontalUncontainedCarousel
+
+export type HorizontalUncontainedCarouselProps = CarouselCommonConfig & {
+  /**
+   * The width of each item in dp.
+   */
+  itemWidth: number;
+};
+
+/**
+ * A carousel where each item has a fixed width with free-form scrolling,
+ * matching Compose's `HorizontalUncontainedCarousel`.
+ */
+export const HorizontalUncontainedCarousel =
+  createCarouselComponent<HorizontalUncontainedCarouselProps>('HorizontalUncontainedCarouselView');
+
+// endregion

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

@@ -1,16 +1,54 @@
 import { requireNativeView } from 'expo';
-import React from 'react';
+import React, { Ref } from 'react';
+import { type ColorValue } from 'react-native';
 
-import { type ExpoModifier, type ViewEvent } from '../../types';
+import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
+type SlotNativeViewProps = {
+  slotName: string;
+  children: React.ReactNode;
+};
+
+const SlotNativeView: React.ComponentType<SlotNativeViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
+export type ModalBottomSheetRef = {
+  /**
+   * Programmatically hides the bottom sheet with an animation.
+   * The returned promise resolves after the dismiss animation completes.
+   */
+  hide: () => Promise<void>;
+};
+
+export type ModalBottomSheetProperties = {
+  /**
+   * Whether the bottom sheet can be dismissed by pressing the back button.
+   * @default true
+   */
+  shouldDismissOnBackPress?: boolean;
+  /**
+   * Whether the bottom sheet can be dismissed by clicking outside (on the scrim).
+   * @default true
+   */
+  shouldDismissOnClickOutside?: boolean;
+};
+
 export type ModalBottomSheetProps = {
   /**
    * The children of the `ModalBottomSheet` component.
+   * Can include a `ModalBottomSheet.DragHandle` slot for a custom drag handle.
    */
   children: React.ReactNode;
   /**
-   * Callback function that is called when the bottom sheet is dismissed.
+   * Can be used to imperatively hide the bottom sheet with an animation.
+   */
+  ref?: Ref<ModalBottomSheetRef>;
+  /**
+   * Callback function that is called when the user dismisses the bottom sheet
+   * (via swipe, back press, or tapping outside the scrim).
    */
   onDismissRequest: () => void;
   /**
@@ -18,14 +56,42 @@ export type ModalBottomSheetProps = {
    * @default false
    */
   skipPartiallyExpanded?: boolean;
+  /**
+   * The background color of the bottom sheet.
+   */
+  containerColor?: ColorValue;
+  /**
+   * The preferred color of the content inside the bottom sheet.
+   */
+  contentColor?: ColorValue;
+  /**
+   * The color of the scrim overlay behind the bottom sheet.
+   */
+  scrimColor?: ColorValue;
+  /**
+   * Whether to show the default drag handle at the top of the bottom sheet.
+   * Ignored if a custom `ModalBottomSheet.DragHandle` slot is provided.
+   * @default true
+   */
+  showDragHandle?: boolean;
+  /**
+   * Whether gestures (swipe to dismiss) are enabled on the bottom sheet.
+   * @default true
+   */
+  sheetGesturesEnabled?: boolean;
+  /**
+   * Properties for the modal window behavior.
+   */
+  properties?: ModalBottomSheetProperties;
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
+  modifiers?: ModifierConfig[];
 };
 
-type NativeModalBottomSheetProps = Omit<ModalBottomSheetProps, 'onDismissRequest'> &
-  ViewEvent<'onDismissRequest', void>;
+type NativeModalBottomSheetProps = Omit<ModalBottomSheetProps, 'onDismissRequest'> & {
+  onDismissRequest: () => void;
+};
 
 const ModalBottomSheetNativeView: React.ComponentType<NativeModalBottomSheetProps> =
   requireNativeView('ExpoUI', 'ModalBottomSheetView');
@@ -44,18 +110,22 @@ function transformProps(props: ModalBottomSheetProps): NativeModalBottomSheetPro
 }
 
 /**
- * A Material Design modal bottom sheet.
+ * A custom drag handle slot for `ModalBottomSheet`.
+ * Wrap any content to use as the sheet's drag handle.
+ *
+ * @platform android
  */
-export function ModalBottomSheet(props: ModalBottomSheetProps) {
-  return <ModalBottomSheetNativeView {...transformProps(props)} />;
+function DragHandle(props: { children: React.ReactNode }) {
+  return <SlotNativeView slotName="dragHandle">{props.children}</SlotNativeView>;
 }
 
 /**
- * @deprecated Use `ModalBottomSheet` instead.
+ * A Material Design modal bottom sheet.
  */
-export const BottomSheet = ModalBottomSheet;
+function ModalBottomSheetComponent(props: ModalBottomSheetProps) {
+  return <ModalBottomSheetNativeView {...transformProps(props)} />;
+}
 
-/**
- * @deprecated Use `ModalBottomSheetProps` instead.
- */
-export type BottomSheetProps = ModalBottomSheetProps;
+ModalBottomSheetComponent.DragHandle = DragHandle;
+
+export const ModalBottomSheet = ModalBottomSheetComponent;

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

@@ -12,7 +12,7 @@ export type StrokeCap = 'round' | 'butt' | 'square';
 /**
  * Common props shared by all progress indicator variants.
  */
-type BaseProgressProps = {
+export type ProgressCommonConfig = {
   /**
    * The current progress value between `0` and `1`. Omit for indeterminate.
    */
@@ -31,7 +31,7 @@ type BaseProgressProps = {
   modifiers?: ModifierConfig[];
 };
 
-function transformProps<T extends BaseProgressProps>(props: T): T {
+function transformProps<T extends ProgressCommonConfig>(props: T): T {
   const { modifiers, ...restProps } = props;
   return {
     modifiers,
@@ -40,7 +40,7 @@ function transformProps<T extends BaseProgressProps>(props: T): T {
   } as T;
 }
 
-function createProgressComponent<P extends BaseProgressProps>(
+function createProgressComponent<P extends ProgressCommonConfig>(
   viewName: string
 ): React.ComponentType<P> {
   const NativeView: React.ComponentType<P> = requireNativeView('ExpoUI', viewName);
@@ -70,7 +70,7 @@ export type DrawStopIndicatorConfig = {
   stopSize?: number;
 };
 
-export type LinearProgressIndicatorProps = BaseProgressProps & {
+export type LinearProgressIndicatorProps = ProgressCommonConfig & {
   /**
    * Stroke cap style for the indicator ends.
    * @default 'round'
@@ -99,7 +99,7 @@ export const LinearProgressIndicator = createProgressComponent<LinearProgressInd
 
 // region CircularProgressIndicator
 
-export type CircularProgressIndicatorProps = BaseProgressProps & {
+export type CircularProgressIndicatorProps = ProgressCommonConfig & {
   /**
    * Width of the circular stroke in dp.
    */
@@ -128,7 +128,7 @@ export const CircularProgressIndicator = createProgressComponent<CircularProgres
 
 // region LinearWavyProgressIndicator
 
-export type LinearWavyProgressIndicatorProps = BaseProgressProps & {
+export type LinearWavyProgressIndicatorProps = ProgressCommonConfig & {
   /**
    * Size of the stop indicator in dp at the end of the determinate progress track.
    */
@@ -147,7 +147,7 @@ export const LinearWavyProgressIndicator =
 
 // region CircularWavyProgressIndicator
 
-export type CircularWavyProgressIndicatorProps = BaseProgressProps;
+export type CircularWavyProgressIndicatorProps = ProgressCommonConfig;
 
 /**
  * A circular progress indicator with wavy animation style.

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

@@ -13,6 +13,8 @@ export type TextInputRef = {
   setText: (newText: string) => Promise<void>;
 };
 
+export type TextInputVariant = 'filled' | 'outlined';
+
 export type TextInputProps = {
   /**
    * Can be used for imperatively setting text on the TextInput component.
@@ -22,6 +24,14 @@ export type TextInputProps = {
    * Initial value that the TextInput displays when being mounted. As the TextInput is an uncontrolled component, change the key prop if you need to change the text value.
    */
   defaultValue?: string;
+  /**
+   * The visual style of the text input field.
+   * - `filled` - A text field with a filled background (default).
+   * - `outlined` - A text field with a transparent background and a border outline.
+   * @default filled
+   * @platform android
+   */
+  variant?: TextInputVariant;
   /**
    * A callback triggered when user types in text into the TextInput.
    */

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

@@ -0,0 +1,52 @@
+import { requireNativeView } from 'expo';
+
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
+export type LinkProps = {
+  /**
+   * The text label for the Link. Use this for simple text links.
+   */
+  label?: string;
+  /**
+   * The URL for the link.
+   */
+  destination: string;
+  /**
+   * Custom content for the link label. Use this for custom label views.
+   * Only nested elements are supported, not plain strings.
+   */
+  children?: React.ReactElement | React.ReactElement[];
+} & CommonViewModifierProps;
+
+const LinkNativeView: React.ComponentType<LinkProps> = requireNativeView('ExpoUI', 'LinkView');
+
+/**
+ * Displays a native link component.
+ *
+ * @example
+ * ```tsx
+ * import { Link } from '@expo/ui/swift-ui';
+ * import { foregroundStyle, font } from '@expo/ui/swift-ui/modifiers';
+ *
+ * <Link
+ *   label="Open"
+ *   destination="https://expo.dev"
+ *   modifiers={[
+ *     foregroundStyle('red'),
+ *     font({ size: 24, weight: 'bold' })
+ *   ]}
+ * />
+ * ```
+ */
+export function Link(props: LinkProps) {
+  const { children, modifiers, ...restProps } = props;
+
+  const baseProps = {
+    ...restProps,
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+  };
+
+  return <LinkNativeView {...baseProps}>{children}</LinkNativeView>;
+}

package/src/swift-ui/index.tsx

@@ -40,4 +40,5 @@ export * from './Shapes';
 export * from './Popover';
 export * from './Grid';
 export * from './RNHostView';
+export * from './Link';
 export { type CommonViewModifierProps } from './types';

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

@@ -1,10 +1,23 @@
 import { createModifier } from './createModifier';
 
+export type EnvironmentConfig =
+  | { key: 'editMode'; value: 'active' | 'inactive' | 'transient' }
+  | { key: 'colorScheme'; value: 'light' | 'dark' }
+  | { key: 'locale'; value: string }
+  | { key: 'timeZone'; value: string };
+
 /**
  * Sets a SwiftUI environment value.
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/environment(_:_:)).
  */
-export const environment = (
-  key: 'editMode' | 'colorScheme',
-  value: 'active' | 'inactive' | 'transient' | 'light' | 'dark'
-) => createModifier('environment', { key, value });
+export function environment(config: EnvironmentConfig): ReturnType<typeof createModifier>;
+export function environment(
+  key: EnvironmentConfig['key'],
+  value: string
+): ReturnType<typeof createModifier>;
+export function environment(configOrKey: EnvironmentConfig | string, value?: string) {
+  if (typeof configOrKey === 'string') {
+    return createModifier('environment', { key: configOrKey, value });
+  }
+  return createModifier('environment', configOrKey);
+}

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

@@ -15,6 +15,7 @@ import { environment } from './environment';
 import { gaugeStyle } from './gaugeStyle';
 import { progressViewStyle } from './progressViewStyle';
 import type { Color } from './types';
+import { widgetAccentedRenderingMode, widgetURL } from './widgets';
 
 const ExpoUI = requireNativeModule('ExpoUI');
 
@@ -1056,15 +1057,6 @@ export const resizable = (
   resizingMode?: 'stretch' | 'tile'
 ) => createModifier('resizable', { ...capInsets, resizingMode });
 
-/**
- * Specifies the how to render an Image when using the WidgetKit/WidgetRenderingMode/accented mode.
- * @param renderingMode - A constant describing how the Image should be rendered.
- * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/image/widgetaccentedrenderingmode(_:)).
- */
-export const widgetAccentedRenderingMode = (
-  renderingMode: 'fullColor' | 'accented' | 'desaturated' | 'accentedDesaturated'
-) => createModifier('widgetAccentedRenderingMode', { renderingMode });
-
 // =============================================================================
 // Type Definitions
 // =============================================================================
@@ -1169,7 +1161,8 @@ export type BuiltInModifier =
   | ReturnType<typeof listStyle>
   | ReturnType<typeof contentTransition>
   | ReturnType<typeof resizable>
-  | ReturnType<typeof widgetAccentedRenderingMode>;
+  | ReturnType<typeof widgetAccentedRenderingMode>
+  | ReturnType<typeof widgetURL>;
 
 /**
  * Main ViewModifier type that supports both built-in and 3rd party modifiers.
@@ -1214,6 +1207,7 @@ export * from './progressViewStyle';
 export * from './gaugeStyle';
 export * from './presentationModifiers';
 export * from './environment';
+export * from './widgets';
 export type {
   TimingAnimationParams,
   SpringAnimationParams,