@expo/ui 55.0.1 → 55.0.3

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,17 +250,45 @@ 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.
  * @param selected - Whether the item is currently selected.
  * @param handler - Function to call when the item is clicked.
+ * @param role - Optional semantic role for accessibility: 'radioButton', 'checkbox', 'switch', or 'tab'.
+ */
+export const selectable = (
+  selected: boolean,
+  handler: () => void,
+  role?: 'radioButton' | 'checkbox' | 'switch' | 'tab'
+) => createModifierWithEventListener('selectable', handler, { selected, role });
+
+/**
+ * Marks a column/row as a selectable group for accessibility.
+ * Screen readers will treat the children as a group of selectable items.
+ */
+export const selectableGroup = () => createModifier('selectableGroup');
+
+/**
+ * Makes the view toggleable with accessibility semantics.
+ * Use this to make a row containing a checkbox or switch tappable as a whole.
+ * @param value - The current toggle state.
+ * @param handler - Function to call when toggled.
+ * @param options - Optional configuration.
+ * @param options.role - The semantic role for accessibility: `'checkbox'`, `'radioButton'`, `'switch'`, or `'tab'`.
  */
-export const selectable = (selected: boolean, handler: () => void) =>
-  createModifierWithEventListener('selectable', handler, { selected });
+export const toggleable = (
+  value: boolean,
+  handler: () => void,
+  options?: { role?: 'checkbox' | 'radioButton' | 'switch' | 'tab' }
+) => createModifierWithEventListener('toggleable', handler, { value, role: options?.role });
 
 // =============================================================================
 // Utility Modifiers

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>
   );
 }

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

@@ -1,5 +1,6 @@
 import { requireNativeView } from 'expo';
 
+import { Slot } from '../SlotView';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import { type CommonViewModifierProps } from '../types';
 
@@ -16,16 +17,6 @@ const LabeledContentNativeView: React.ComponentType<LabeledContentProps> = requi
   'LabeledContentView'
 );
 
-const LabeledContentLabel: React.ComponentType<object> = requireNativeView(
-  'ExpoUI',
-  'LabeledContentLabel'
-);
-
-const LabeledContentContent: React.ComponentType<object> = requireNativeView(
-  'ExpoUI',
-  'LabeledContentContent'
-);
-
 /**
  * LabeledContent component uses the native [LabeledContent](https://developer.apple.com/documentation/swiftui/labeledcontent) component.
  * A container for attaching a label to a value-bearing view.
@@ -43,8 +34,8 @@ export function LabeledContent(props: LabeledContentProps) {
       label={isLabelString ? label : undefined}
       {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
       {...restProps}>
-      {label && !isLabelString && <LabeledContentLabel>{label}</LabeledContentLabel>}
-      <LabeledContentContent>{children}</LabeledContentContent>
+      {label && !isLabelString && <Slot name="label">{label}</Slot>}
+      <Slot name="content">{children}</Slot>
     </LabeledContentNativeView>
   );
 }

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

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import { ComponentType } from 'react';
 
 import { type MenuProps } from './types';
+import { Slot } from '../SlotView';
 
 export { type MenuProps } from './types';
 
@@ -13,11 +14,6 @@ type NativeMenuProps = Omit<MenuProps, 'label' | 'onPrimaryAction'> & {
 
 const MenuNativeView: ComponentType<NativeMenuProps> = requireNativeView('ExpoUI', 'MenuView');
 
-const MenuNativeLabelView: ComponentType<{ children: React.ReactNode }> = requireNativeView(
-  'ExpoUI',
-  'MenuLabel'
-);
-
 /**
  * Displays a dropdown menu when tapped.
  */
@@ -33,7 +29,7 @@ export function Menu(props: MenuProps) {
       hasPrimaryAction={onPrimaryAction != null}
       onPrimaryAction={onPrimaryAction}
       {...rest}>
-      {!isStringLabel && <MenuNativeLabelView>{label}</MenuNativeLabelView>}
+      {!isStringLabel && <Slot name="label">{label}</Slot>}
       {children}
     </MenuNativeView>
   );

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

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import type { NativeSyntheticEvent } from 'react-native';
 import type { SFSymbol } from 'sf-symbols-typescript';
 
+import { Slot } from '../SlotView';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import { type CommonViewModifierProps } from '../types';
 
@@ -42,14 +43,6 @@ const PickerNativeView: React.ComponentType<NativePickerProps> = requireNativeVi
   'PickerView'
 );
 
-const PickerContentNativeView: React.ComponentType<{ children: React.ReactNode }> =
-  requireNativeView('ExpoUI', 'PickerContentView');
-
-const PickerLabelNativeView: React.ComponentType<{ children: React.ReactNode }> = requireNativeView(
-  'ExpoUI',
-  'PickerLabelView'
-);
-
 function transformPickerProps<T extends SelectionValueType>(
   props: PickerProps<T>
 ): NativePickerProps {
@@ -81,14 +74,14 @@ export function Picker<T extends SelectionValueType>(props: PickerProps<T>) {
   if (typeof label === 'string') {
     return (
       <PickerNativeView {...restProps} label={label}>
-        <PickerContentNativeView>{children}</PickerContentNativeView>
+        <Slot name="content">{children}</Slot>
       </PickerNativeView>
     );
   } else {
     return (
       <PickerNativeView {...restProps}>
-        <PickerLabelNativeView>{label}</PickerLabelNativeView>
-        <PickerContentNativeView>{children}</PickerContentNativeView>
+        <Slot name="label">{label}</Slot>
+        <Slot name="content">{children}</Slot>
       </PickerNativeView>
     );
   }

package/src/swift-ui/Popover/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';
 
@@ -34,22 +35,12 @@ const PopoverNativeView: React.ComponentType<NativePopoverViewProps> = requireNa
   'PopoverView'
 );
 
-const PopoverViewContent: React.ComponentType<object> = requireNativeView(
-  'ExpoUI',
-  'PopoverViewContent'
-);
-
-const PopoverViewPopContent: React.ComponentType<object> = requireNativeView(
-  'ExpoUI',
-  'PopoverViewPopContent'
-);
-
 function PopoverTrigger(props: { children: React.ReactNode }) {
-  return <PopoverViewContent {...props} />;
+  return <Slot name="trigger">{props.children}</Slot>;
 }
 
 function PopoverContent(props: { children: React.ReactNode }) {
-  return <PopoverViewPopContent {...props} />;
+  return <Slot name="popover">{props.children}</Slot>;
 }
 
 Popover.Trigger = PopoverTrigger;

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

@@ -1,9 +1,7 @@
 import { requireNativeView } from 'expo';
 
 import { createViewModifierEventListener } from '../modifiers/utils';
-import { type CommonViewModifierProps } from '../types';
-
-export type ClosedRangeDate = { lower: Date; upper: Date };
+import { type ClosedRangeDate, type CommonViewModifierProps } from '../types';
 
 export type ProgressViewProps = {
   /**

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

@@ -1,5 +1,6 @@
 import { requireNativeView } from 'expo';
 
+import { Slot } from '../SlotView';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import { type CommonViewModifierProps } from '../types';
 
@@ -45,12 +46,6 @@ const SectionNativeView: React.ComponentType<SectionNativeProps> = requireNative
   'SectionView'
 );
 
-const SectionHeader: React.ComponentType<object> = requireNativeView('ExpoUI', 'SectionHeader');
-
-const SectionFooter: React.ComponentType<object> = requireNativeView('ExpoUI', 'SectionFooter');
-
-const SectionContent: React.ComponentType<object> = requireNativeView('ExpoUI', 'SectionContent');
-
 /**
  * Section component uses the native [Section](https://developer.apple.com/documentation/swiftui/section) component.
  */
@@ -65,9 +60,9 @@ export function Section(props: SectionProps) {
           onIsExpandedChange(e.nativeEvent.isExpanded),
       })}
       {...restProps}>
-      {header && <SectionHeader>{header}</SectionHeader>}
-      {footer && <SectionFooter>{footer}</SectionFooter>}
-      <SectionContent>{children}</SectionContent>
+      {header && <Slot name="header">{header}</Slot>}
+      {footer && <Slot name="footer">{footer}</Slot>}
+      <Slot name="content">{children}</Slot>
     </SectionNativeView>
   );
 }

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

@@ -1,6 +1,7 @@
 import { requireNativeView } from 'expo';
 import type { NativeSyntheticEvent } from 'react-native';
 
+import { Slot } from '../SlotView';
 import { type CommonViewModifierProps } from '../types';
 
 export type SliderProps = {
@@ -56,11 +57,6 @@ const SliderNativeView: React.ComponentType<NativeSliderProps> = requireNativeVi
   'SliderView'
 );
 
-const SliderValueLabelNativeView: React.ComponentType<{
-  kind: 'label' | 'minimum' | 'maximum';
-  children?: React.ReactNode;
-}> = requireNativeView('ExpoUI', 'SliderLabelView');
-
 function transformSliderProps(props: SliderProps): NativeSliderProps {
   const {
     label,
@@ -90,13 +86,9 @@ export function Slider(props: SliderProps) {
 
   return (
     <SliderNativeView {...transformSliderProps(props)}>
-      {label && <SliderValueLabelNativeView kind="label">{label}</SliderValueLabelNativeView>}
-      {minimumValueLabel && (
-        <SliderValueLabelNativeView kind="minimum">{minimumValueLabel}</SliderValueLabelNativeView>
-      )}
-      {maximumValueLabel && (
-        <SliderValueLabelNativeView kind="maximum">{maximumValueLabel}</SliderValueLabelNativeView>
-      )}
+      {label && <Slot name="label">{label}</Slot>}
+      {minimumValueLabel && <Slot name="minimum">{minimumValueLabel}</Slot>}
+      {maximumValueLabel && <Slot name="maximum">{maximumValueLabel}</Slot>}
     </SliderNativeView>
   );
 }

package/src/swift-ui/SlotView.tsx

@@ -0,0 +1,8 @@
+import { requireNativeView } from 'expo';
+
+const SlotNativeView: React.ComponentType<{ name: string; children?: React.ReactNode }> =
+  requireNativeView('ExpoUI', 'SlotView');
+
+export function Slot({ name, children }: { name: string; children?: React.ReactNode }) {
+  return <SlotNativeView name={name}>{children}</SlotNativeView>;
+}