managarten/picture/packages/mobile-ui/components/navigation/Header

Header

Navigation header component with title, back button, and custom actions.

Features

• ✅ Optional back button with custom handler
• ✅ Title display
• ✅ Custom left/right content slots
• ✅ Safe area support
• ✅ Customizable colors and border
• ✅ Press feedback on back button

Installation

npx @memoro/ui add header

Dependencies: text, icon

Usage

Basic Header

import { Header } from '@/components/navigation/Header';

<Header title="My Screen" />

With Back Button

import { useRouter } from 'expo-router';

function MyScreen() {
  const router = useRouter();

  return (
    <Header
      title="Details"
      showBackButton
      onBackPress={() => router.back()}
    />
  );
}

With Custom Right Content

<Header
  title="Settings"
  rightContent={
    <>
      <HeaderButton icon="search" onPress={() => {}} />
      <HeaderButton icon="ellipsis-horizontal" onPress={() => {}} />
    </>
  }
/>

With Custom Left Content

<Header
  title="Messages"
  leftContent={
    <Image
      source={{ uri: user.avatar }}
      style={{ width: 32, height: 32, borderRadius: 16 }}
    />
  }
  rightContent={
    <HeaderButton icon="add" onPress={() => {}} />
  }
/>

Without Border

<Header
  title="My Screen"
  showBorder={false}
/>

Without Safe Area

<Header
  title="My Screen"
  useSafeArea={false}
/>

Custom Colors

<Header
  title="Dark Header"
  backgroundColor="#1F2937"
  borderColor="#374151"
  titleColor="#FFFFFF"
  backIconColor="#60A5FA"
/>

Props

Prop	Type	Default	Description
title	string	-	Header title
showBackButton	boolean	false	Show back button on the left
onBackPress	() => void	-	Back button press handler (required if showBackButton)
leftContent	ReactNode	-	Custom left content (overrides back button)
rightContent	ReactNode	-	Custom right content
backgroundColor	string	'#FFFFFF'	Background color
borderColor	string	'#E5E7EB'	Border color
titleColor	string	'#111827'	Title text color
backIconColor	string	'#3B82F6'	Back button icon color
showBorder	boolean	true	Show border at bottom
useSafeArea	boolean	true	Use safe area insets for top padding
style	ViewStyle	-	Additional styles

Default Styling

• Background: White (#FFFFFF)
• Border: Light gray (#E5E7EB)
• Title: Dark gray (#111827), H4, Semibold
• Back Icon: Blue (#3B82F6)
• Padding: 16px horizontal, 12px vertical
• Min Height: 56px

Examples

Profile Header

<Header
  title="Profile"
  leftContent={
    <Pressable onPress={() => router.back()}>
      <Icon name="close" size={24} color="#111827" />
    </Pressable>
  }
  rightContent={
    <Pressable onPress={handleSave}>
      <Text variant="body" color="#3B82F6" weight="semibold">Save</Text>
    </Pressable>
  }
/>

Search Header

<Header
  leftContent={
    <View style={{ flex: 1, marginRight: 12 }}>
      <TextInput
        placeholder="Search..."
        style={{
          backgroundColor: '#F3F4F6',
          paddingHorizontal: 12,
          paddingVertical: 8,
          borderRadius: 8,
        }}
      />
    </View>
  }
  rightContent={
    <Pressable onPress={handleCancel}>
      <Text variant="body" color="#6B7280">Cancel</Text>
    </Pressable>
  }
/>

Chat Header

<Header
  showBackButton
  onBackPress={() => router.back()}
  leftContent={
    <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 12 }}>
      <Image
        source={{ uri: chat.avatar }}
        style={{ width: 32, height: 32, borderRadius: 16, marginRight: 8 }}
      />
      <Text variant="h4">{chat.name}</Text>
    </View>
  }
  rightContent={
    <>
      <HeaderButton icon="videocam" onPress={handleVideoCall} />
      <HeaderButton icon="call" onPress={handleCall} />
    </>
  }
/>

Settings Header

<Header
  showBackButton
  onBackPress={() => router.back()}
  title="Settings"
  rightContent={
    <HeaderButton
      icon="checkmark"
      onPress={handleSave}
      iconColor="#10B981"
    />
  }
/>

Minimal Header

<Header
  title="Welcome"
  showBorder={false}
  backgroundColor="transparent"
/>

Integration with Navigation

Expo Router

import { Stack } from 'expo-router';
import { Header } from '@/components/navigation/Header';

export default function Layout() {
  return (
    <Stack
      screenOptions={{
        header: ({ navigation, route, options }) => (
          <Header
            title={options.title || route.name}
            showBackButton={navigation.canGoBack()}
            onBackPress={() => navigation.goBack()}
          />
        ),
      }}
    />
  );
}

React Navigation

import { Header } from '@/components/navigation/Header';

<Stack.Navigator
  screenOptions={{
    header: ({ navigation, route, options }) => (
      <Header
        title={options.title}
        showBackButton={navigation.canGoBack()}
        onBackPress={() => navigation.goBack()}
      />
    ),
  }}
>
  <Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>

Common Patterns

Header with Multiple Actions

<Header
  title="Photos"
  rightContent={
    <View style={{ flexDirection: 'row', gap: 8 }}>
      <HeaderButton icon="search" onPress={handleSearch} />
      <HeaderButton icon="share" onPress={handleShare} />
      <HeaderButton icon="ellipsis-horizontal" onPress={handleMore} />
    </View>
  }
/>

Header with Badge

<Header
  title="Notifications"
  rightContent={
    <View>
      <HeaderButton icon="settings" onPress={handleSettings} />
      {unreadCount > 0 && (
        <Badge
          count={unreadCount}
          style={{ position: 'absolute', top: -4, right: -4 }}
        />
      )}
    </View>
  }
/>

Transparent Header (Overlay)

<View style={{ flex: 1 }}>
  <Image source={headerImage} style={{ position: 'absolute', width: '100%', height: 200 }} />
  <Header
    title="Detail"
    showBackButton
    onBackPress={() => router.back()}
    backgroundColor="transparent"
    titleColor="#FFFFFF"
    backIconColor="#FFFFFF"
    showBorder={false}
  />
</View>

Notes

• Requires react-native-safe-area-context for safe area support
• Back button is only shown if both showBackButton={true} and onBackPress are provided
• leftContent overrides back button if provided
• Minimum height is 56px to match standard header heights
• Works on iOS, Android, and Web
• Combine with HeaderButton component for consistent action buttons