Get started
Expo UI
A set of components that allow you to build UIs directly with Jetpack Compose and SwiftUI from React.
@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.
Available platforms
Components are available for the following platforms:
- Jetpack Compose: Build native Android interfaces with Jetpack Compose components
- SwiftUI: Build native iOS interfaces with SwiftUI components
- Universal: Cross-platform components that run on Android, iOS, and web from a single source
Drop-in replacements
See Drop-in replacements for API-compatible replacements for popular React Native community libraries.
Available components
SwiftUI
| Component | Description |
|---|---|
AccessoryWidgetBackground | Adaptive background view that provides a standard appearance based on the widget's environment. |
Alert | Alert component for presenting native iOS alert dialogs. |
BottomSheet | BottomSheet component that presents content from the bottom of the screen. |
Button | Button component for displaying native buttons. |
ColorPicker | ColorPicker component for selecting colors. |
ConfirmationDialog | ConfirmationDialog component for presenting confirmation prompts. |
ContextMenu | ContextMenu component for displaying context menus. |
ControlGroup | ControlGroup component for grouping interactive controls. |
DatePicker | DatePicker component for selecting dates and times. |
DisclosureGroup | DisclosureGroup component for displaying expandable content. |
Divider | Divider component for creating visual separators. |
Form | Form component for collecting user input in a structured layout. |
Gauge | Gauge component for displaying progress with visual indicators. |
Group | Group component for grouping views without affecting layout. |
Host | Host component that enables SwiftUI components in React Native. |
HStack | HStack component for horizontal layouts. |
Image | Image component for displaying SF Symbols. |
Label | Label component for displaying text with an icon. |
LazyHStack | LazyHStack component for lazy horizontal layouts. |
LazyVStack | LazyVStack component for lazy vertical layouts. |
Link | Link component for displaying clickable links. |
List | List component for displaying scrollable lists of items. |
Menu | Menu component for displaying dropdown menus. |
Modifiers | View modifiers for customizing component appearance and behavior. |
Namespace | A Namespace component that allows you create Namespaces in SwiftUI |
Overlay | Overlay component for layering content on top of another view. |
Picker | Picker component for selecting options from a list. |
Popover | Popover component for displaying content in a floating overlay. |
ProgressView | ProgressView component for displaying progress indicators. |
RNHostView | A component that enables React Native views inside SwiftUI. |
ScrollView | ScrollView component for scrollable content. |
Section | Section component for grouping content within lists and forms. |
SecureField | SecureField component for password input. |
Slider | Slider component for selecting values from a range. |
Spacer | Spacer component for flexible spacing. |
SwipeActions | SwipeActions component for adding leading and trailing swipe actions to row content. |
TabView | TabView component for paged or tabbed content. |
Text | Text component for displaying styled text with support for nested texts. |
TextField | TextField component for text input. |
Toggle | Toggle component for displaying native toggles. |
useNativeState | A React hook that creates observable state shared between JavaScript and native SwiftUI views. |
VStack | VStack component for vertical layouts. |
ZStack | ZStack component for overlapping layouts. |
Drop-in replacements
| Component | Description |
|---|---|
BottomSheet | A bottom sheet compatible with @gorhom/bottom-sheet. |
DateTimePicker | A date and time picker compatible with @react-native-community/datetimepicker. |
MaskedView | A masked view compatible with @react-native-masked-view/masked-view. |
Menu | A menu compatible with @react-native-menu/menu. |
PagerView | A horizontally paged view compatible with react-native-pager-view. |
Picker | A picker compatible with @react-native-picker/picker. |
SegmentedControl | A segmented control compatible with @react-native-segmented-control/segmented-control. |
Slider | A slider compatible with @react-native-community/slider. |
Universal
| Component | Description |
|---|---|
BottomSheet | A modal sheet that slides up from the bottom of the screen. |
Button | A pressable button with multiple visual variants. |
Checkbox | A toggle control that represents a checked or unchecked state. |
Collapsible | A labelled tappable header that toggles visibility of its content. |
Column | A vertical layout container for universal @expo/ui components. |
FieldGroup | A scrollable container of grouped settings-style rows. |
Host | A cross-platform Host component that wraps universal @expo/ui content. |
Icon | A platform-native icon — SF Symbol on iOS, Material Symbol on Android. |
List | A virtualized vertical container of rows, paired with a tappable ListItem primitive. |
Picker | A single-selection input with menu and wheel appearances. |
RNHostView | A cross-platform component for hosting React Native views inside @expo/ui views. |
Row | A horizontal layout container for universal @expo/ui components. |
ScrollView | A scrollable container that supports vertical or horizontal scrolling. |
Slider | A control for selecting a value from a continuous or stepped range. |
Spacer | A layout spacer that produces empty space between siblings. |
Switch | A toggle control that switches between on and off states. |
Text | A component for displaying styled text content. |
TextInput | A text input backed by native SwiftUI and Jetpack Compose components, with a React Native-compatible API. |
Sources
The original Expo docs for this page:
- Expo UI (
source-of-truth/versions/v57.0.0/sdk/ui.md)