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

Chip

A Jetpack Compose Chip component for displaying compact elements.

Android

A chip component for displaying compact elements that represent inputs, attributes, or actions.

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.

Usage

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...')}
/>

See official Jetpack Compose documentation for more information.

API

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

No API data file found, sorry!