SearchInput

SearchInput is a specialized text input for search functionality. Includes search icon, clear button, and loading state support.

Preview

🔍Search hexagrams…

Basic Usage

🔍Search…

🔍Heaven✕

const [query, setQuery] = useState('');

<SearchInput
  value={query}
  onChangeText={setQuery}
  placeholder="Search..."
  onClear={() => setQuery('')}
/>

Sizes

🔍Small

🔍Medium

🔍Large

Size	Height	Usage
`sm`	36px	Compact layouts
`md`	44px	Default
`lg`	52px	Prominent search

Loading State

🔍Thunder⟳

<SearchInput
  value={query}
  onChangeText={setQuery}
  loading={isSearching}
  placeholder="Search hexagrams..."
/>

With Submit Handler

🔍Hexagram 1✕

<SearchInput
  value={query}
  onChangeText={setQuery}
  onSubmit={() => performSearch(query)}
  onClear={() => {
    setQuery('');
    clearResults();
  }}
  placeholder="Search and press Enter..."
/>

Disabled

🔍Search unavailable

<SearchInput
  value=""
  onChangeText={() => {}}
  placeholder="Search unavailable"
  disabled
/>

API Reference

Props

Prop	Type	Default	Description
`value`	`string`	Required	Current value
`onChangeText`	`(text: string) => void`	Required	Change handler
`placeholder`	`string`	`'Search...'`	Placeholder text
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Input size
`loading`	`boolean`	`false`	Show loading indicator
`onClear`	`() => void`	-	Clear button handler
`onSubmit`	`() => void`	-	Submit handler
`disabled`	`boolean`	`false`	Disable input
`style`	`ViewStyle`	-	Custom styles
`accessibilityLabel`	`string`	`'Search'`	A11y label

Complete Example

import { SearchInput, Card, Text } from '@synchronicity/react-native';
import { View, FlatList, StyleSheet } from 'react-native';
import { useState, useCallback } from 'react';
import { debounce } from 'lodash';

function HexagramSearch() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);

  const search = useCallback(
    debounce(async (searchQuery: string) => {
      if (!searchQuery.trim()) {
        setResults([]);
        setLoading(false);
        return;
      }

      setLoading(true);
      const data = await searchHexagrams(searchQuery);
      setResults(data);
      setLoading(false);
    }, 300),
    []
  );

  const handleChange = (text: string) => {
    setQuery(text);
    search(text);
  };

  const handleClear = () => {
    setQuery('');
    setResults([]);
    search.cancel();
  };

  return (
    <View style={styles.container}>
      <SearchInput
        value={query}
        onChangeText={handleChange}
        placeholder="Search hexagrams by name or number..."
        loading={loading}
        onClear={handleClear}
        size="lg"
      />

      {results.length > 0 ? (
        <FlatList
          data={results}
          keyExtractor={(item) => item.number.toString()}
          renderItem={({ item }) => (
            <Card style={styles.resultCard}>
              <Text style={styles.hexNumber}>#{item.number}</Text>
              <Text style={styles.hexName}>{item.name}</Text>
              <Text style={styles.hexChinese}>{item.chinese}</Text>
            </Card>
          )}
          style={styles.results}
        />
      ) : query && !loading ? (
        <Text style={styles.noResults}>
          No hexagrams found for "{query}"
        </Text>
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  results: {
    marginTop: 16,
  },
  resultCard: {
    marginBottom: 8,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  hexNumber: {
    fontSize: 14,
    color: '#8a8a9a',
    width: 40,
  },
  hexName: {
    fontSize: 16,
    fontWeight: '500',
    flex: 1,
  },
  hexChinese: {
    fontSize: 18,
  },
  noResults: {
    marginTop: 24,
    textAlign: 'center',
    color: '#8a8a9a',
  },
});