# SearchBar (React Native)

> A rounded search field with a clear button, an optional iOS-style Cancel, and a debounced onSearch.

GramproKit for React Native · Mobile · Beta · Source: https://kit.gramproindia.com/native/docs/search-bar

> **Beta:** React Native support is in beta. APIs may change or break between prereleases (npm tag `native`).

_Interactive demo:_ [open the live example](https://kit.gramproindia.com/native/docs/search-bar). The example's source:

```tsx
import { useState } from "react";
import { Text } from "react-native";
import { useKitTheme } from "@/component-lib/shared/native";
import { List, ListItem } from "@/component-lib/list-item";
import { SearchBar } from "@/component-lib/search-bar";
import { Section } from "./layout"; // Section and Row: page layout for the demo

const CITIES = ["Kochi", "Kozhikode", "Kollam", "Kannur", "Thiruvananthapuram", "Thrissur", "Palakkad", "Bengaluru", "Chennai", "Mumbai"];

export function SearchBarDemo() {
  const { tokens } = useKitTheme();
  const [query, setQuery] = useState("");
  const [loading, setLoading] = useState(false);
  const [submitted, setSubmitted] = useState("");
  const results = query ? CITIES.filter((c) => c.toLowerCase().includes(query.toLowerCase())) : [];
  return (
    <>
      <Section title="SearchBar · debounced, with Cancel">
        <SearchBar
          showCancel
          loading={loading}
          onValueChange={() => setLoading(true)}
          onSearch={(q) => {
            setQuery(q);
            setLoading(false);
          }}
          onSubmit={setSubmitted}
          localeText={{ placeholder: "Search cities" }}
        />
        <Text style={{ color: tokens.muted, fontSize: tokens.fontSize - 2 }}>
          {query ? `${results.length} result(s) for “${query}”` : "Results appear 250 ms after you stop typing."}
          {submitted ? ` · submitted “${submitted}”` : ""}
        </Text>
        {results.length > 0 && (
          <List variant="inset">
            {results.map((city) => (
              <ListItem key={city} title={city} />
            ))}
          </List>
        )}
      </Section>
      <Section title="SearchBar · plain and disabled">
        <SearchBar defaultValue="GST invoices" />
        <SearchBar disabled />
      </Section>
    </>
  );
}
```

## Install

```bash
npx @grampro/kit@native add SearchBar
```

## Usage

```tsx
import { SearchBar } from "@/component-lib/search-bar";

<SearchBar showCancel loading={pending} onSearch={(query) => setQuery(query)} />
```

## Props

### SearchBarProps

| Prop | Type | Description |
|---|---|---|
| `value` | `string` |   |
| `defaultValue` | `string` |   |
| `onValueChange` | `(value: string) => void` | Every keystroke. |
| `onSubmit` | `(value: string) => void` | The keyboard's search key. |
| `onSearch` | `(value: string) => void` | Debounced by `debounce` ms; also called with "" when cleared. |
| `debounce` | `number` | Delay for `onSearch`, in ms. Default 250. |
| `showCancel` | `boolean` | Show a Cancel text button while focused (iOS style). Cancel clears the text and dismisses the keyboard. Default false. |
| `onCancel` | `() => void` |   |
| `loading` | `boolean` | Spinner in place of the clear button, e.g. while results load. |
| `autoFocus` | `boolean` |   |
| `disabled` | `boolean` |   |
| `placeholder` | `string` | Overrides the locale placeholder. |
| `localeText` | `Partial<SearchBarLocaleText>` |   |
| `style` | `StyleProp<ViewStyle>` |   |
| `styles` | `Partial<{ field: StyleProp<ViewStyle>; input: StyleProp<TextStyle>; cancel: StyleProp<T…` |   |

## Notes

- `onSearch` is debounced (250ms by default) and called with `""` when cleared.
- Mobile only: there is no web version of this component.