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

GitHub

npm

Changelog

Expo UI Chip matches the official Jetpack Compose Chip API and supports assist, filter, input, and suggestion chip variants.

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

Assist chip

AssistChipExample.tsx

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

export default function AssistChipExample() {
  return (
    <Host matchContents>
      <Chip
        variant="assist"
        label="Book Flight"
        onPress={() => console.log('Opening flight booking...')}
      />
    </Host>
  );
}

Filter chip

FilterChipExample.tsx

import { useState } from 'react';
import { Host, Chip } from '@expo/ui/jetpack-compose';

export default function FilterChipExample() {
  const [selected, setSelected] = useState(false);

  return (
    <Host matchContents>
      <Chip
        variant="filter"
        label="Images"
        selected={selected}
        onPress={() => setSelected(!selected)}
      />
    </Host>
  );
}

Input chip

InputChipExample.tsx

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

export default function InputChipExample() {
  return (
    <Host matchContents>
      <Chip variant="input" label="Work" onDismiss={() => console.log('Dismissed Work chip')} />
    </Host>
  );
}

Suggestion chip

SuggestionChipExample.tsx

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

export default function SuggestionChipExample() {
  return (
    <Host matchContents>
      <Chip
        variant="suggestion"
        label="Nearby"
        onPress={() => console.log('Searching nearby...')}
      />
    </Host>
  );
}

API

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

Component

`Chip`

Android

Type: React.Element<ChipProps>

Displays a native chip component.

ChipProps

`enabled`

Android

Optional • Type: boolean

Whether the chip is enabled and can be clicked. Used for assist, filter and input chips.

`iconSize`

Android

Optional • Type: number

Size of the icon in density-independent pixels (dp). Defaults to 18.

`label`

Android

Type: string

The text label to display on the chip

`leadingIcon`

Android

Optional • Type: string

Optional leading icon name (using Material Icons). Used for assist, filter, input (avatar icon), and suggestion chips.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onDismiss`

Android

Optional • Type: () => void

Callback fired when the chip is dismissed. Only used for input chips.

`onPress`

Android

Optional • Type: () => void

Callback fired when the chip is clicked. Used for assist and filter chips.

`selected`

Android

Optional • Type: boolean

Whether the chip is selected. Used only for filter chips.

`textStyle`

Android

Optional • Type: ChipTextStyle

Text style variant for the chip label. Defaults to labelSmall.

`trailingIcon`

Android

Optional • Type: string

Optional trailing icon name (using Material Icons). Used for assist, filter, and input chips. For input chips, defaults to filled.Close if not specified.

`variant`

Android

Optional • Literal type: string

The variant of the chip.

Acceptable values are: 'filter' | 'assist' | 'input' | 'suggestion'

Types

`ChipTextStyle`

Android

Literal Type: string

Available text style variants for chip labels.