FilterChip

A Jetpack Compose FilterChip component for displaying toggleable filter options.

Android

GitHub

npm

Changelog

Bundled version:

~55.0.0

Expo UI FilterChip matches the official Jetpack Compose FilterChip API and displays a compact, toggleable element used to filter content.

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

Basic filter chip

BasicFilterChipExample.tsx

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

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

  return (
    <Host matchContents>
      <FilterChip label="Favorites" selected={selected} onPress={() => setSelected(!selected)} />
    </Host>
  );
}

With leading icon

Use the FilterChip.LeadingIcon slot component to display an icon before the label.

FilterChipWithLeadingIconExample.tsx

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

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

  return (
    <Host matchContents>
      <FilterChip label="Images" selected={selected} onPress={() => setSelected(!selected)}>
        <FilterChip.LeadingIcon>
          <Text>📷</Text>
        </FilterChip.LeadingIcon>
      </FilterChip>
    </Host>
  );
}

Disabled chip

Set the enabled prop to false to prevent user interaction.

DisabledFilterChipExample.tsx

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

export default function DisabledFilterChipExample() {
  return (
    <Host matchContents>
      <FilterChip
        label="Unavailable"
        selected={false}
        enabled={false}
        onPress={() => console.log('This will not fire')}
      />
    </Host>
  );
}

API

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

Component

`FilterChip`

Android

Type: React.Element<FilterChipProps>

A filter chip component following Material 3 design guidelines. Supports slot-based LeadingIcon and TrailingIcon children.

FilterChipProps

`children`

Android

Optional • Type: React.ReactNode

Children containing LeadingIcon and TrailingIcon slots.

`enabled`

Android

Optional • Type: boolean

Whether the chip is enabled and can be interacted with.

`label`

Android

Type: string

The text label to display on the chip.

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component.

`onPress`

Android

Optional • Type: () => void

Callback fired when the chip is clicked.

`selected`

Android

Type: boolean

Whether the chip is currently selected.