@atom-design-mog/search

A flexible and lightweight Search Component for React Native, built as part of the Atom Design System. Includes a built-in search bar, live filtering, selectable filter chips, and a customizable results list.

🚀 Installation

Install using npm:

npm install @atom-design-mog/search

📸 Preview

The component includes:

• Search bar (TextInput + icon)
• Filter chips (multi-select)
• Results list (FlatList)
• Custom callbacks for search, filter, and result selection

Usage Example

import React, { useState } from 'react';
import { SafeAreaView } from 'react-native';
import Search from '@atom-design-mog/search';

export default function TestSearchScreen() {
  const masterData = [
    { id: '1', label: 'Result 1 - Moglix' },
    { id: '2', label: 'Result 2 - Credlix' },
    { id: '3', label: 'Result 3 - Zoglix' },
  ];

  const [results, setResults] = useState(masterData);

  const filters = ['All', 'Category 1', 'Category 2'];

  const handleSearch = (query) => {
    const filtered = masterData.filter(item =>
      item.label.toLowerCase().includes(query.toLowerCase())
    );
    setResults(filtered);
  };

  const handleFilterSelect = (selectedFilters) => {
    console.log('Selected filters:', selectedFilters);
  };

  return (
    <SafeAreaView style={{ flex: 1, padding: 16 }}>
      <Search
        placeholder="Search for items..."
        onSearch={handleSearch}
        results={results}
        filters={filters}
        onFilterSelect={handleFilterSelect}
      />
    </SafeAreaView>
  );
}

🔧 Props API

| Prop | Type | Default | Description | | ------------------ | ------------------------------------------- | ------------- | --------------------------------------------- | | placeholder | string | "Search..." | Placeholder text for the search input | | onSearch | (query: string) => void | undefined | Callback triggered whenever text changes | | results | { id: string \| number; label: string }[] | [] | Array of items to render as search results | | filters | string[] | [] | Array of filter labels shown as chips | | onFilterSelect | (selectedFilters: string[]) => void | undefined | Returns updated list of selected filters | | onResultPress | (item) => void | undefined | Triggered when a result item is tapped | | ...props | ViewProps | — | Additional props passed to the container View |

🎛 Features

• 🔍 Live search updates
• 🏷 Multi-select filter chips
• 📋 FlatList result rendering
• ⚡ Fast and lightweight
• 🎨 Clean default styling
• 🧩 Fully controlled by parent component

📝 Notes

• You control the filtering logic in onSearch.
• You can apply custom outer layout using a wrapper view.
• Works with both JavaScript and TypeScript.

👤 Author Avi Gupta