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} />,
  }}
/>

Props

Prop	Type	Default	Description
style	ContainerStyleProps	—	Additional styles applied to the container

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="Send2" onPress={handleShare} />
    ),
  }}
/>

Custom Left Button

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

Multiple Right Actions

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

Using useScreenOptions Hook

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

export default function Layout() {
  const { stack, stackWithOverrides } = useScreenOptions();

  return (
    <Stack screenOptions={stack}>
      <Stack.Screen name="index" options={{ title: 'Home' }} />
      <Stack.Screen
        name="details"
        options={stackWithOverrides({ animation: 'fade' })}
      />
    </Stack>
  );
}