---
modificationDate: July 21, 2026
title: SwiftUI
description: SwiftUI components for building native iOS interfaces with @expo/ui.
sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-57/packages/expo-ui'
packageName: '@expo/ui'
platforms: ['ios', 'tvos', 'expo-go']
---

<AgentInstructions>

## Submitting Feedback

If you encounter errors, misleading or outdated information, report it so Expo can be improved:

Preferred command:
npx --yes submit-expo-feedback@latest --category docs --subject "/versions/v57.0.0/sdk/ui/swift-ui/" "<actionable feedback>"

Direct HTTP fallback:
curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/versions/v57.0.0/sdk/ui/swift-ui/","feedback":"🤖 Agent feedback for docs: <specific, actionable description> (<model>, <harness>)"}'

Only submit when you have something specific and actionable to report. Try to give the most context.

## Navigation

When answering a related or follow-up question, use llms.txt to find the relevant page as Markdown (.md) instead of guessing.

You are here: Reference (v57.0.0) > Expo UI > SwiftUI (44 pages in this section)
Full documentation tree: [llms.txt](https://docs.expo.dev/llms.txt)

</AgentInstructions>

This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](/llms.txt) or append .md to any documentation URL.

# SwiftUI

SwiftUI components for building native iOS interfaces with @expo/ui.
iOS, tvOS, Included in Expo Go

The SwiftUI components in `@expo/ui/swift-ui` allow you to build fully native iOS interfaces using SwiftUI from React Native.

## Installation

```sh
# npm
npx expo install @expo/ui

# yarn
yarn expo install @expo/ui

# pnpm
pnpm expo install @expo/ui

# bun
bun expo install @expo/ui
```

If you are installing this in an [existing React Native app](/bare/overview.md), make sure to [install `expo`](/bare/installing-expo-modules.md) in your project.

## Usage

Using a component from `@expo/ui/swift-ui` requires wrapping it in a [`Host`](/versions/v57.0.0/sdk/ui/swift-ui/host.md) component. The `Host` is a container for SwiftUI views.

```tsx
import { Host, Button } from '@expo/ui/swift-ui';

export function SaveButton() {
  return (
    <Host style={{ flex: 1 }}>
      <Button label="Save changes" />
    </Host>
  );
}
```

For more information, see the following resources:

[Expo UI guide for Swift UI](/guides/expo-ui-swift-ui.md) — Learn about the basics of @expo/ui/swift-ui — @expo/ui/swift-ui

[Extending with SwiftUI](/guides/expo-ui-swift-ui/extending.md) — Create custom SwiftUI components and modifiers that integrate with Expo UI.

[Expo UI iOS Liquid Glass Tutorial](https://www.youtube.com/watch?v=2wXYLWz3YEQ) — Learn how to build real SwiftUI views in your React Native app with the new Expo UI.

## Available components

| Component | Description |
| --- | --- |
| [`AccessoryWidgetBackground`](/versions/v57.0.0/sdk/ui/swift-ui/accessorywidgetbackground.md) | Adaptive background view that provides a standard appearance based on the widget's environment. |
| [`Alert`](/versions/v57.0.0/sdk/ui/swift-ui/alert.md) | Alert component for presenting native iOS alert dialogs. |
| [`BottomSheet`](/versions/v57.0.0/sdk/ui/swift-ui/bottomsheet.md) | BottomSheet component that presents content from the bottom of the screen. |
| [`Button`](/versions/v57.0.0/sdk/ui/swift-ui/button.md) | Button component for displaying native buttons. |
| [`ColorPicker`](/versions/v57.0.0/sdk/ui/swift-ui/colorpicker.md) | ColorPicker component for selecting colors. |
| [`ConfirmationDialog`](/versions/v57.0.0/sdk/ui/swift-ui/confirmationdialog.md) | ConfirmationDialog component for presenting confirmation prompts. |
| [`ContextMenu`](/versions/v57.0.0/sdk/ui/swift-ui/contextmenu.md) | ContextMenu component for displaying context menus. |
| [`ControlGroup`](/versions/v57.0.0/sdk/ui/swift-ui/controlgroup.md) | ControlGroup component for grouping interactive controls. |
| [`DatePicker`](/versions/v57.0.0/sdk/ui/swift-ui/datepicker.md) | DatePicker component for selecting dates and times. |
| [`DisclosureGroup`](/versions/v57.0.0/sdk/ui/swift-ui/disclosuregroup.md) | DisclosureGroup component for displaying expandable content. |
| [`Divider`](/versions/v57.0.0/sdk/ui/swift-ui/divider.md) | Divider component for creating visual separators. |
| [`Form`](/versions/v57.0.0/sdk/ui/swift-ui/form.md) | Form component for collecting user input in a structured layout. |
| [`Gauge`](/versions/v57.0.0/sdk/ui/swift-ui/gauge.md) | Gauge component for displaying progress with visual indicators. |
| [`Group`](/versions/v57.0.0/sdk/ui/swift-ui/group.md) | Group component for grouping views without affecting layout. |
| [`Host`](/versions/v57.0.0/sdk/ui/swift-ui/host.md) | Host component that enables SwiftUI components in React Native. |
| [`HStack`](/versions/v57.0.0/sdk/ui/swift-ui/hstack.md) | HStack component for horizontal layouts. |
| [`Image`](/versions/v57.0.0/sdk/ui/swift-ui/image.md) | Image component for displaying SF Symbols. |
| [`Label`](/versions/v57.0.0/sdk/ui/swift-ui/label.md) | Label component for displaying text with an icon. |
| [`LazyHStack`](/versions/v57.0.0/sdk/ui/swift-ui/lazyhstack.md) | LazyHStack component for lazy horizontal layouts. |
| [`LazyVStack`](/versions/v57.0.0/sdk/ui/swift-ui/lazyvstack.md) | LazyVStack component for lazy vertical layouts. |
| [`Link`](/versions/v57.0.0/sdk/ui/swift-ui/link.md) | Link component for displaying clickable links. |
| [`List`](/versions/v57.0.0/sdk/ui/swift-ui/list.md) | List component for displaying scrollable lists of items. |
| [`Menu`](/versions/v57.0.0/sdk/ui/swift-ui/menu.md) | Menu component for displaying dropdown menus. |
| [`Namespace`](/versions/v57.0.0/sdk/ui/swift-ui/namespace.md) | A Namespace component that allows you create Namespaces in SwiftUI |
| [`Overlay`](/versions/v57.0.0/sdk/ui/swift-ui/overlay.md) | Overlay component for layering content on top of another view. |
| [`Picker`](/versions/v57.0.0/sdk/ui/swift-ui/picker.md) | Picker component for selecting options from a list. |
| [`Popover`](/versions/v57.0.0/sdk/ui/swift-ui/popover.md) | Popover component for displaying content in a floating overlay. |
| [`ProgressView`](/versions/v57.0.0/sdk/ui/swift-ui/progressview.md) | ProgressView component for displaying progress indicators. |
| [`RNHostView`](/versions/v57.0.0/sdk/ui/swift-ui/rnhostview.md) | A component that enables React Native views inside SwiftUI. |
| [`ScrollView`](/versions/v57.0.0/sdk/ui/swift-ui/scrollview.md) | ScrollView component for scrollable content. |
| [`Section`](/versions/v57.0.0/sdk/ui/swift-ui/section.md) | Section component for grouping content within lists and forms. |
| [`SecureField`](/versions/v57.0.0/sdk/ui/swift-ui/securefield.md) | SecureField component for password input. |
| [`Slider`](/versions/v57.0.0/sdk/ui/swift-ui/slider.md) | Slider component for selecting values from a range. |
| [`Spacer`](/versions/v57.0.0/sdk/ui/swift-ui/spacer.md) | Spacer component for flexible spacing. |
| [`SwipeActions`](/versions/v57.0.0/sdk/ui/swift-ui/swipeactions.md) | SwipeActions component for adding leading and trailing swipe actions to row content. |
| [`TabView`](/versions/v57.0.0/sdk/ui/swift-ui/tabview.md) | TabView component for paged or tabbed content. |
| [`Text`](/versions/v57.0.0/sdk/ui/swift-ui/text.md) | Text component for displaying styled text with support for nested texts. |
| [`TextField`](/versions/v57.0.0/sdk/ui/swift-ui/textfield.md) | TextField component for text input. |
| [`Toggle`](/versions/v57.0.0/sdk/ui/swift-ui/toggle.md) | Toggle component for displaying native toggles. |
| [`VStack`](/versions/v57.0.0/sdk/ui/swift-ui/vstack.md) | VStack component for vertical layouts. |
| [`ZStack`](/versions/v57.0.0/sdk/ui/swift-ui/zstack.md) | ZStack component for overlapping layouts. |