@expo/ui 55.0.1 → 55.0.2

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

@@ -0,0 +1 @@
+af7c2dbb1d6562a281f052003f7040abe11d3675d03857f5c7d3519b28a1a8be54a73ccc7f2fab909b7edbfd864d888936d71a737737fac71ff13783d969229d

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>55.0.1</latest>
-    <release>55.0.1</release>
+    <latest>55.0.2</latest>
+    <release>55.0.2</release>
     <versions>
-      <version>55.0.1</version>
+      <version>55.0.2</version>
     </versions>
-    <lastUpdated>20260225202620</lastUpdated>
+    <lastUpdated>20260311141702</lastUpdated>
   </versioning>
 </metadata>

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

@@ -1 +1 @@
-f6c9c7a26f591d85be1f92bd770048b0
+3297c0326287d50f819c398744e70f0b

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

@@ -1 +1 @@
-606ee81d636b618e409a977c41c18f0c102cf7ed
+52a054a9646396b7224594f0d12720d91de3d216

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

@@ -1 +1 @@
-27c261098239e26d801540abddfcc9df7dc49b3ae8f839fadf7157e7062366de
+0ae7bf34378bccc60cb770b147533c2b4f1d10ede0a368c6ce75ab9763c6f66e

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

@@ -1 +1 @@
-a15e7a136c573d55ad8bfb73aecd9d47acf97323477120337ca51876f53194f40bbaeaf55cfca25ed68760ed6e241758806b61f0435247c0fa3393157f466ce3
+b3f9f47205d7673ff988ddfc4632e556083ab8f5452376963677b9cc91314ff7363f811f1dfa575e8ead3c870ad237f0e930ee8804bdda308b00487e82bcd112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/ui",
-  "version": "55.0.1",
+  "version": "55.0.2",
   "description": "A collection of UI components",
   "sideEffects": [
     "*.fx.js"
@@ -60,5 +60,5 @@
     "react": "*",
     "react-native": "*"
   },
-  "gitHead": "39a7a009e215eb71a112f4a20dba2d471ab21108"
+  "gitHead": "bcdd2c239f8a92cdf5140e35cde768352630acd6"
 }

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

@@ -8,6 +8,96 @@ export type AndroidVariant = 'picker' | 'input';
 
 export type DisplayedComponents = 'date' | 'hourAndMinute' | 'dateAndTime';
 
+/**
+ * Color overrides for the Material 3 DatePicker component.
+ * All properties are optional — unset values use Material 3 theme defaults.
+ */
+export type DatePickerElementColors = {
+  /** The background color of the date picker. */
+  containerColor?: ColorValue;
+  /** The color used for the date picker's title. */
+  titleContentColor?: ColorValue;
+  /** The color used for the date picker's headline. */
+  headlineContentColor?: ColorValue;
+  /** The color used for the weekday letters (Mon, Tue, etc.). */
+  weekdayContentColor?: ColorValue;
+  /** The color used for the month and year subhead labels. */
+  subheadContentColor?: ColorValue;
+  /** The color used for navigation arrows and year selection menu button. */
+  navigationContentColor?: ColorValue;
+  /** The color used for year item content. */
+  yearContentColor?: ColorValue;
+  /** The color used for disabled year item content. */
+  disabledYearContentColor?: ColorValue;
+  /** The color used for the current year content. */
+  currentYearContentColor?: ColorValue;
+  /** The color used for the selected year content. */
+  selectedYearContentColor?: ColorValue;
+  /** The color used for a disabled selected year content. */
+  disabledSelectedYearContentColor?: ColorValue;
+  /** The color used for the selected year container/background. */
+  selectedYearContainerColor?: ColorValue;
+  /** The color used for a disabled selected year container. */
+  disabledSelectedYearContainerColor?: ColorValue;
+  /** The color used for day content (number text). */
+  dayContentColor?: ColorValue;
+  /** The color used for disabled day content. */
+  disabledDayContentColor?: ColorValue;
+  /** The color used for selected day content. */
+  selectedDayContentColor?: ColorValue;
+  /** The color used for a disabled selected day content. */
+  disabledSelectedDayContentColor?: ColorValue;
+  /** The color used for the selected day container/background circle. */
+  selectedDayContainerColor?: ColorValue;
+  /** The color used for a disabled selected day container. */
+  disabledSelectedDayContainerColor?: ColorValue;
+  /** The color used for today's date text. */
+  todayContentColor?: ColorValue;
+  /** The color used for today's date border. */
+  todayDateBorderColor?: ColorValue;
+  /** The content color for days within a date range selection. */
+  dayInSelectionRangeContentColor?: ColorValue;
+  /** The container color for days within a date range selection. */
+  dayInSelectionRangeContainerColor?: ColorValue;
+  /** The color used for divider lines. */
+  dividerColor?: ColorValue;
+};
+
+/**
+ * Color overrides for the Material 3 TimePicker component.
+ * All properties are optional — unset values use Material 3 theme defaults.
+ */
+export type TimePickerElementColors = {
+  /** The container/background color of the time picker. */
+  containerColor?: ColorValue;
+  /** The background color of the clock dial. */
+  clockDialColor?: ColorValue;
+  /** The color of clock dial numbers when selected or overlapping the selector. */
+  clockDialSelectedContentColor?: ColorValue;
+  /** The color of clock dial numbers when unselected. */
+  clockDialUnselectedContentColor?: ColorValue;
+  /** The color of the clock dial selector (hand). */
+  selectorColor?: ColorValue;
+  /** The border color of the AM/PM period selector. */
+  periodSelectorBorderColor?: ColorValue;
+  /** The background color of the selected AM/PM period. */
+  periodSelectorSelectedContainerColor?: ColorValue;
+  /** The background color of the unselected AM/PM period. */
+  periodSelectorUnselectedContainerColor?: ColorValue;
+  /** The text color of the selected AM/PM period. */
+  periodSelectorSelectedContentColor?: ColorValue;
+  /** The text color of the unselected AM/PM period. */
+  periodSelectorUnselectedContentColor?: ColorValue;
+  /** The background color of the selected hour/minute segment. */
+  timeSelectorSelectedContainerColor?: ColorValue;
+  /** The background color of the unselected hour/minute segment. */
+  timeSelectorUnselectedContainerColor?: ColorValue;
+  /** The text color of the selected hour/minute segment. */
+  timeSelectorSelectedContentColor?: ColorValue;
+  /** The text color of the unselected hour/minute segment. */
+  timeSelectorUnselectedContentColor?: ColorValue;
+};
+
 export type DateTimePickerProps = {
   /**
    * The initial date to display on the picker.
@@ -37,8 +127,19 @@ export type DateTimePickerProps = {
   displayedComponents?: DisplayedComponents;
   /**
    * The tint color to use on the picker elements.
+   * When `elementColors` is not provided, this color is applied to a subset of
+   * picker elements (selected day, title, headline, today border for date picker;
+   * selector, selected time segment, clock dial for time picker).
    */
   color?: ColorValue;
+  /**
+   * Fine-grained color overrides for individual picker elements.
+   * When provided, these take precedence over the `color` prop.
+   * Date picker color keys are used when `displayedComponents` is 'date' or 'dateAndTime'.
+   * Time picker color keys are used when `displayedComponents` is 'hourAndMinute'.
+   * Unset values fall back to Material 3 theme defaults.
+   */
+  elementColors?: DatePickerElementColors & TimePickerElementColors;
   /**
    * Determines what format the clock should be displayed in on Android.
    * @default true
@@ -52,14 +153,15 @@ export type DateTimePickerProps = {
 
 type NativeDatePickerProps = Omit<
   DateTimePickerProps,
-  'variant' | 'onDateSelected' | 'initialDate'
+  'variant' | 'onDateSelected' | 'initialDate' | 'elementColors'
 > & {
   variant?: AndroidVariant;
   initialDate?: number | null;
+  elementColors?: DatePickerElementColors & TimePickerElementColors;
 } & ViewEvent<'onDateSelected', { date: Date }>;
 
 function transformDateTimePickerProps(props: DateTimePickerProps): NativeDatePickerProps {
-  const { modifiers, variant, initialDate, ...rest } = props;
+  const { modifiers, variant, initialDate, elementColors, color, ...rest } = props;
 
   // Convert ISO string to timestamp for Android
   const initialDateTimestamp = initialDate ? new Date(initialDate).getTime() : null;
@@ -68,11 +170,13 @@ function transformDateTimePickerProps(props: DateTimePickerProps): NativeDatePic
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...rest,
+    color,
     initialDate: initialDateTimestamp,
     onDateSelected: ({ nativeEvent: { date } }) => {
       props?.onDateSelected?.(new Date(date));
     },
     variant,
+    ...(elementColors != null ? { elementColors } : {}),
   };
 }
 

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

@@ -5,7 +5,7 @@ import { createViewModifierEventListener } from '../modifiers/utils';
 
 export type SpacerProps = {
   /**
-   * Modifiers for the component. Use weight() modifier to make the spacer flexible.
+   * Modifiers for the component. Use `weight()` modifier to make the spacer flexible.
    */
   modifiers?: ExpoModifier[];
 };
@@ -27,7 +27,7 @@ function transformProps(props: SpacerProps): NativeSpacerProps {
 
 /**
  * A spacer component that fills available space.
- * Use with the weight() modifier to create flexible spacing in Row or Column layouts.
+ * Use with the `weight()` modifier to create flexible spacing in `Row` or `Column` layouts.
  *
  * @example
  * ```tsx

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

@@ -12,8 +12,20 @@ import { createViewModifierEventListener } from '../modifiers/utils';
 type SwitchElementColors = {
   checkedThumbColor?: ColorValue;
   checkedTrackColor?: ColorValue;
+  checkedBorderColor?: ColorValue;
+  checkedIconColor?: ColorValue;
   uncheckedThumbColor?: ColorValue;
   uncheckedTrackColor?: ColorValue;
+  uncheckedBorderColor?: ColorValue;
+  uncheckedIconColor?: ColorValue;
+  disabledCheckedThumbColor?: ColorValue;
+  disabledCheckedTrackColor?: ColorValue;
+  disabledCheckedBorderColor?: ColorValue;
+  disabledCheckedIconColor?: ColorValue;
+  disabledUncheckedThumbColor?: ColorValue;
+  disabledUncheckedTrackColor?: ColorValue;
+  disabledUncheckedBorderColor?: ColorValue;
+  disabledUncheckedIconColor?: ColorValue;
 };
 
 // @docsMissing
@@ -46,6 +58,12 @@ export type SwitchProps = {
    * @default 'switch'
    */
   variant?: 'checkbox' | 'switch' | 'button';
+  /**
+   * Whether the switch is enabled.
+   * @default true
+   * @platform android
+   */
+  enabled?: boolean;
   /**
    * Callback function that is called when the checked state changes.
    */

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

@@ -0,0 +1,37 @@
+// AnimationSpec factories — return typed JSON matching Compose's AnimationSpec subtypes
+
+export const spring = (params?: {
+  dampingRatio?: number;
+  stiffness?: number;
+  visibilityThreshold?: number;
+}) => ({ $type: 'spring' as const, ...params });
+
+export const tween = (params?: {
+  durationMillis?: number;
+  delayMillis?: number;
+  easing?: 'linear' | 'fastOutSlowIn' | 'fastOutLinearIn' | 'linearOutSlowIn' | 'ease';
+}) => ({ $type: 'tween' as const, ...params });
+
+export const snap = (params?: { delayMillis?: number }) => ({
+  $type: 'snap' as const,
+  ...params,
+});
+
+export const keyframes = (params: {
+  durationMillis: number;
+  delayMillis?: number;
+  keyframes: Record<number, number>;
+}) => ({ $type: 'keyframes' as const, ...params });
+
+export type AnimationSpec = ReturnType<
+  typeof spring | typeof tween | typeof snap | typeof keyframes
+>;
+
+// animated() wrapper — wraps a target value with an animation spec
+export const animated = (targetValue: number, spec: AnimationSpec = spring()) => ({
+  $animated: true as const,
+  targetValue,
+  animationSpec: spec,
+});
+
+export type AnimatedValue = ReturnType<typeof animated>;

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

@@ -1,7 +1,17 @@
 import { type ColorValue } from 'react-native';
 
+import { type AnimatedValue } from './animation';
 import { createModifier, createModifierWithEventListener } from './createModifier';
 export { type ExpoModifier } from '../../types';
+export {
+  animated,
+  spring,
+  tween,
+  snap,
+  keyframes,
+  type AnimationSpec,
+  type AnimatedValue,
+} from './animation';
 
 export type Alignment =
   // 2D Alignments
@@ -151,6 +161,48 @@ export const blur = (radius: number) => createModifier('blur', { radius });
  */
 export const rotate = (degrees: number) => createModifier('rotate', { degrees });
 
+/**
+ * Applies a graphics layer transformation with animation support.
+ * @param params - Transform and visual effect parameters.
+ * @see [Compose graphicsLayer documentation](https://developer.android.com/develop/ui/compose/graphics/draw/modifiers).
+ */
+export const graphicsLayer = (params: {
+  /** Rotation around the X axis in degrees. */
+  rotationX?: number | AnimatedValue;
+  /** Rotation around the Y axis in degrees. */
+  rotationY?: number | AnimatedValue;
+  /** Rotation around the Z axis in degrees. */
+  rotationZ?: number | AnimatedValue;
+  /** Horizontal scale factor (1.0 = no change). */
+  scaleX?: number | AnimatedValue;
+  /** Vertical scale factor (1.0 = no change). */
+  scaleY?: number | AnimatedValue;
+  /** Opacity (0.0 = transparent, 1.0 = opaque). */
+  alpha?: number | AnimatedValue;
+  /** Horizontal translation in dp. */
+  translationX?: number | AnimatedValue;
+  /** Vertical translation in dp. */
+  translationY?: number | AnimatedValue;
+  /** Distance from the camera in dp. Affects 3D rotation perspective. */
+  cameraDistance?: number;
+  /** Shadow elevation in dp. */
+  shadowElevation?: number | AnimatedValue;
+  /** Horizontal pivot point for transforms (0.0 = left, 0.5 = center, 1.0 = right). */
+  transformOriginX?: number;
+  /** Vertical pivot point for transforms (0.0 = top, 0.5 = center, 1.0 = bottom). */
+  transformOriginY?: number;
+  /** Whether to clip content to the shape. */
+  clip?: boolean;
+  /** Shape for clipping and shadow. Uses the same shapes as the `clip` modifier. */
+  shape?: BuiltinShape;
+  /** Color of the ambient shadow. */
+  ambientShadowColor?: ColorValue;
+  /** Color of the spot shadow. */
+  spotShadowColor?: ColorValue;
+  /** Compositing strategy: 'auto', 'offscreen', or 'modulate'. */
+  compositingStrategy?: 'auto' | 'offscreen' | 'modulate';
+}) => createModifier('graphicsLayer', params);
+
 /**
  * Sets the z-index for layering.
  * @param index - Z-index value.
@@ -163,8 +215,8 @@ export const zIndex = (index: number) => createModifier('zIndex', { index });
 
 /**
  * Animates size changes with spring animation.
- * @param dampingRatio - Spring damping ratio. Default is DampingRatioNoBouncy.
- * @param stiffness - Spring stiffness. Default is StiffnessMedium.
+ * @param dampingRatio - Spring damping ratio. Default is `DampingRatioNoBouncy`.
+ * @param stiffness - Spring stiffness. Default is `StiffnessMedium`.
  */
 export const animateContentSize = (dampingRatio?: number, stiffness?: number) =>
   createModifier('animateContentSize', { dampingRatio, stiffness });
@@ -198,9 +250,13 @@ export const matchParentSize = () => createModifier('matchParentSize');
 /**
  * Makes the view clickable.
  * @param handler - Function to call when clicked.
+ * @param options - Optional configuration.
+ * @param options.indication - Whether to show a ripple indication. Defaults to `true`.
  */
-export const clickable = (handler: () => void) =>
-  createModifierWithEventListener('clickable', handler);
+export const clickable = (handler: () => void, options?: { indication?: boolean }) =>
+  createModifierWithEventListener('clickable', handler, {
+    indication: options?.indication ?? true,
+  });
 
 /**
  * Makes the view selectable, like a radio button row.

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

@@ -0,0 +1,12 @@
+import { requireNativeView } from 'expo';
+
+import { type CommonViewModifierProps } from '../types';
+
+export type AccessoryWidgetBackgroundProps = CommonViewModifierProps;
+
+const AccessoryWidgetBackgroundNativeView: React.ComponentType<AccessoryWidgetBackgroundProps> =
+  requireNativeView('ExpoUI', 'AccessoryWidgetBackgroundView');
+
+export function AccessoryWidgetBackground(props: AccessoryWidgetBackgroundProps) {
+  return <AccessoryWidgetBackgroundNativeView {...props} />;
+}

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

@@ -1,6 +1,7 @@
 import { requireNativeView } from 'expo';
 import { NativeSyntheticEvent } from 'react-native';
 
+import { Slot } from '../SlotView';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import { type CommonViewModifierProps } from '../types';
 
@@ -39,34 +40,25 @@ type NativeConfirmationDialogProps = Omit<ConfirmationDialogProps, 'onIsPresente
 const ConfirmationDialogNativeView: React.ComponentType<NativeConfirmationDialogProps> =
   requireNativeView('ExpoUI', 'ConfirmationDialogView');
 
-const ConfirmationDialogNativeTrigger: React.ComponentType<{ children: React.ReactNode }> =
-  requireNativeView('ExpoUI', 'ConfirmationDialogTrigger');
-
-const ConfirmationDialogNativeActions: React.ComponentType<{ children: React.ReactNode }> =
-  requireNativeView('ExpoUI', 'ConfirmationDialogActions');
-
-const ConfirmationDialogNativeMessage: React.ComponentType<{ children: React.ReactNode }> =
-  requireNativeView('ExpoUI', 'ConfirmationDialogMessage');
-
 /**
  * The component visible all the time that triggers the confirmation dialog presentation.
  */
 function Trigger(props: { children: React.ReactNode }) {
-  return <ConfirmationDialogNativeTrigger {...props} />;
+  return <Slot name="trigger">{props.children}</Slot>;
 }
 
 /**
  * The action buttons displayed in the confirmation dialog. Use `Button` components from `@expo/ui/swift-ui` as children.
  */
 function Actions(props: { children: React.ReactNode }) {
-  return <ConfirmationDialogNativeActions {...props} />;
+  return <Slot name="actions">{props.children}</Slot>;
 }
 
 /**
  * An optional message displayed below the title in the confirmation dialog.
  */
 function Message(props: { children: React.ReactNode }) {
-  return <ConfirmationDialogNativeMessage {...props} />;
+  return <Slot name="message">{props.children}</Slot>;
 }
 
 /**

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

@@ -2,47 +2,33 @@ import { requireNativeView } from 'expo';
 import { ComponentType } from 'react';
 
 import { type ContextMenuProps } from './types';
+import { Slot } from '../SlotView';
 
 export { type ContextMenuProps } from './types';
 
-const MenuNativeView: ComponentType<NativeMenuProps> = requireNativeView('ExpoUI', 'ContextMenu');
-
-const MenuNativeTriggerView: ComponentType<object> = requireNativeView(
-  'ExpoUI',
-  'ContextMenuActivationElement'
-);
-
-const MenuNativePreviewView: ComponentType<object> = requireNativeView(
-  'ExpoUI',
-  'ContextMenuPreview'
-);
-
-const MenuNativeItemsView: ComponentType<object> = requireNativeView(
-  'ExpoUI',
-  'ContextMenuContent'
-);
-
 type NativeMenuProps = ContextMenuProps;
 
+const MenuNativeView: ComponentType<NativeMenuProps> = requireNativeView('ExpoUI', 'ContextMenu');
+
 /**
  * Items visible inside the context menu. It could be `Section`, `Divider`, `Button`, `Toggle`, `Picker` or even `ContextMenu` itself for nested menus. Remember to use components from the `@expo/ui/swift-ui` library.
  */
 export function Items(props: { children: React.ReactNode }) {
-  return <MenuNativeItemsView {...props} />;
+  return <Slot name="items">{props.children}</Slot>;
 }
 
 /**
  * The component visible all the time that triggers the context menu when long-pressed.
  */
 export function Trigger(props: { children: React.ReactNode }) {
-  return <MenuNativeTriggerView {...props} />;
+  return <Slot name="trigger">{props.children}</Slot>;
 }
 
 /**
  * The component visible above the menu when it is opened.
  */
 export function Preview(props: { children: React.ReactNode }) {
-  return <MenuNativePreviewView {...props} />;
+  return <Slot name="preview">{props.children}</Slot>;
 }
 
 /**

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

@@ -0,0 +1,59 @@
+import { requireNativeView } from 'expo';
+import { type ReactNode, type ComponentType } from 'react';
+import { type SFSymbol } from 'sf-symbols-typescript';
+
+import { Slot } from '../SlotView';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
+export interface ControlGroupProps extends CommonViewModifierProps {
+  /**
+   * The label for the control group. Can be a string for simple text labels,
+   * or a `Label` component for custom label content. When omitted, the control group
+   * has no label.
+   * @platform iOS 16.0+
+   * @platform tvOS 17.0+
+   */
+  label?: string | ReactNode;
+  /**
+   * An SF Symbol name to display alongside the label.
+   * Only used when `label` is a string.
+   * @platform iOS 16.0+
+   * @platform tvOS 17.0+
+   */
+  systemImage?: SFSymbol;
+  /**
+   * The control group's content.
+   * Can contain `Button`, `Toggle`, `Picker`, or other interactive controls.
+   * @platform iOS
+   * @platform tvOS 17.0+
+   */
+  children: ReactNode;
+}
+
+type NativeControlGroupProps = Omit<ControlGroupProps, 'label'> & {
+  label?: string;
+};
+
+const ControlGroupNativeView: ComponentType<NativeControlGroupProps> = requireNativeView(
+  'ExpoUI',
+  'ControlGroupView'
+);
+
+export function ControlGroup(props: ControlGroupProps) {
+  const { label, children, systemImage, modifiers, ...rest } = props;
+
+  const isStringLabel = typeof label === 'string';
+
+  return (
+    <ControlGroupNativeView
+      label={isStringLabel ? label : undefined}
+      systemImage={systemImage}
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...rest}>
+      {!isStringLabel && label != null ? <Slot name="label">{label}</Slot> : null}
+      {children}
+    </ControlGroupNativeView>
+  );
+}

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

@@ -1,13 +1,9 @@
 import { requireNativeView } from 'expo';
 
+import { Slot } from '../SlotView';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import { type CommonViewModifierProps } from '../types';
 
-/**
- * The type of gauge label.
- */
-type GaugeLabelKind = 'label' | 'currentValue' | 'minimumValue' | 'maximumValue';
-
 export type GaugeProps = {
   /**
    * The current value of the gauge.
@@ -53,11 +49,6 @@ const GaugeNativeView: React.ComponentType<NativeGaugeProps> = requireNativeView
   'GaugeView'
 );
 
-const GaugeLabelNativeView: React.ComponentType<{
-  kind: GaugeLabelKind;
-  children?: React.ReactNode;
-}> = requireNativeView('ExpoUI', 'GaugeLabelView');
-
 /**
  * Renders a SwiftUI `Gauge` component.
  */
@@ -76,16 +67,10 @@ export function Gauge(props: GaugeProps) {
       modifiers={modifiers}
       {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
       {...restProps}>
-      {children && <GaugeLabelNativeView kind="label">{children}</GaugeLabelNativeView>}
-      {currentValueLabel && (
-        <GaugeLabelNativeView kind="currentValue">{currentValueLabel}</GaugeLabelNativeView>
-      )}
-      {minimumValueLabel && (
-        <GaugeLabelNativeView kind="minimumValue">{minimumValueLabel}</GaugeLabelNativeView>
-      )}
-      {maximumValueLabel && (
-        <GaugeLabelNativeView kind="maximumValue">{maximumValueLabel}</GaugeLabelNativeView>
-      )}
+      {children && <Slot name="label">{children}</Slot>}
+      {currentValueLabel && <Slot name="currentValue">{currentValueLabel}</Slot>}
+      {minimumValueLabel && <Slot name="minimumValue">{minimumValueLabel}</Slot>}
+      {maximumValueLabel && <Slot name="maximumValue">{maximumValueLabel}</Slot>}
     </GaugeNativeView>
   );
 }

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

@@ -11,7 +11,13 @@ export interface ImageProps extends CommonViewModifierProps {
    * The name of the system image (SF Symbol).
    * For example: 'photo', 'heart.fill', 'star.circle'
    */
-  systemName: SFSymbol;
+  systemName?: SFSymbol;
+  /**
+   * The URI of the local image file to display.
+   * For example: 'file:///path/to/image.jpg'
+   * Performs a synchronous read operation that blocks the main thread.
+   */
+  uiImage?: string;
   /**
    * The size of the system image.
    */

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

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import type { ColorValue } from 'react-native';
 import { type SFSymbol } from 'sf-symbols-typescript';
 
+import { Slot } from '../SlotView';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import { type CommonViewModifierProps } from '../types';
 
@@ -31,10 +32,6 @@ export type LabelProps = {
 
 const LabelNativeView: React.ComponentType<LabelProps & { children?: React.ReactNode }> =
   requireNativeView('ExpoUI', 'LabelView');
-const LabelIconNativeView: React.ComponentType<{ children?: React.ReactNode }> = requireNativeView(
-  'ExpoUI',
-  'LabelIcon'
-);
 
 /**
  * Renders a native label view, which could be used in a list or section.
@@ -49,7 +46,7 @@ export function Label(props: LabelProps) {
       modifiers={modifiers}
       {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
       {...restProps}>
-      {icon && <LabelIconNativeView>{icon}</LabelIconNativeView>}
+      {icon && <Slot name="icon">{icon}</Slot>}
     </LabelNativeView>
   );
 }