@umituz/react-native-search

Universal search functionality for React Native with debounced search, history persistence, and suggestions.

Installation

npm install @umituz/react-native-search

Peer Dependencies

• react >= 18.2.0
• react-native >= 0.74.0
• @react-native-async-storage/async-storage >= 1.23.0
• @umituz/react-native-design-system *

Features

• ✅ Debounced search (300ms default)
• ✅ Search history with AsyncStorage persistence (max 10 items)
• ✅ Search suggestions with filtering
• ✅ Theme-aware UI components
• ✅ Zero platform-specific code (iOS/Android/Web universal)

Usage

Basic Search

import { useSearch, SearchBar } from '@umituz/react-native-search';

const MyComponent = () => {
  const { query, setQuery, results } = useSearch({
    onSearch: (query) => {
      // Perform search
      return filterItems(query);
    },
  });

  return (
    <SearchBar
      value={query}
      onChangeText={setQuery}
      placeholder="Search..."
    />
  );
};

Search with History

import { useSearchHistory, SearchHistory } from '@umituz/react-native-search';

const MyComponent = () => {
  const { history, addToHistory, clearHistory } = useSearchHistory('my-search-key');

  return (
    <SearchHistory
      history={history}
      onSelect={(item) => {
        // Handle selection
        addToHistory(item.query);
      }}
      onClear={clearHistory}
    />
  );
};

API

Hooks

• useSearch(): Main search hook with debouncing
• useSearchHistory(): Search history management
• useDebounce(): Debounce utility hook

Components

• SearchBar: Search input component
• SearchHistory: Search history display component
• SearchSuggestions: Search suggestions component

License

MIT