Skip to main content

​
Overview

The HomeHeader component serves as the header section for the home screen. It integrates the SearchBar component with the application’s FilterContext to enable global search and filtering functionality across the cryptocurrency list. This component acts as a bridge between the UI (SearchBar) and the application state (FilterContext), automatically passing filter updates to the context for consumption by other components.

​
Props

This component does not accept any props. It manages filtering through the FilterContext.

​
Usage Example

​
Basic Usage

import HomeHeader from './components/HomeHeader';
import CryptoList from './components/CryptoList';

function HomeScreen() {
  return (
    <View style={{ flex: 1 }}>
      <HomeHeader />
      <CryptoList />
    </View>
  );
}

​
With Safe Area

import { SafeAreaView } from 'react-native';
import HomeHeader from './components/HomeHeader';
import CryptoList from './components/CryptoList';

function HomeScreen() {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
      <HomeHeader />
      <CryptoList />
    </SafeAreaView>
  );
}

​
Complete Screen Layout

import { SafeAreaView, StyleSheet } from 'react-native';
import HomeHeader from './components/HomeHeader';
import CryptoList from './components/CryptoList';

function HomeScreen() {
  return (
    <SafeAreaView style={styles.container}>
      <HomeHeader />
      <CryptoList />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
});

​
Component Architecture

​
Context Integration

The component uses the FilterContext to manage global filter state: 
import { useFilter } from '../context/FilterContext';

const HomeHeader = () => {
  const { setFilter } = useFilter();
  
  return (
    <View style={styles.header}>
      <SearchBar onSearch={setFilter} />
    </View>
  );
};
Key points:
  • Retrieves setFilter function from FilterContext
  • Passes setFilter directly to SearchBar’s onSearch prop
  • No local state management needed
  • Filter updates are automatically propagated to all context consumers

​
Filter Context Requirements

This component expects a FilterContext provider to be present in the component tree: 
import { FilterProvider } from './context/FilterContext';

function App() {
  return (
    <FilterProvider>
      <HomeScreen />
    </FilterProvider>
  );
}

​
Component Flow

​
Styling Details

​
Header Container

header: {
  paddingHorizontal: 16,
  paddingTop: 16,
  backgroundColor: '#fff',
  borderBottomWidth: 1,
  borderBottomColor: '#eee',
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.04,
  shadowRadius: 3,
  elevation: 2,
}
Visual characteristics:
  • Background: White (#fff) for clean header appearance
  • Padding: 16px horizontal and top padding for spacing
  • Border: 1px light gray bottom border (#eee) for subtle separation
  • Shadow: Very subtle shadow for minimal elevation effect
    • iOS: shadowOpacity: 0.04 with 3px radius
    • Android: elevation: 2

​
Layout Structure

┌─────────────────────────────────────┐
│ ← 16px padding                      │
│  ┌───────────────────────────────┐  │
│  │                               │  │
│  │     SearchBar Component       │  │
│  │                               │  │
│  └───────────────────────────────┘  │
│                                     │
├─────────────────────────────────────┤ ← Border

​
FilterContext API

​
Hook Interface

interface FilterContextValue {
  filter: Filter;
  setFilter: (filter: Filter) => void;
}

interface Filter {
  text: string;
  minPrice: number | null;
  maxPrice: number | null;
}

const { filter, setFilter } = useFilter();

​
Usage in Other Components

import { useFilter } from '../context/FilterContext';

function CryptoList() {
  const { filter } = useFilter(); // Read current filter
  
  const filteredData = data.filter(crypto => {
    const matchesText = crypto.name
      .toLowerCase()
      .includes(filter.text.toLowerCase());
    
    const price = parseFloat(crypto.price_usd);
    const matchesMin = filter.minPrice ? price >= filter.minPrice : true;
    const matchesMax = filter.maxPrice ? price <= filter.maxPrice : true;
    
    return matchesText && matchesMin && matchesMax;
  });
  
  return <FlatList data={filteredData} />;
}

​
Design Patterns

The HomeHeader demonstrates component composition by wrapping SearchBar:
  • Separation of concerns: SearchBar handles UI, HomeHeader handles integration
  • Reusability: SearchBar can be used elsewhere with different callbacks
  • Flexibility: Easy to swap SearchBar implementation or add additional header elements
  • SearchBar: The search input component integrated by HomeHeader
  • CryptoList: List component that consumes filter from context
  • CryptoCard: Individual card component displayed in filtered list

​
Source Code Location

~/workspace/source/src/components/HomeHeader.tsx:17

Build docs developers (and LLMs) love

Get started for freeTalk to us