@expo/ui 55.0.0 → 55.0.2

package/src/jetpack-compose/layout-types.ts

@@ -0,0 +1,48 @@
+import { ExpoModifier } from '../types';
+import { createViewModifierEventListener } from './modifiers/utils';
+
+export type PrimitiveBaseProps = {
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ExpoModifier[];
+};
+
+export type HorizontalArrangement =
+  | 'start'
+  | 'end'
+  | 'center'
+  | 'spaceBetween'
+  | 'spaceAround'
+  | 'spaceEvenly'
+  | { spacedBy: number };
+export type VerticalArrangement =
+  | 'top'
+  | 'bottom'
+  | 'center'
+  | 'spaceBetween'
+  | 'spaceAround'
+  | 'spaceEvenly'
+  | { spacedBy: number };
+export type HorizontalAlignment = 'start' | 'end' | 'center';
+export type VerticalAlignment = 'top' | 'bottom' | 'center';
+export type ContentAlignment =
+  | 'topStart'
+  | 'topCenter'
+  | 'topEnd'
+  | 'centerStart'
+  | 'center'
+  | 'centerEnd'
+  | 'bottomStart'
+  | 'bottomCenter'
+  | 'bottomEnd';
+export type FloatingToolbarExitAlwaysScrollBehavior = 'top' | 'bottom' | 'start' | 'end';
+
+export function transformProps<T extends PrimitiveBaseProps>(props: T) {
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  };
+}

package/src/jetpack-compose/layout.tsx

@@ -1,106 +1,5 @@
-import { requireNativeView } from 'expo';
-
-import { ExpoModifier } from '../types';
-import { createViewModifierEventListener } from './modifiers/utils';
-
-export type PrimitiveBaseProps = {
-  /**
-   * Modifiers for the component.
-   */
-  modifiers?: ExpoModifier[];
-};
-
-export type HorizontalArrangement =
-  | 'start'
-  | 'end'
-  | 'center'
-  | 'spaceBetween'
-  | 'spaceAround'
-  | 'spaceEvenly'
-  | { spacedBy: number };
-export type VerticalArrangement =
-  | 'top'
-  | 'bottom'
-  | 'center'
-  | 'spaceBetween'
-  | 'spaceAround'
-  | 'spaceEvenly'
-  | { spacedBy: number };
-export type HorizontalAlignment = 'start' | 'end' | 'center';
-export type VerticalAlignment = 'top' | 'bottom' | 'center';
-export type ContentAlignment =
-  | 'topStart'
-  | 'topCenter'
-  | 'topEnd'
-  | 'centerStart'
-  | 'center'
-  | 'centerEnd'
-  | 'bottomStart'
-  | 'bottomCenter'
-  | 'bottomEnd';
-export type FloatingToolbarExitAlwaysScrollBehavior = 'top' | 'bottom' | 'start' | 'end';
-
-type LayoutBaseProps = {
-  children?: React.ReactNode;
-  horizontalArrangement?: HorizontalArrangement;
-  verticalArrangement?: VerticalArrangement;
-  horizontalAlignment?: HorizontalAlignment;
-  verticalAlignment?: VerticalAlignment;
-  contentAlignment?: ContentAlignment;
-  floatingToolbarExitAlwaysScrollBehavior?: FloatingToolbarExitAlwaysScrollBehavior;
-  modifiers?: ExpoModifier[];
-} & PrimitiveBaseProps;
-
-function transformProps(props: LayoutBaseProps) {
-  const { modifiers, ...restProps } = props;
-  return {
-    modifiers,
-    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
-    ...restProps,
-  };
-}
-
-//#region Box Component
-export type BoxProps = Pick<
-  LayoutBaseProps,
-  'children' | 'modifiers' | 'contentAlignment' | 'floatingToolbarExitAlwaysScrollBehavior'
->;
-const BoxNativeView: React.ComponentType<BoxProps> = requireNativeView('ExpoUI', 'BoxView');
-
-export function Box(props: BoxProps) {
-  return <BoxNativeView {...transformProps(props)} />;
-}
-//#endregion
-
-//#region Row Component
-export type RowProps = LayoutBaseProps;
-const RowNativeView: React.ComponentType<RowProps> = requireNativeView('ExpoUI', 'RowView');
-export function Row(props: RowProps) {
-  return <RowNativeView {...transformProps(props)} />;
-}
-//#endregion
-
-//#region FlowRow Component
-export type FlowRowProps = Pick<
-  LayoutBaseProps,
-  'children' | 'modifiers' | 'horizontalArrangement' | 'verticalArrangement'
->;
-const FlowRowNativeView: React.ComponentType<FlowRowProps> = requireNativeView(
-  'ExpoUI',
-  'FlowRowView'
-);
-export function FlowRow(props: FlowRowProps) {
-  return <FlowRowNativeView {...transformProps(props)} />;
-}
-//#endregion
-
-//#region Column Component
-export type ColumnProps = LayoutBaseProps;
-const ColumnNativeView: React.ComponentType<ColumnProps> = requireNativeView(
-  'ExpoUI',
-  'ColumnView'
-);
-export function Column(props: ColumnProps) {
-  return <ColumnNativeView {...transformProps(props)} />;
-}
-//#endregion
+export * from './layout-types';
+export * from './Box';
+export * from './Row';
+export * from './Column';
+export * from './FlowRow';

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

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