Chip

A Jetpack Compose Chip component for displaying compact elements.

Android

GitHub

npm

Changelog

Bundled version:

~55.0.0

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.