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 isOpen={isOpen} onIsOpenedChange={e => setIsOpened(e)}>
  <Text>Hello, world!</Text>
</BottomSheet>

Button

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

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

ColorPicker component

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

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

DateTimePicker

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

<DateTimePicker
  onDateSelected={date => {
    setSelectedDate(date);
  }}
  displayedComponents='date'
  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="circular"
/>

LinearProgress

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

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

Picker (segmented)

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

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

Picker (wheel)

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

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

Switch

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

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

Switch component (checkbox)

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

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

TextInput component

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

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

Jetpack Compose examples

Button

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

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

DateTimePicker

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

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

Picker

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

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

TextInput

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

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

API

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

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

// Import from the Jetpack Compose package
import { Button } from '@expo/ui/jetpack-compose';