This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 53).

Expo UI

GitHub

npm

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

Android

iOS

This library is currently in alpha and will frequently experience breaking changes. It is not available in the Expo Go app – use development builds to try it out.

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

Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Swift UI examples

BottomSheet

import { BottomSheet } from '@expo/ui/swift-ui';

<BottomSheet isOpened={isOpened} onIsOpenedChange={e => setIsOpened(e)}>
  <Text>Hello, world!</Text>
</BottomSheet>

Button

import { Button } from '@expo/ui/swift-ui';

<Button
  style={{ flex: 1 }}
  variant="default"
  onPress={() => {
    setEditingProfile(true);
  }}>
  Edit profile
</Button>

CircularProgress

import { CircularProgress } from '@expo/ui/swift-ui';

<CircularProgress progress={0.5} style={{ width: 300 }} color="blue" />

ColorPicker

import { ColorPicker } from '@expo/ui/swift-ui';

<ColorPicker
  label="Select a color"
  selection={color}
  onValueChanged={setColor}
  style={{ width: 400, height: 200 }}
/>

ContextMenu

Note: Also known as DropdownMenu.

import { ContextMenu } from '@expo/ui/swift-ui';

<ContextMenu style={{ width: 150, height: 50 }}>
  <ContextMenu.Items>
    <Button
      systemImage="person.crop.circle.badge.xmark"
      onPress={() => console.log('Pressed1')}>
      Hello
    </Button>
    <Button
      variant="bordered"
      systemImage="heart"
      onPress={() => console.log('Pressed2')}>
      Love it
    </Button>
    <Picker
      label="Doggos"
      options={['very', 'veery', 'veeery', 'much']}
      variant="menu"
      selectedIndex={selectedIndex}
      onOptionSelected={({ nativeEvent: { index } }) => setSelectedIndex(index)}
    />
  </ContextMenu.Items>
  <ContextMenu.Trigger>
    <Button variant="bordered" style={{ width: 150, height: 50 }}>
      Show Menu
    </Button>
  </ContextMenu.Trigger>
</ContextMenu>

DateTimePicker (date)

import { DateTimePicker } from '@expo/ui/swift-ui';

<DateTimePicker
  onDateSelected={date => {
    setSelectedDate(date);
  }}
  displayedComponents='date'
  initialDate={selectedDate.toISOString()}
  variant='wheel'
/>

DateTimePicker (time)

import { DateTimePicker } from '@expo/ui/swift-ui';

<DateTimePicker
  onDateSelected={date => {
    setSelectedDate(date);
  }}
  displayedComponents='hourAndMinute'
  initialDate={selectedDate.toISOString()}
  variant='wheel'
/>

Gauge

import { Gauge } from "@expo/ui/swift-ui";

<Gauge
  max={{ value: 1, label: '1' }}
  min={{ value: 0, label: '0' }}
  current={{ value: 0.5 }}
  color={[
    PlatformColor('systemRed'),
    PlatformColor('systemOrange'),
    PlatformColor('systemYellow'),
    PlatformColor('systemGreen'),
  ]}
  type="circularCapacity"
/>

LinearProgress

import { LinearProgress } from '@expo/ui/swift-ui';

<LinearProgress progress={0.5} style={{ width: 300 }} color="red" />

List

import { List } from '@expo/ui/swift-ui';

<List
  scrollEnabled={false}
  editModeEnabled={editModeEnabled}
  onSelectionChange={(items) => alert(`indexes of selected items: ${items.join(', ')}`)}
  moveEnabled={moveEnabled}
  onMoveItem={(from, to) => alert(`moved item at index ${from} to index ${to}`)}
  onDeleteItem={(item) => alert(`deleted item at index: ${item}`)}
  style={{ flex: 1 }}
  listStyle='automatic'
  deleteEnabled={deleteEnabled}
  selectEnabled={selectEnabled}>
  {data.map((item, index) => (
    <LabelPrimitive key={index} title={item.text} systemImage={item.systemImage} color={color} />
  ))}
</List>

Picker (segmented)

import { Picker } from '@expo/ui/swift-ui';

<Picker
  options={['$', '$$', '$$$', '$$$$']}
  selectedIndex={selectedIndex}
  onOptionSelected={({ nativeEvent: { index } }) => {
    setSelectedIndex(index);
  }}
  variant="segmented"
/>

Picker (wheel)

import { Picker } from '@expo/ui/swift-ui';

<Picker
  options={['$', '$$', '$$$', '$$$$']}
  selectedIndex={selectedIndex}
  onOptionSelected={({ nativeEvent: { index } }) => {
    setSelectedIndex(index);
  }}
  variant="wheel"
  style={{
    height: 100,
  }}
/>

Slider

import { Slider } from '@expo/ui/swift-ui';

<Slider
  style={{ minHeight: 60 }}
  value={value}
  onValueChange={(value) => {
    setValue(value);
  }}
/>

Switch (toggle)

Note: Also known as Toggle.

import { Switch } from '@expo/ui/swift-ui';

<Switch
  checked={checked}
  onValueChange={checked => {
    setChecked(checked);
  }}
  color="#ff0000"
  label="Play music"
  variant="switch"
/>

Switch (checkbox)

import { Switch } from '@expo/ui/swift-ui';

<Switch
  checked={checked}
  onValueChange={checked => {
    setChecked(checked);
  }}
  label="Play music"
  variant="checkbox"
/>

TextInput

import { TextInput } from '@expo/ui/swift-ui';

<TextInput autocorrection={false} defaultValue="A single line text input" onChangeText={setValue} />

Jetpack Compose examples