---
modificationDate: October 27, 2025
title: SwiftUI
description: SwiftUI components for building native iOS interfaces with @expo/ui.
sourceCodeUrl: 'https://github.com/expo/expo/tree/main/packages/expo-ui'
packageName: '@expo/ui'
platforms: ['ios', 'tvos']
isBeta: true
---

<AgentInstructions>

## Submitting Feedback

If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved:

curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/versions/v54.0.0/sdk/ui/swift-ui/","feedback":"🤖 Agent feedback: <specific, actionable description>"}'

Only submit when you have something specific and actionable to report.

</AgentInstructions>

# SwiftUI

SwiftUI components for building native iOS interfaces with @expo/ui.
iOS, tvOS

> For the complete documentation index, see [llms.txt](/llms.txt). Use this file to discover all available pages.

> **This library is currently in beta and subject to breaking changes.** It is not available in the Expo Go app — use [development builds](/develop/development-builds/introduction) to try it out.

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

## Installation

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

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

## Usage

Using a component from `@expo/ui/swift-ui` requires wrapping it in a [`Host`](/versions/v54.0.0/sdk/ui/swift-ui#host) 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 variant="default">Save changes</Button>
    </Host>
  );
}
```

For an in-depth explanation of how `Host` works, see the following resources:

[Expo UI guide for Swift UI](/guides/expo-ui-swift-ui) — Learn about the basics of @expo/ui/swift-ui — @expo/ui/swift-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.

## Components

### BottomSheet

### Button

> The borderless variant is not available on Apple TV.

### CircularProgress

### ColorPicker

> This component is not available on Apple TV.

### ContextMenu

> **Note:** Also known as **DropdownMenu**.

### DateTimePicker (date)

> This component is not available on Apple TV.

### DateTimePicker (time)

> This component is not available on Apple TV.

### Gauge

> This component is not available on Apple TV.

### Host

A component that allows you to put the other `@expo/ui/swift-ui` components in React Native. It acts like [`<svg>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/svg) for DOM, [`<Canvas>`](https://shopify.github.io/react-native-skia/docs/canvas/overview/) for [`react-native-skia`](https://shopify.github.io/react-native-skia/), which underlying uses [`UIHostingController`](https://developer.apple.com/documentation/swiftui/uihostingcontroller) to render the SwiftUI views in UIKit.

Since the `Host` component is a React Native [`View`](https://reactnative.dev/docs/view), you can pass the [`style`](https://reactnative.dev/docs/style) prop to it or `matchContents` prop to make the `Host` component match the contents' size.

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

function Example() {
  return (
    <Host matchContents>
      <Button
        onPress={() => {
          console.log('Pressed');
        }}>
        Click
      </Button>
    </Host>
  );
}
```

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

function Example() {
  return (
    <Host style={{ flex: 1 }}>
      <VStack spacing={8}>
        <Text>Hello, world!</Text>
        <Button
          onPress={() => {
            console.log('Pressed');
          }}>
          Click
        </Button>
      </VStack>
    </Host>
  );
}
```

### LinearProgress

### List

### Picker (segmented)

### Picker (wheel)

> The wheel variant is not available on Apple TV.

### Slider

> This component is not available on Apple TV.

### Switch (toggle)

> **Note:** Also known as **Toggle**.

### Switch (checkbox)

### TextField

### More

Expo UI is still in active development. We continue to add more functionality and may change the API. Some examples in the docs may not be up to date. If you want to see the latest changes, check the [examples](https://github.com/expo/expo/tree/main/apps/native-component-list/src/screens/UI).

## API

Full documentation is not yet available. Use TypeScript types to explore the API.

```ts
// Import from the SwiftUI package
import { BottomSheet } from '@expo/ui/swift-ui';
```