Collapsible Header

Pro

Large-title header that shrinks its title into the navigation bar as you scroll, while the bar’s bottom edge appears as content passes beneath it. Can reveal a search field in the compact bar.

Preview

Installation

npx @lumioui/cli add pro/collapsible-header

Usage

import { CollapsibleHeader } from "@/components/ui/collapsible-header/collapsible-header";
<CollapsibleHeader />

Examples

API reference

Prop Type Default
title* string

Large title — collapses to the compact row.

 —
subtitle string

Optional line under the large title (expanded area only).

 —
left React.ReactNode

Compact row left slot (e.g. a back button).

 —
right React.ReactNode

Compact row right slot (e.g. actions).

 —
collapsedContent React.ReactNode

Revealed in the compact row once collapsed — replaces the small title. Keep it ≤40pt tall: the compact row is 44pt.

 —
expandedAccessory React.ReactNode

Rendered under the large title inside the expanded block — a search field or filter row. Scrolls away with the title; bump expandedHeight to fit it.

 —
expandedHeight number

Height of the expanded block in px. Default 56 (76 with a subtitle) — fits the 34pt title (+ subtitle); pass more for taller accessories.

 —
scrollY SharedValue<number>

External scroll shared value — drive your own scroll view and share the value, or let the built-in ScrollView write into it.

 —
translucent boolean

Translucent header background (bg-background/80) so scrolled content ghosts through. True blur needs expo-blur — intentionally not used here to keep the component Expo Go compatible.

 false
scrollable boolean

Render the built-in Animated.ScrollView around children. Default true — set false and pass scrollY to wire your own.

 true
children React.ReactNode —
className string —
contentClassName string —