Component

SearchBar

Theme-aware search input built on TextInput with search and clear actions.

React Native

Search bar

Theme-aware search with icons and clear action.

import { useState } from 'react';
import { SearchBar, Text } from '@sohantalukder/rn-kit';

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

  return (
    <>
      <SearchBar
        placeholder="Search customers"
        value={query}
        onSearch={setQuery}
        onSubmitSearch={(value) => setQuery(value)}
        onClear={() => setQuery('')}
      />
      <Text color="secondary">Searching for: {query || 'All customers'}</Text>
    </>
  );
}

Live component

defaultcontrolledclearabledisabled

Use for filtering lists and local search.
Keep placeholder text tied to the searched content.

Usage

import { SearchBar } from '@sohantalukder/rn-kit';

import { useState } from 'react';
import { SearchBar, Text } from '@sohantalukder/rn-kit';

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

  return (
    <>
      <SearchBar
        placeholder="Search customers"
        value={query}
        onSearch={setQuery}
        onSubmitSearch={(value) => setQuery(value)}
        onClear={() => setQuery('')}
      />
      <Text color="secondary">Searching for: {query || 'All customers'}</Text>
    </>
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

placeholderstring-Hint text shown before a value is entered or selected.

animatedLabelbooleancomponent defaultFloats the label inside the field when focused or filled.

valuestring | number | boolean-Controlled value rendered by the input or control.

onSearchunknown-Configures on search for SearchBar.

onSubmitSearchunknown-Configures on submit search for SearchBar.

clearableunknown-Configures clearable for SearchBar.

disabledbooleanfalsePrevents interaction and renders the disabled visual state.

Theme

SearchBar reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

default
controlled
clearable
disabled

Best Practices

Use for filtering lists and local search.
Keep placeholder text tied to the searched content.