Component

Search Bar

A search field that grows from an icon button to full width.

Preview

How to use AI prompt

How to use

Minimal, copy-pasteable code.

Header.tsx

import { useState } from "react";
import { SearchBar } from "react-native-foonto";

export function Header() {
  const [query, setQuery] = useState("");

  return (
    <SearchBar
      value={query}
      onChangeText={setQuery}
      placeholder="Search…"
      onSubmit={(q) => console.log(q)}
    />
  );
}

Props

Prop	Type	Default	Description
`value`req	`string`	—	Controlled query text.
`onChangeText`req	`(text: string) => void`	—	Called as the query changes.
`placeholder`	`string`	—	Placeholder shown when expanded.
`onSubmit`	`(text: string) => void`	—	Called when the user submits.
`collapsedSize`	`number`	48	Diameter of the collapsed icon button.
`duration`	`number`	280	Expand/collapse duration in ms.
`tint`	`string`	'#6d28d9'	Accent color for the icon + caret.
`background`	`string`	'#f4f4f5'	Background of the bar.
`textColor`	`string`	'#18181b'	Input text color.
`placeholderColor`	`string`	'#a1a1aa'	Placeholder text color.
`clearOnCollapse`	`boolean`	true	Clear the query when collapsing.
`renderIcon`	`(color) => ReactNode`	—	Custom leading icon (e.g. a Tabler icon).
`renderClearIcon`	`() => ReactNode`	—	Custom clear icon.
`style`	`FoontoStyle`	—	Style for the wrapper.

AI prompt

Install the library, then paste this into your AI coding agent to wire it up.

AI prompt

Add an expanding search bar using the `react-native-foonto` library.

1. Make sure `react-native-foonto` and `react-native-reanimated` are installed.
2. Import `SearchBar` from `react-native-foonto`.
3. Keep the query in `useState` and pass `value` + `onChangeText`.
4. Filter your list from the query and handle `onSubmit` for the keyboard's search key.
5. To match your icon set, pass `renderIcon` / `renderClearIcon` (e.g. Tabler or your own SVGs).