Large title header

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/large-title-header.json

Then run npx expo install --fix so react-native-reanimated, react-native-svg match your Expo SDK. Files land in components/goodui-native/large-title-header.

Usage

import { Stack, router } from "expo-router";
import { LargeTitleScrollView } from "@/components/goodui-native/large-title-header/large-title-header";

export default function Inbox() {
  const [query, setQuery] = useState("");
  return (
    <>
      <Stack.Screen options={{ headerShown: false }} />
      <LargeTitleScrollView
        title="Inbox"
        subtitle="4 unread"
        onBack={() => router.back()}
        search={{ value: query, onChangeText: setQuery, placeholder: "Search mail" }}
        actions={[{ key: "compose", accessibilityLabel: "New message", icon: (p) => <PencilIcon {...p} />, onPress: compose }]}
      >
        {messages.map((m) => <MessageRow key={m.id} message={m} />)}
      </LargeTitleScrollView>
    </>
  );
}

When to use

Examples

const scrollY = useSharedValue(0);
const distance = useSharedValue(52);
const onScroll = useAnimatedScrollHandler((e) => {
  scrollY.value = e.contentOffset.y;
});
const insets = useInsets();

<View style={{ flex: 1 }}>
  <Animated.FlatList
    data={rows}
    onScroll={onScroll}
    scrollEventThrottle={16}
    contentContainerStyle={{ paddingTop: insets.top + 44 }}
    ListHeaderComponent={<LargeTitle title="Accounts" scrollY={scrollY} collapseDistance={distance} />}
    renderItem={renderRow}
  />
  <LargeTitleHeader title="Accounts" scrollY={scrollY} collapseDistance={distance} />
</View>

const scrollY = useSharedValue(0);

<View style={{ flex: 1 }}>
  <LargeTitleScrollView title="Workouts" scrollY={scrollY} contentContainerStyle={{ paddingBottom: 120 }}>
    {rows}
  </LargeTitleScrollView>
  <TabBar variant="floating" absolute scrollY={scrollY} items={tabs} />
</View>

API reference

Motion and haptics

• •Scrolling: the large title fades out between 35 % and 85 % of its height while the compact title fades in and rises 6 pt between 60 % and 100 %.
• •The bar background and hairline fade in as the title collapses (the solid variant keeps its background).
• •Pulling past the top (iOS bounce) stretches the large title up to 12 % from its leading edge, following the finger.
• •When a drag or fling ends with the title half collapsed, the scroll view settles to fully expanded or fully collapsed (native; the web has no drag end events).
• •Reduced motion: no stretch, no rise on the compact title, and the settle jumps instead of animating; the cross-fade stays.

• •Haptic: tap on the back button and on trailing actions
• •Haptic: none while scrolling

• •All scroll-driven styles are computed on the UI thread from one shared scroll offset; scrolling never re-renders React.

Accessibility

• •The large title has accessibilityRole header; the compact copy in the bar is hidden from screen readers so the title is read once.
• •The back button and every trailing action are buttons of at least 44 × 44 pt; actions require an accessibilityLabel.
• •The search field is labelled by its placeholder; the clear button is labelled 'Clear search'.

Notes for AI

Related