simon-expo-header-base

name	simon-expo-header-base
description	Opinionated workflow for building Simon-style Expo Router headers. Use when creating or refactoring screen headers, title bars, toolbars, search bars, form sheets, or liquid-glass header surfaces in this repo, and you need to match existing `Stack.Header`, `Stack.Screen.Title`, `Stack.Toolbar`, `Stack.Toolbar.View`, `Stack.SearchBar`, and `sheetAllowedDetents` patterns.

Simon Expo Header Base

Use Simon-native header patterns instead of inventing new header systems. Copy the closest in-repo recipe and adapt only labels, icons, and handlers.

References

Read these first:

• ./references/pattern-map.md
• ./references/header-recipes.md

Use pattern-map.md to pick source files. Use header-recipes.md to paste concrete snippets.

Workflow

1. Classify the target screen:

• title-toolbar: regular title + left/right toolbar actions.
• search-toolbar: search bar + bottom toolbar slot.
• glass-title: liquid-glass title capsule for focused chat-like screens.
• sheet-route: form sheet presented via stack route config.
• modal-sheet: local Modal with presentationStyle="pageSheet".

2. Apply Simon header base rules:

• Render header config nodes before page content in the returned fragment.
• Use <Stack.Header style={{ backgroundColor: "transparent" }} /> for custom headers.
• Place navigation in Stack.Toolbar placement="left".
• Place actions/menus in Stack.Toolbar placement="right".
• Use bottom/default toolbar for search slot and quick actions.
• Keep title/foreground colors from useTheme().

3. Apply sheet rules when needed:

• For route-level sheets, configure in _layout.tsx with presentation: "formSheet".
• Set sheetGrabberVisible: true.
• Reuse Simon detents: [0.35] for compact action sheets, [0.7, 1.0] for picker/context sheets.
• Hide nested headers inside sheet routes (headerShown: false) and keep transparent content when appropriate.

4. Apply liquid-glass rules when needed:

• Use GlassView for high-emphasis surfaces only (title capsule, key cards, swipe actions).
• Prefer glassEffectStyle="regular".
• Use isInteractive for tappable glass surfaces.
• Keep capsule geometry smooth with large radius and borderCurve: "continuous" where used.

5. Verify behavior:

• Back action exists on left when screen is not root.
• Right actions are reachable in both compact and large title states.
• Search remains in bottom toolbar via Stack.Toolbar.SearchBarSlot.
• Header blur/transparency matches neighboring screens.

Placement Policy

• left: navigation (chevron.left, history).
• right: settings/info/filter/overflow menus.
• bottom or default toolbar: search slot + compose/add/switch controls.
• Stack.Toolbar.View: custom inline control area inside toolbar (for example text input mode).

Guardrails

• Do not introduce a second header system (custom absolute-position header view).
• Do not switch to opaque header backgrounds for Simon stack screens that already use transparent/blurred headers.
• Do not hardcode colors outside theme tokens when composing header/title/toolbar text.
• Do not move sheet presentation options out of stack route config unless the existing screen already uses local modal behavior.

Output Contract

When applying this skill, produce:

1. The selected pattern source file(s) from pattern-map.md.
2. The exact recipe variant used from header-recipes.md.
3. The final code adapted to the target screen with minimal divergence from Simon conventions.
4. A short checklist confirming toolbar placement, sheet behavior, and glass usage.