Jetpack Compose

Jetpack Compose components for building native Android interfaces with @expo/ui.

Android

GitHub

npm

Changelog

Recommended version:

~0.2.0-beta.9

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.

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/ui

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

Components

Button

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

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

CircularProgress

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

<CircularProgress progress={0.5} style={{ width: 300 }} color="blue" elementColors={{ trackColor: '#cccccc' }} />

ContextMenu

Note: Also known as DropdownMenu.

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

<ContextMenu style={{ width: 150, height: 50 }}>
  <ContextMenu.Items>
    <Button
      elementColors={{ containerColor: '#0000ff', contentColor: '#00ff00' }}
      onPress={() => console.log('Pressed1')}>
      Hello
    </Button>
    <Button
      variant="bordered"
      color="#ff0000"
      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>

Chip

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

// Assist chip with icon
<Chip
  variant="assist"
  label="Book"
  leadingIcon="filled.Add"
  onPress={() => console.log('Opening flight booking...')}
/>

// Filter chip with selection
<Chip
  variant="filter"
  label="Images"
  leadingIcon="filled.Star"
  selected={selectedFilters.includes('Images')}
  onPress={() => handleFilterToggle('Images')}
/>

// Input chip with dismiss
<Chip
  variant="input"
  label="Work"
  leadingIcon="filled.Create"
  onDismiss={() => handleInputDismiss('Work')}
/>

// Suggestion chip
<Chip
  variant="suggestion"
  label="Nearby"
  leadingIcon="filled.LocationOn"
  onPress={() => console.log('Searching nearby...')}
/>

DateTimePicker (date)

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

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

DateTimePicker (time)

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

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

LinearProgress

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

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

Picker (radio)

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

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

Picker (segmented)

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

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

Slider

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

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

Switch (toggle)

Note: also known as Toggle.

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

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

Switch (checkbox)

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

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

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 Jetpack Compose package
import { Button } from '@expo/ui/jetpack-compose';