Build a Professional Animated Search Header in Expo: Complete Step-by-Step Guide with Code (SDK 52)

Introduction

Are you struggling to create a polished, animated search header for your React Native app? A well-designed header with smooth search functionality can dramatically improve user experience, but implementing one from scratch can be challenging. This comprehensive tutorial walks you through creating a professional, animated search header in Expo SDK 52 that rivals those found in top-tier mobile applications.

This tutorial is perfect for React Native developers who:

Need to implement a professional-looking header with search functionality
Want to understand how to create reusable components in Expo
Are looking to enhance their app's user experience with smooth animations and transitions

By the end of this tutorial, you'll have a fully functional, animated custom header component that can be easily integrated into any Expo project.

Prerequisites

Before we start, make sure you have:

Node.js (v16 or newer)
Expo CLI installed globally (npm install -g expo-cli)
Basic understanding of React Native and Expo
Familiarity with React Navigation

Setting Up the Project

Let's start by creating a new Expo project:

npx create-expo-app custom-header-app
cd custom-header-app

Next, let's install the necessary dependencies:

npx expo install @react-navigation/native @react-navigation/native-stack react-native-safe-area-context react-native-screens
npx expo install react-native-vector-icons
npx expo install react-native-gesture-handler react-native-reanimated

Project Structure

Before diving into the code, let's organize our project structure:

/src
  /components
    /Header
      index.js       # Main Header component
      SearchBar.js   # Searchable input component
      styles.js      # Styles for our components
  /screens
    HomeScreen.js    # Example screen to use our header
    SearchScreen.js  # Screen to display search results
  /navigation
    AppNavigator.js  # Navigation configuration
  /utils
    constants.js     # Constants like colors, dimensions

Let's create these directories and files:

mkdir -p src/components/Header src/screens src/navigation src/utils
touch src/components/Header/index.js src/components/Header/SearchBar.js src/components/Header/styles.js
touch src/screens/HomeScreen.js src/screens/SearchScreen.js
touch src/navigation/AppNavigator.js src/utils/constants.js

Step 1: Setting Up Constants

First, let's define some constants for consistent styling:

// src/utils/constants.js
import { Dimensions, Platform } from 'react-native';

const { width, height } = Dimensions.get('window');

export const COLORS = {
  primary: '#4A6572',
  primaryDark: '#344955',
  secondary: '#F9AA33',
  white: '#FFFFFF',
  black: '#000000',
  gray: '#BBBBBB',
  lightGray: '#F5F5F5',
  transparent: 'transparent',
};

export const SIZES = {
  // global sizes
  base: 8,
  font: 14,
  radius: 12,
  padding: 24,

  // font sizes
  largeTitle: 40,
  h1: 30,
  h2: 22,
  h3: 16,
  h4: 14,
  body1: 30,
  body2: 22,
  body3: 16,
  body4: 14,
  body5: 12,

  // app dimensions
  width,
  height,
};

export const FONTS = {
  largeTitle: { fontSize: SIZES.largeTitle },
  h1: { fontSize: SIZES.h1, fontWeight: '700' },
  h2: { fontSize: SIZES.h2, fontWeight: '600' },
  h3: { fontSize: SIZES.h3, fontWeight: '500' },
  h4: { fontSize: SIZES.h4, fontWeight: '500' },
  body1: { fontSize: SIZES.body1 },
  body2: { fontSize: SIZES.body2 },
  body3: { fontSize: SIZES.body3 },
  body4: { fontSize: SIZES.body4 },
  body5: { fontSize: SIZES.body5 },
};

export const HEADER_HEIGHT = Platform.OS === 'ios' ? 88 : 64;
export const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 44 : 0;

Step 2: Creating the SearchBar Component

Now, let's create the SearchBar component that will be integrated into our header:

// src/components/Header/SearchBar.js
import React, { useRef, useEffect } from 'react';
import { 
  View, 
  TextInput, 
  TouchableOpacity, 
  Animated,
  Keyboard 
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { COLORS, SIZES } from '../../utils/constants';
import { styles } from './styles';

const SearchBar = ({ 
  searchQuery, 
  setSearchQuery, 
  isSearchFocused, 
  setIsSearchFocused,
  handleSearch,
  animatedValue 
}) => {
  const inputRef = useRef(null);
  
  // Animation values
  const inputAnimation = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    // Animate search bar expansion/collapse
    Animated.timing(inputAnimation, {
      toValue: isSearchFocused ? 1 : 0,
      duration: 300,
      useNativeDriver: false,
    }).start();
    
    // Focus/blur input based on state
    if (isSearchFocused) {
      inputRef.current?.focus();
    } else {
      inputRef.current?.blur();
    }
  }, [isSearchFocused]);

  // Calculate width animation
  const inputWidth = inputAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: ['0%', '85%']
  });

  const handleClear = () => {
    setSearchQuery('');
    setIsSearchFocused(false);
    Keyboard.dismiss();
  };

  return (
    <View style={styles.searchContainer}>
      <TouchableOpacity
        style={styles.searchIcon}
        onPress={() => setIsSearchFocused(true)}
      >
        <Ionicons name="search" size={22} color={COLORS.white} />
      </TouchableOpacity>
      
      <Animated.View
        style={[
          styles.inputContainer,
          {
            width: inputWidth,
            opacity: inputAnimation
          }
        ]}
      >
        <TextInput
          ref={inputRef}
          style={styles.input}
          placeholder="Search..."
          placeholderTextColor={COLORS.gray}
          value={searchQuery}
          onChangeText={setSearchQuery}
          onSubmitEditing={handleSearch}
          returnKeyType="search"
          onBlur={() => {
            if (searchQuery === '') {
              setIsSearchFocused(false);
            }
          }}
        />
        
        {searchQuery.length > 0 && (
          <TouchableOpacity
            style={styles.clearButton}
            onPress={handleClear}
          >
            <Ionicons name="close-circle" size={16} color={COLORS.gray} />
          </TouchableOpacity>
        )}
      </Animated.View>
      
      {isSearchFocused && (
        <TouchableOpacity
          style={styles.cancelButton}
          onPress={handleClear}
        >
          <Ionicons name="close" size={22} color={COLORS.white} />
        </TouchableOpacity>
      )}
    </View>
  );
};

export default SearchBar;

Step 3: Defining Component Styles

Now let's create the styles for our components:

// src/components/Header/styles.js
import { StyleSheet, Platform } from 'react-native';
import { COLORS, SIZES, HEADER_HEIGHT, STATUS_BAR_HEIGHT } from '../../utils/constants';

export const styles = StyleSheet.create({
  // Header container
  headerContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: SIZES.padding / 2,
    height: HEADER_HEIGHT,
    paddingTop: STATUS_BAR_HEIGHT,
    backgroundColor: COLORS.primary,
    elevation: 4,
    shadowColor: COLORS.black,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 3,
    zIndex: 10,
  },
  
  // Left side of header
  headerLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  backButton: {
    padding: SIZES.base,
    marginRight: SIZES.base,
  },
  titleContainer: {
    maxWidth: '70%',
  },
  title: {
    ...Platform.select({
      ios: {
        fontSize: 17,
      },
      android: {
        fontSize: 18,
      },
    }),
    color: COLORS.white,
    fontWeight: '600',
  },
  subtitle: {
    fontSize: 12,
    color: COLORS.lightGray,
    marginTop: 2,
  },
  
  // Right side of header
  headerRight: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  iconButton: {
    padding: SIZES.base,
    marginLeft: SIZES.base,
  },
  
  // Search bar
  searchContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
  searchIcon: {
    padding: SIZES.base,
  },
  inputContainer: {
    height: 36,
    backgroundColor: COLORS.white,
    borderRadius: SIZES.radius,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: SIZES.base,
    overflow: 'hidden',
  },
  input: {
    flex: 1,
    height: '100%',
    fontSize: SIZES.body4,
    color: COLORS.black,
    paddingVertical: 0,
  },
  clearButton: {
    padding: 4,
  },
  cancelButton: {
    padding: SIZES.base,
    marginLeft: SIZES.base,
  },
  
  // Header shadow animation
  shadowOverlay: {
    position: 'absolute',
    top: HEADER_HEIGHT,
    left: 0,
    right: 0,
    height: 6,
    backgroundColor: 'transparent',
    shadowColor: COLORS.black,
    shadowOffset: { width: 0, height: -3 },
    shadowOpacity: 0.1,
    shadowRadius: 3,
    elevation: 8,
  },
});

Step 4: Building the Main Header Component

Now let's create the main Header component:

// src/components/Header/index.js
import React, { useState, useRef } from 'react';
import { 
  View, 
  Text, 
  TouchableOpacity,
  Animated
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { Ionicons } from '@expo/vector-icons';
import { COLORS } from '../../utils/constants';
import { styles } from './styles';
import SearchBar from './SearchBar';

const CustomHeader = ({
  title = 'Header',
  subtitle,
  showBack = false,
  showSearch = true,
  onSearch,
  rightComponent,
  animatedValue = new Animated.Value(0)
}) => {
  const navigation = useNavigation();
  const [searchQuery, setSearchQuery] = useState('');
  const [isSearchFocused, setIsSearchFocused] = useState(false);
  
  const handleSearch = () => {
    if (searchQuery.trim() !== '') {
      onSearch?.(searchQuery);
      
      // Navigate to search results screen
      navigation.navigate('Search', { query: searchQuery });
    }
  };

  // Calculate header opacity for scroll effects if animatedValue is provided
  const headerOpacity = animatedValue.interpolate({
    inputRange: [0, 50, 100],
    outputRange: [1, 0.9, 0.8],
    extrapolate: 'clamp'
  });
  
  // Shadow animation based on scroll
  const shadowOpacity = animatedValue.interpolate({
    inputRange: [0, 20],
    outputRange: [0, 1],
    extrapolate: 'clamp'
  });

  return (
    <Animated.View 
      style={[
        styles.headerContainer,
        { opacity: headerOpacity }
      ]}
    >
      {/* Left side - Back button + Title */}
      <View style={styles.headerLeft}>
        {showBack && (
          <TouchableOpacity 
            style={styles.backButton}
            onPress={() => navigation.goBack()}
          >
            <Ionicons name="arrow-back" size={24} color={COLORS.white} />
          </TouchableOpacity>
        )}
        
        {!isSearchFocused && (
          <View style={styles.titleContainer}>
            <Text style={styles.title} numberOfLines={1}>
              {title}
            </Text>
            {subtitle && (
              <Text style={styles.subtitle} numberOfLines={1}>
                {subtitle}
              </Text>
            )}
          </View>
        )}
      </View>
      
      {/* Right side - Search + Actions */}
      <View style={styles.headerRight}>
        {showSearch ? (
          <SearchBar
            searchQuery={searchQuery}
            setSearchQuery={setSearchQuery}
            isSearchFocused={isSearchFocused}
            setIsSearchFocused={setIsSearchFocused}
            handleSearch={handleSearch}
            animatedValue={animatedValue}
          />
        ) : null}
        
        {!isSearchFocused && rightComponent}
      </View>
      
      {/* Shadow overlay that appears on scroll */}
      <Animated.View 
        style={[
          styles.shadowOverlay,
          { opacity: shadowOpacity }
        ]} 
      />
    </Animated.View>
  );
};

export default CustomHeader;

Step 5: Creating Example Screens

Let's create example screens to showcase our custom header:

// src/screens/HomeScreen.js
import React, { useRef } from 'react';
import { 
  View, 
  Text, 
  StyleSheet, 
  FlatList, 
  TouchableOpacity,
  Animated
} from 'react-native';
import CustomHeader from '../components/Header';
import { COLORS, SIZES } from '../utils/constants';
import { Ionicons } from '@expo/vector-icons';

// Sample data
const DATA = Array(30).fill(null).map((_, index) => ({
  id: `item-${index}`,
  title: `Item ${index + 1}`,
  description: `This is a description for item ${index + 1}`
}));

const HomeScreen = () => {
  const scrollY = useRef(new Animated.Value(0)).current;
  
  const renderItem = ({ item }) => (
    <TouchableOpacity 
      style={styles.item}
      activeOpacity={0.8}
    >
      <Text style={styles.itemTitle}>{item.title}</Text>
      <Text style={styles.itemDescription}>{item.description}</Text>
    </TouchableOpacity>
  );
  
  // Custom right component for header
  const headerRight = (
    <TouchableOpacity style={styles.iconButton}>
      <Ionicons name="notifications-outline" size={24} color={COLORS.white} />
    </TouchableOpacity>
  );

  return (
    <View style={styles.container}>
      <CustomHeader
        title="My App"
        subtitle="Welcome back!"
        showSearch={true}
        animatedValue={scrollY}
        rightComponent={headerRight}
      />
      
      <Animated.FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.listContent}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
          { useNativeDriver: false }
        )}
        scrollEventThrottle={16}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.lightGray,
  },
  listContent: {
    padding: SIZES.padding,
  },
  item: {
    backgroundColor: COLORS.white,
    padding: SIZES.padding / 1.5,
    borderRadius: SIZES.radius,
    marginBottom: SIZES.base * 2,
    shadowColor: COLORS.black,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
  itemTitle: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 5,
  },
  itemDescription: {
    fontSize: 14,
    color: COLORS.gray,
  },
  iconButton: {
    padding: SIZES.base,
    marginLeft: SIZES.base,
  },
});

export default HomeScreen;

Now let's create a simple search results screen:

// src/screens/SearchScreen.js
import React from 'react';
import { 
  View, 
  Text, 
  StyleSheet, 
  FlatList, 
  TouchableOpacity 
} from 'react-native';
import CustomHeader from '../components/Header';
import { COLORS, SIZES } from '../utils/constants';

const SearchScreen = ({ route }) => {
  const { query } = route.params;
  
  // Mock search results based on query
  // In a real app, you'd fetch these from an API or filter from local data
  const searchResults = Array(5).fill(null).map((_, index) => ({
    id: `result-${index}`,
    title: `${query} result ${index + 1}`,
    description: `This is a search result for "${query}"`
  }));
  
  const renderItem = ({ item }) => (
    <TouchableOpacity 
      style={styles.item}
      activeOpacity={0.8}
    >
      <Text style={styles.itemTitle}>{item.title}</Text>
      <Text style={styles.itemDescription}>{item.description}</Text>
    </TouchableOpacity>
  );

  return (
    <View style={styles.container}>
      <CustomHeader
        title={`Results for "${query}"`}
        showBack={true}
        showSearch={true}
      />
      
      <FlatList
        data={searchResults}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        contentContainerStyle={styles.listContent}
        ListEmptyComponent={
          <View style={styles.emptyContainer}>
            <Text style={styles.emptyText}>No results found for "{query}"</Text>
          </View>
        }
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.lightGray,
  },
  listContent: {
    padding: SIZES.padding,
    flexGrow: 1,
  },
  item: {
    backgroundColor: COLORS.white,
    padding: SIZES.padding / 1.5,
    borderRadius: SIZES.radius,
    marginBottom: SIZES.base * 2,
    shadowColor: COLORS.black,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
  itemTitle: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 5,
  },
  itemDescription: {
    fontSize: 14,
    color: COLORS.gray,
  },
  emptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: SIZES.padding * 2,
  },
  emptyText: {
    fontSize: 16,
    color: COLORS.gray,
  },
});

export default SearchScreen;

Step 6: Setting Up Navigation

Finally, let's set up the navigation structure:

// src/navigation/AppNavigator.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import HomeScreen from '../screens/HomeScreen';
import SearchScreen from '../screens/SearchScreen';

const Stack = createNativeStackNavigator();

const AppNavigator = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false, // Hide default header
          animation: 'slide_from_right',
        }}
      >
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Search" component={SearchScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default AppNavigator;

Step 7: Update App.js

Finally, let's update our App.js file to use our navigator:

// App.js
import 'react-native-gesture-handler';
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import AppNavigator from './src/navigation/AppNavigator';
import { COLORS } from './src/utils/constants';

export default function App() {
  return (
    <SafeAreaProvider>
      <StatusBar style="light" backgroundColor={COLORS.primary} />
      <AppNavigator />
    </SafeAreaProvider>
  );
}

Testing the Implementation

Now we can run our app:

npx expo start

Advanced Customization Options

Here are some ways to further enhance your custom header:

1. Add Context Menu for Header Options

You could add a context menu that appears when tapping a three-dot icon in the header:

// Add to CustomHeader component
const [isMenuVisible, setIsMenuVisible] = useState(false);

// Add a menu button to headerRight
<TouchableOpacity 
  style={styles.iconButton}
  onPress={() => setIsMenuVisible(true)}
>
  <Ionicons name="ellipsis-vertical" size={24} color={COLORS.white} />
</TouchableOpacity>

// Add a simple dropdown menu
{isMenuVisible && (
  <View style={styles.menuContainer}>
    <TouchableOpacity style={styles.menuItem}>
      <Text>Settings</Text>
    </TouchableOpacity>
    <TouchableOpacity style={styles.menuItem}>
      <Text>Help</Text>
    </TouchableOpacity>
    {/* Close overlay */}
    <TouchableWithoutFeedback onPress={() => setIsMenuVisible(false)}>
      <View style={styles.menuOverlay} />
    </TouchableWithoutFeedback>
  </View>
)}

2. Adding Voice Search

You could integrate the Expo Speech package to add voice search capabilities:

npx expo install expo-speech

Then add a microphone button next to the search input.

3. Collapsible Header

You could make the header collapse and expand based on scroll position:

// In CustomHeader
const headerHeight = animatedValue.interpolate({
  inputRange: [0, 100],
  outputRange: [HEADER_HEIGHT, HEADER_HEIGHT/2],
  extrapolate: 'clamp'
});

// Apply to container
<Animated.View 
  style={[
    styles.headerContainer,
    { 
      height: headerHeight,
      opacity: headerOpacity 
    }
  ]}
>

Common Issues and Solutions

Here are some common issues you might encounter and how to solve them:

1. Search Bar Animation Jank

If the search bar animation isn't smooth, try enabling hardware acceleration:

Animated.timing(inputAnimation, {
  toValue: isSearchFocused ? 1 : 0,
  duration: 300,
  useNativeDriver: false, // Cannot use true with layout properties like 'width'
  easing: Easing.inOut(Easing.ease) // Add smoother easing
}).start();

2. Navigation Issues

If you encounter issues with the navigation header, make sure you've properly set up the safe area context:

import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

// Use SafeAreaView in your screens with edge="bottom"
<SafeAreaView style={styles.container} edges={['bottom']}>
  {/* Content */}
</SafeAreaView>

3. Status Bar Color on iOS

For proper status bar color handling on iOS:

import { StatusBar } from 'expo-status-bar';

// In your header component
useLayoutEffect(() => {
  StatusBar.setBarStyle('light-content');
  if (Platform.OS === 'android') {
    StatusBar.setBackgroundColor(COLORS.primary);
  }
}, []);

Conclusion

In this tutorial, we've created a fully customizable header component with an elegant search animation. The component is reusable across your application and can be easily extended with additional features.

The final result is a professional-looking header that:

Smoothly animates between regular and search states
Responds to scroll events with opacity and shadow changes
Provides clear navigation cues with back buttons and titles
Has a clean, modern design that follows mobile UI best practices

You can extend this component further by adding features like voice search, collapsible behavior, or integrating it with your app's theming system.

Remember to use this component consistently throughout your app for a unified user experience. Happy coding!