ContextHeader

(A) One-liner

ContextHeader is a custom header component that can replace native navigation header on mobile screens. It provides 3-area structure: left (back/custom), center (title), right (action), and supports screen layout options like safe area inclusion/fixed positioning.

(B) Installation (Track A / Track B)

Track A (CLI / local install)

1. Add ContextHeader

pnpm dlx @fleet-ui/cli add ContextHeader

2. Import example

import { ContextHeader } from '@fleet-ui/local/components';

Track B (NPM package)

1. Import example

import { ContextHeader } from '@fleet-ui/components';

(Required) Per-component Dependencies

lucide-react-native is needed to use default back button icon.

pnpm add lucide-react-native react-native-unistyles

(D) Core Features & Usage

D-1. Most Common Scenario (Minimal Example)

import { ContextHeader } from '@fleet-ui/components';
 
export function Example() {
  return <ContextHeader title="Details" onBackPress={() => {}} />;
}

D-2. Left Area: left vs Default BackButton

• When left is provided, replaces default BackButton.
• When no left and showBackButton=true, default BackButton is displayed.
• When default BackButton is pressed, onBackPress() is called.

import { ContextHeader, IconButton } from '@fleet-ui/components';
import { X } from 'lucide-react-native';
 
export function Example() {
  return (
    <ContextHeader
      title="Profile"
      left={<IconButton aria-label="Close" icon={<X />} onPress={() => {}} />}
      right={<IconButton aria-label="Edit" icon={<X />} onPress={() => {}} />}
      showBackButton={false}
    />
  );
}

D-3. Title Alignment: titleAlign Auto Rule

When titleAlign is not specified, implementation automatically determines as follows:

• If left content exists (= left exists or showBackButton=true), default is 'center'
• If no left content, default is 'left'

This rule prevents "awkward layout when forcing center title with empty left side."

D-4. Safe Area/Fixed Positioning

• includeSafeAreaTop=true: Adds paddingTop equal to top safe area inset.
• fixed=true: Fixes header to top with position: 'absolute'.

Caution: When using fixed=true, body content can go behind header, so typically you need to secure top padding/margin separately in screen container.

(E) Internal State / Shared Value / Animation

ContextHeader has no internal state/animation (shared value). Instead, it determines these "layout policies" internally:

• hasLeftContent = left !== undefined || showBackButton
• Default titleAlign auto-determined based on hasLeftContent
• When titleAlign='center', title uses absolute positioning for center alignment (pointerEvents="none")

(F) Accessibility

• Title text renders with accessibilityRole="header".
• Default BackButton:
  • accessibilityRole="button"
  • accessibilityLabel="Go back"

Recommended rules:

• When putting icon-only buttons in left/right, provide aria-label/accessibilityLabel for those buttons.

(G) Props Table

Reference: ContextHeaderProps from packages/components/src/ContextHeader/ContextHeader.types.ts.