MultinaireStackHeader

Stack navigation header with theme-aware styling and responsive layout.

Basic Usage

import { MultinaireStackHeader } from '@multinaire/multinaire-design';

<Stack.Screen
  options={{
    header: (props) => <MultinaireStackHeader {...props} />,
  }}
/>

Configuration

The header is configured through React Navigation's screen options:

Option	Type	Description
title	string	Header title text
headerLeft	() => ReactNode	Left side content
headerRight	() => ReactNode	Right side content

Examples

Basic Setup

// In your layout file
import { Stack } from 'expo-router';
import { MultinaireStackHeader } from '@multinaire/multinaire-design';

export default function Layout() {
  return (
    <Stack
      screenOptions={{
        header: (props) => <MultinaireStackHeader {...props} />,
      }}
    >
      <Stack.Screen name="index" options={{ title: 'Home' }} />
      <Stack.Screen name="profile" options={{ title: 'Profile' }} />
    </Stack>
  );
}

With Actions

<Stack.Screen
  name="details"
  options={{
    title: 'Details',
    headerRight: () => (
      <MultinaireIconButton icon="Share" onPress={handleShare} />
    ),
  }}
/>

Custom Left Button

<Stack.Screen
  name="modal"
  options={{
    title: 'Edit Profile',
    headerLeft: () => (
      <MultinaireIconButton icon="Close" onPress={() => navigation.goBack()} />
    ),
    headerRight: () => (
      <MultinaireIconButton icon="Check" onPress={handleSave} />
    ),
  }}
/>

Multiple Right Actions

<Stack.Screen
  name="post"
  options={{
    title: 'Post',
    headerRight: () => (
      <MultinaireContainer horizontal gap={8}>
        <MultinaireIconButton icon="Bookmark" onPress={handleSave} />
        <MultinaireIconButton icon="Share" onPress={handleShare} />
      </MultinaireContainer>
    ),
  }}
/>

Using useScreenOptions Hook

import { useScreenOptions } from '@multinaire/multinaire-design';

function DetailsScreen() {
  useScreenOptions({
    title: 'Details',
    headerRight: () => <MultinaireIconButton icon="Edit" onPress={edit} />,
  });

  return <ScreenContent />;
}