Expo UI

GitHub

Changelog

npm

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

Android

iOS

Bundled version:

~0.1.1-alpha.10

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