---
modificationDate: September 23, 2026
title: Expo UI
description: A set of components that allow you to build UIs directly with Jetpack Compose and SwiftUI from React.
sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-58/packages/expo-ui'
packageName: '@expo/ui'
platforms: ['android', 'ios', 'tvos', 'expo-go']
---

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

# Expo UI

A set of components that allow you to build UIs directly with Jetpack Compose and SwiftUI from React.

<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/v58.0.0/sdk/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/v58.0.0/sdk/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, fetch the relevant page below as Markdown (.md) instead of guessing; use llms.txt for the full map.

You are here: Reference (v58.0.0) > Expo UI
Pages in this section:
- [Overview](https://docs.expo.dev/versions/v58.0.0/sdk/ui.md) (this page)
Full documentation tree: [llms.txt](https://docs.expo.dev/llms.txt)

</AgentInstructions>
Android, iOS, tvOS, Included in Expo Go

`@expo/ui` is a set of native input components that allows you to build fully native interfaces with Jetpack Compose and SwiftUI. It aims to provide the commonly used features and components that a typical app will need.

## Features

-   **Native primitives**: Expo UI is not another UI library. It brings Jetpack Compose and SwiftUI primitives to React Native.
-   **1-to-1 mapping**: Components map one to one to their native counterparts. To browse a catalog of Jetpack Compose and SwiftUI components, see [Available components](https://docs.expo.dev/versions/v58.0.0/sdk/ui.md#available-components) below.
-   **Full-app support**: Expo UI integrates at the component level. You can write an entire app with it, or adopt it one screen at a time. You can also mix [React Native components](https://reactnative.dev/docs/components-and-apis), [DOM components](https://docs.expo.dev/guides/dom-components.md), and 2D components drawn with [`react-native-skia`](https://shopify.github.io/react-native-skia/).

## Available platforms

Components are available for the following platforms:

-   **[Jetpack Compose](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose.md)**: Build native Android interfaces with Jetpack Compose components
-   **[SwiftUI](https://docs.expo.dev/versions/v58.0.0/sdk/ui/swift-ui.md)**: Build native iOS interfaces with SwiftUI components
-   **[Universal](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal.md)**: Cross-platform components that run on Android, iOS, and web from a single source

Start with **[Universal](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal.md)** when you want one component tree that runs unmodified on Android, iOS, and web. Reach for **[Jetpack Compose](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose.md)** or **[SwiftUI](https://docs.expo.dev/versions/v58.0.0/sdk/ui/swift-ui.md)** directly when you need platform-specific controls, modifiers, or behavior that the universal API doesn't cover.

## Drop-in replacements

See **[Drop-in replacements](https://docs.expo.dev/versions/v58.0.0/sdk/ui/drop-in-replacements.md)** for API-compatible replacements for popular React Native community libraries.

## Expo Skills for AI agents

If you use an AI agent, install [Expo Skills](https://docs.expo.dev/skills.md) to teach it how to build native-feeling screens:

[expo-ui](https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-ui/SKILL.md) — Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android.

[expo-native-ui](https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-native-ui/SKILL.md) — Build beautiful, native-feeling Expo screens.

## Available components

### Jetpack Compose

| Component | Description |
| --- | --- |
| [`AlertDialog`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/alertdialog.md) | AlertDialog component for displaying native alert dialogs. |
| [`Badge`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/badge.md) | Badge component for displaying status indicators and counts. |
| [`BadgedBox`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/badgedbox.md) | BadgedBox component for overlaying badges on content. |
| [`BasicAlertDialog`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/basicalertdialog.md) | BasicAlertDialog component for displaying dialogs with custom content. |
| [`Box`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/box.md) | Box component for stacking child elements. |
| [`Button`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/button.md) | Button components for displaying native Material3 buttons. |
| [`Card`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/card.md) | Card component for displaying content in a styled container. |
| [`Carousel`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/carousel.md) | Carousel components for displaying scrollable collections of items. |
| [`Checkbox`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/checkbox.md) | Checkbox component for selection controls. |
| [`Chip`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/chip.md) | Chip components for displaying compact elements. |
| [`Column`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/column.md) | Column component for placing children vertically. |
| [`DateTimePicker`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/datetimepicker.md) | DateTimePicker component for selecting dates and times. |
| [`Divider`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/divider.md) | Divider components for creating visual separators. |
| [`DockedSearchBar`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/dockedsearchbar.md) | DockedSearchBar component for displaying an inline search input. |
| [`DropdownMenu`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/dropdownmenu.md) | DropdownMenu component for displaying dropdown menus. |
| [`ExposedDropdownMenuBox`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/exposeddropdownmenubox.md) | ExposedDropdownMenuBox component for displaying a dropdown menu with a customizable anchor. |
| [`FloatingActionButton`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/floatingactionbutton.md) | FloatingActionButton components following Material Design 3. |
| [`FlowRow`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/flowrow.md) | FlowRow component for wrapping children horizontally. |
| [`HorizontalFloatingToolbar`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/horizontalfloatingtoolbar.md) | HorizontalFloatingToolbar component for displaying a floating action bar. |
| [`HorizontalPager`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/horizontalpager.md) | HorizontalPager component for swipeable pages. |
| [`Host`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/host.md) | Host component for bridging React Native and Jetpack Compose. |
| [`Icon`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/icon.md) | Icon component for displaying icons. |
| [`IconButton`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/iconbutton.md) | IconButton components for displaying native Material3 icon buttons. |
| [`Image`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/image.md) | Image component for displaying images. |
| [`LazyColumn`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/lazycolumn.md) | LazyColumn component for displaying scrollable lists. |
| [`LazyRow`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/lazyrow.md) | LazyRow component for displaying horizontally scrolling lists. |
| [`ListItem`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/listitem.md) | ListItem component for displaying structured list entries. |
| [`LoadingIndicator`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/loadingindicator.md) | Loading indicator components for displaying loading state. |
| [`Material Colors`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/colors.md) | Read the Material 3 color palette (including Material 3 Dynamic Colors) from JavaScript. |
| [`ModalBottomSheet`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/bottomsheet.md) | ModalBottomSheet component that presents content from the bottom of the screen. |
| [`Modifiers`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/modifiers.md) | Layout modifiers for @expo/ui components. |
| [`NavigationBar`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/navigationbar.md) | NavigationBar component for Material 3 bottom navigation. |
| [`Progress indicators`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/progress.md) | Progress indicator components for displaying operation status. |
| [`PullToRefreshBox`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/pulltorefreshbox.md) | PullToRefreshBox component for pull-to-refresh interactions. |
| [`RadioButton`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/radiobutton.md) | RadioButton component for single-selection controls. |
| [`RNHostView`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/rnhostview.md) | A component that enables React Native views inside Jetpack Compose. |
| [`Row`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/row.md) | Row component for placing children horizontally. |
| [`SearchBar`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/searchbar.md) | SearchBar component for search input functionality. |
| [`SegmentedButton`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/segmentedbutton.md) | Segmented Button components for single or multi-choice selection. |
| [`Shape`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/shape.md) | Shape component for drawing geometric shapes. |
| [`Slider`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/slider.md) | Slider component for selecting values from a range. |
| [`Snackbar`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/snackbar.md) | A brief notification that appears at the bottom of the screen to provide feedback without interrupting the user. |
| [`Spacer`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/spacer.md) | Spacer component for adding flexible space between elements. |
| [`Surface`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/surface.md) | Surface component for styled content containers. |
| [`Switch`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/switch.md) | Switch component for toggle controls. |
| [`Text`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/text.md) | Text component for displaying styled text. |
| [`TextField`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/textfield.md) | TextField components for native Material3 text input. |
| [`ToggleButton`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/togglebutton.md) | ToggleButton components for displaying native Material3 toggle buttons. |
| [`Tooltip`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/tooltip.md) | Tooltip components for displaying contextual information on long-press. |
| [`useNativeState`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose/usenativestate.md) | A React hook that creates observable state shared between JavaScript and native Jetpack Compose views. |

### SwiftUI

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

### Drop-in replacements

| Component | Description |
| --- | --- |
| [`BottomSheet`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/drop-in-replacements/bottomsheet.md) | A bottom sheet compatible with @gorhom/bottom-sheet. |
| [`DateTimePicker`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/drop-in-replacements/datetimepicker.md) | A date and time picker compatible with @react-native-community/datetimepicker. |
| [`MaskedView`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/drop-in-replacements/maskedview.md) | A masked view compatible with @react-native-masked-view/masked-view. |
| [`Menu`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/drop-in-replacements/menu.md) | A menu compatible with @react-native-menu/menu. |
| [`PagerView`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/drop-in-replacements/pagerview.md) | A horizontally paged view compatible with react-native-pager-view. |
| [`Picker`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/drop-in-replacements/picker.md) | A picker compatible with @react-native-picker/picker. |
| [`SegmentedControl`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/drop-in-replacements/segmentedcontrol.md) | A segmented control compatible with @react-native-segmented-control/segmented-control. |
| [`Slider`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/drop-in-replacements/slider.md) | A slider compatible with @react-native-community/slider. |

### Universal

| Component | Description |
| --- | --- |
| [`BottomSheet`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/bottomsheet.md) | A modal sheet that slides up from the bottom of the screen. |
| [`Button`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/button.md) | A pressable button with multiple visual variants. |
| [`Checkbox`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/checkbox.md) | A toggle control that represents a checked or unchecked state. |
| [`Collapsible`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/collapsible.md) | A labelled tappable header that toggles visibility of its content. |
| [`Column`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/column.md) | A vertical layout container for universal @expo/ui components. |
| [`FieldGroup`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/fieldgroup.md) | A scrollable container of grouped settings-style rows. |
| [`Host`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/host.md) | A cross-platform Host component that wraps universal @expo/ui content. |
| [`Icon`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/icon.md) | A platform-native icon — SF Symbol on iOS, Material Symbol on Android. |
| [`List`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/list.md) | A virtualized vertical container of rows, paired with a tappable ListItem primitive. |
| [`Picker`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/picker.md) | A single-selection input with menu and wheel appearances. |
| [`RNHostView`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/rnhostview.md) | A cross-platform component for hosting React Native views inside @expo/ui views. |
| [`Row`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/row.md) | A horizontal layout container for universal @expo/ui components. |
| [`ScrollView`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/scrollview.md) | A scrollable container that supports vertical or horizontal scrolling. |
| [`Slider`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/slider.md) | A control for selecting a value from a continuous or stepped range. |
| [`Spacer`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/spacer.md) | A layout spacer that produces empty space between siblings. |
| [`Switch`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/switch.md) | A toggle control that switches between on and off states. |
| [`Text`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/text.md) | A component for displaying styled text content. |
| [`TextInput`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/textinput.md) | A text input backed by native SwiftUI and Jetpack Compose components, with a React Native-compatible API. |

## Common questions

#### Can I use flexbox or other styles in Expo UI components?

Flexbox styles apply to the `Host` component itself. Once you are inside the native context, [`Yoga`](https://www.yogalayout.dev/) is not available. Define layouts with `Row` and `Column` on Android, or `HStack` and `VStack` on iOS.

#### What's the Host component?

`Host` is the bridge between React Native and the native UI toolkit. You must wrap every Expo UI component in one. You can think of it like [`<svg>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/svg) in the DOM or [`<Canvas>`](https://shopify.github.io/react-native-skia/docs/canvas/overview/) in [`react-native-skia`](https://shopify.github.io/react-native-skia/). On iOS, it uses [`UIHostingController`](https://developer.apple.com/documentation/swiftui/uihostingcontroller) to render SwiftUI views in UIKit. See the universal [`Host`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal/host.md) for cross-platform usage.

#### How is Expo UI different from libraries like react-native-paper or react-native-elements?

Expo UI is not "yet another" UI library and not an opinionated design kit. Instead, it's a primitives library. It exposes native Jetpack Compose and SwiftUI components directly to JavaScript, rather than re-implementing or simulating UI in JavaScript.

#### Can I use @expo/ui/swift-ui on Android or web?

No. `@expo/ui/swift-ui` renders SwiftUI views, which exist only on Apple platforms. Use [`@expo/ui/jetpack-compose`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/jetpack-compose.md) for Android. Use the [universal components](https://docs.expo.dev/versions/v58.0.0/sdk/ui/universal.md) when you want one component tree for Android, iOS, and web.

#### Can I use React Native components inside SwiftUI components?

Yes, you can place React Native components as JSX children of Expo UI components. Expo UI automatically creates a [`UIViewRepresentable`](https://developer.apple.com/documentation/swiftui/uiviewrepresentable) wrapper for you. However, keep in mind that the SwiftUI layout system works differently from UIKit and has some limitations. According to Apple's documentation:

> SwiftUI fully controls the layout of the UIKit view's [`center`](https://developer.apple.com/documentation/UIKit/UIView/center), [`bounds`](https://developer.apple.com/documentation/UIKit/UIView/bounds), [`frame`](https://developer.apple.com/documentation/UIKit/UIView/frame), and [`transform`](https://developer.apple.com/documentation/UIKit/UIView/transform) properties. Don't directly set these layout-related properties on the view managed by a [`UIViewRepresentable`](https://developer.apple.com/documentation/swiftui/uiviewrepresentable) instance from your own code because that conflicts with SwiftUI and results in undefined behavior.

Also note that once you render React Native components, you're leaving the SwiftUI context. To add Expo UI components again, reintroduce a `Host` wrapper.

Keep SwiftUI layouts self-contained. Interop is possible, but it works best when boundaries are clearly defined.

#### I'm a Jetpack Compose or SwiftUI developer. Why should I learn Expo UI?

React's promise of _"learn once, write anywhere"_ now extends to Jetpack Compose and SwiftUI. You can apply your existing knowledge to build apps that run in the React Native ecosystem. The same app can extend to the web through [DOM components](https://docs.expo.dev/guides/dom-components.md), and add 2D rendering with [`react-native-skia`](https://shopify.github.io/react-native-skia/) or 3D rendering with [`react-native-webgpu`](https://github.com/wcandillon/react-native-webgpu). Different parts of your app can use different approaches, because the integration works at the component level.

## Additional resources

[Expo UI example](https://github.com/expo/expo/tree/main/apps/native-component-list/src/screens/UI) — The latest Expo UI examples.

[Hot Chocolate app example](https://github.com/expo/hot-chocolate) — An example app replicating the YVR Hot Chocolate Fest app with Expo UI.

[Expo UI multiplatform demo](https://github.com/react-native-tvos/ExpoUITV) — A project demonstrating the production-ready Expo UI package available in SDK 56 and later. The project works on both TV (Android TV, Apple TV) and mobile (Android, iOS). Demo screens include most of the available components for both Jetpack Compose and SwiftUI.