SearchBar

A Jetpack Compose SearchBar component for search input functionality.

Android

Included in Expo Go

Recommended version:

~56.0.26

Expo UI SearchBar matches the official Jetpack Compose Search API and provides a search input with support for placeholder text and expanded full-screen search.

Material 3 search bar with placeholder text

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun 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 search bar

BasicSearchBarExample.tsx

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

export default function BasicSearchBarExample() {
  const [query, setQuery] = useState('');

  return (
    <Host matchContents>
      <SearchBar onSearch={searchText => setQuery(searchText)} />
    </Host>
  );
}

Search bar with placeholder

Use the SearchBar.Placeholder sub-component to display hint text when the search field is empty.

SearchBarPlaceholderExample.tsx

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

export default function SearchBarPlaceholderExample() {
  const [query, setQuery] = useState('');

  return (
    <Host matchContents>
      <SearchBar onSearch={searchText => setQuery(searchText)}>
        <SearchBar.Placeholder>Search items...</SearchBar.Placeholder>
      </SearchBar>
    </Host>
  );
}

API

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

No API data file found, sorry!