This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 57).
Jetpack Compose
Jetpack Compose components for building native Android interfaces with @expo/ui.
Android
Included in Expo Go
The Jetpack Compose components in @expo/ui/jetpack-compose allow you to build fully native Android interfaces using Jetpack Compose from React Native.
Installation
Terminal
- npx expo install @expo/uiIf you are installing this in an existing React Native app, make sure to install expo in your project.
Usage
Using a component from @expo/ui/jetpack-compose requires wrapping it in a Host component. The Host is a container for Jetpack Compose views.
import { Host, Button } from '@expo/ui/jetpack-compose'; export function SaveButton() { return ( <Host matchContents> <Button onClick={() => alert('Saved!')}>Save changes</Button> </Host> ); }
Available components
| Component | Description |
|---|---|
AlertDialog | AlertDialog component for displaying native alert dialogs. |
Badge | Badge component for displaying status indicators and counts. |
BadgedBox | BadgedBox component for overlaying badges on content. |
BasicAlertDialog | BasicAlertDialog component for displaying dialogs with custom content. |
Box | Box component for stacking child elements. |
Button | Button components for displaying native Material3 buttons. |
Card | Card component for displaying content in a styled container. |
Carousel | Carousel components for displaying scrollable collections of items. |
Checkbox | Checkbox component for selection controls. |
Chip | Chip components for displaying compact elements. |
Column | Column component for placing children vertically. |
DateTimePicker | DateTimePicker component for selecting dates and times. |
Divider | Divider components for creating visual separators. |
DockedSearchBar | DockedSearchBar component for displaying an inline search input. |
DropdownMenu | DropdownMenu component for displaying dropdown menus. |
ExposedDropdownMenuBox | ExposedDropdownMenuBox component for displaying a dropdown menu with a customizable anchor. |
FloatingActionButton | FloatingActionButton components following Material Design 3. |
FlowRow | FlowRow component for wrapping children horizontally. |
HorizontalFloatingToolbar | HorizontalFloatingToolbar component for displaying a floating action bar. |
HorizontalPager | HorizontalPager component for swipeable pages. |
Host | Host component for bridging React Native and Jetpack Compose. |
Icon | Icon component for displaying icons. |
IconButton | IconButton components for displaying native Material3 icon buttons. |
LazyColumn | LazyColumn component for displaying scrollable lists. |
LazyRow | LazyRow component for displaying horizontally scrolling lists. |
ListItem | ListItem component for displaying structured list entries. |
LoadingIndicator | Loading indicator components for displaying loading state. |
ModalBottomSheet | ModalBottomSheet component that presents content from the bottom of the screen. |
NavigationBar | NavigationBar component for Material 3 bottom navigation. |
Progress Indicators | Progress indicator components for displaying operation status. |
PullToRefreshBox | PullToRefreshBox component for pull-to-refresh interactions. |
RadioButton | RadioButton component for single-selection controls. |
RNHostView | A component that enables React Native views inside Jetpack Compose. |
Row | Row component for placing children horizontally. |
SearchBar | SearchBar component for search input functionality. |
SegmentedButton | Segmented Button components for single or multi-choice selection. |
Shape | Shape component for drawing geometric shapes. |
Slider | Slider component for selecting values from a range. |
Snackbar | A brief notification that appears at the bottom of the screen to provide feedback without interrupting the user. |
Spacer | Spacer component for adding flexible space between elements. |
Surface | Surface component for styled content containers. |
Switch | Switch component for toggle controls. |
Text | Text component for displaying styled text. |
TextField | TextField components for native Material3 text input. |
ToggleButton | ToggleButton components for displaying native Material3 toggle buttons. |
Tooltip | Tooltip components for displaying contextual information on long-press. |