Home / Components / collapsible-header

Collapsible HeaderiOS

Scroll-driven iOS large-title header — the big title collapses into a compact nav row (or a revealed accessory like search) on scroll

$ npx lumioui add collapsible-header

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

Props13

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 — the iOS Mail/Notes idiom for 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 64 — fits title (+ tight 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.
scrollable?	boolean	Render the built-in Animated.ScrollView around children. Default true — set false and pass `scrollY` to wire your own.
children?	React.ReactNode
className?	string
contentClassName?	string

Collapsible Headersearch.tsx

collapsible-header/variants/search.tsx open

Scroll-driven iOS large-title header — the big title collapses into a compact nav row (or a revealed accessory like search) on scroll

import { CollapsibleHeaderSearch } from "@/components/ui/collapsible-header/variants/search";

export function Example() {
  return (
    <CollapsibleHeaderSearch />
  );
}

import * as React from "react";
import { View } from "react-native";
import { CollapsibleHeader } from "../collapsible-header";
import { SearchInput } from "../../search-input/search-input";
import { Icon } from "../../icon/icon";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

const NOTES = [
  { title: "Kyoto itinerary", body: "Fushimi Inari at dawn, then Nishiki market" },
  { title: "Ramen ranking", body: "Sakura Tonkotsu 9.5 · Porto Nights 8.8" },
  { title: "Lisbon packing", body: "Linen shirts, film camera, tram pass" },
  { title: "Book list", body: "Kitchen Confidential · The Making of a Chef" },
  { title: "Gift ideas", body: "Ceramic pour-over set for Priya" },
  { title: "Expense notes", body: "Split Order #8421 with Amara — $14.50 each" },
];

/** CollapsibleHeaderSearch — iOS Notes idiom: search sits under the large
 *  title and scrolls away; the collapsed nav row shows the small title. */
export function CollapsibleHeaderSearch() {
  const [query, setQuery] = React.useState("");
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="h-96 w-full overflow-hidden rounded-2xl">
          <CollapsibleHeader
            title="Notes"
            translucent
            expandedHeight={124}
            expandedAccessory={
              <SearchInput
                glass
                value={query}
                onChangeText={setQuery}
                placeholder="Search notes"
                containerClassName="gap-0"
              />
            }
            right={
              <Glass interactive curvature="edge" className="h-9 w-9 items-center justify-center rounded-full">
                <Icon name="plus" size="sm" color="foreground" />
              </Glass>
            }
            className="h-96 w-full bg-transparent"
            contentClassName="gap-2 px-4 pb-6"
          >
            {NOTES.map((n) => (
              <Glass interactive key={n.title} curvature="edge" className="rounded-xl p-3.5">
                <Text variant="small" className="font-semibold">
                  {n.title}
                </Text>
                <Text variant="muted" numberOfLines={1}>
                  {n.body}
                </Text>
              </Glass>
            ))}
            <Text variant="muted" className="py-2 text-center text-xs">
              Scroll — the title collapses into the nav row
            </Text>
          </CollapsibleHeader>
        </Glass>
      </View>
  );
}