Skip to content
Native Animation
Collapsing Large Title animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add collapsing-large-title
Glass

Collapsing Large Title

A guide header that folds a photo hero and title into a toolbar, with configurable image, copy, fonts, and background color.

$9 for this animation

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

About this animation

A guide header that folds a photo hero and title into a toolbar, with configurable image, copy, fonts, and background color.

Why this one

Most collapsing headers treat the large heading and compact heading as two elements that crossfade, which creates a visible handoff. This component keeps one title alive throughout the transition, interpolating its position, size, color, and alignment from the same scroll value. It also adds a responsive overscroll crop, real materialized glass, and a complete two-screen travel guide instead of an isolated header sample.

How it works

  1. onLayout measures the component, so the hero, collapse distance, title endpoints, and spacing adapt inside phones, tablets, and sheets.
  2. A Reanimated Animated.ScrollView writes to one scrollY shared value; every visual state derives from that value without React updates per frame.
  3. Negative scroll stretches the hero from its top edge, while positive scroll translates it at half speed and gently darkens it.
  4. The single title interpolates from the image into the center of the toolbar as the eyebrow and review line fade away.
  5. Near the threshold, an Expo Blur toolbar materializes, its hairline appears, and toolbar icons crossfade from white glass buttons to dark borderless controls.
  6. The forwarded ref can expand, collapse, or play the showcase sequence without introducing a second animation model.

Install

npx expo install expo-blur expo-image expo-linear-gradient @shopify/react-native-skia react-native-reanimated react-native-worklets

Usage

import CollapsingLargeTitle from './CollapsingLargeTitle';

export function GuideScreen() {
  return (
    <CollapsingLargeTitle
      heroImage={require('./assets/coast.jpg')}
      title="Harbor Point"
      stays={stays}
    />
  );
}

Customize its content, palette, fonts, and controls:

import { useRef } from 'react';
import CollapsingLargeTitle, {
  type CollapsingLargeTitleRef,
} from './CollapsingLargeTitle';

export function IslandGuide() {
  const guideRef = useRef<CollapsingLargeTitleRef>(null);

  return (
    <CollapsingLargeTitle
      ref={guideRef}
      heroImage={require('./assets/island.jpg')}
      title="Lanterna Bay"
      eyebrow="ISLAND GUIDE"
      reviews="4.9 · 2,184 reviews"
      facts={tripFacts}
      stays={hotels}
      tips={travelTips}
      accentColor="#F5B544"
      inkColor="#0F172A"
      titleFontFamily="YourEditorialFont"
      fontFamily="YourSansFont"
      mediumFontFamily="YourMediumSansFont"
      monoFontFamily="YourMonoFont"
      onActionPress={openTripPlanner}
    />
  );
}

The forwarded ref exposes expand(animated?), collapse(animated?), and playShowcase().

Props

PropTypeDefaultDescription
heroImageImageSourcePropTypeRequiredHero photograph.
headerAccessoryReactNode—Optional brand or context mark beside Back.
titlestring'Coastal guide'Destination title that collapses into the toolbar.
eyebrowstring'DESTINATION GUIDE'Uppercase category over the hero.
reviewsstring'4.9 · 1,240 reviews'Review summary beside the star.
descriptionstringGeneric destination copyIntroductory guide paragraph.
factsCollapsingLargeTitleFact[]Three trip factsCompact travel data cards.
staysCollapsingLargeTitleStay[][]Horizontal accommodation cards.
tipsCollapsingLargeTitleTip[]Four travel tipsInformational rows near the end.
actionLabelstring'Plan this trip'Fixed primary action label.
priceLabelstring'from $1,240'Price beside the action.
backgroundColorstring'#FBFAF7'Warm content surface.
inkColorstring'#0F172A'Toolbar, icon, and action color.
accentColorstring'#F5B544'Accent for the star and editorial rule.
fontFamilystringSystem fontBody and supporting copy.
mediumFontFamilystringSystem fontLabels, controls, and headings.
titleFontFamilystringSystem fontEditorial title and display copy.
monoFontFamilystringSystem fontFacts and prices.
onBack() => void—Called when Back is pressed.
onFavorite() => void—Called when Favorite is pressed.
onShare() => void—Called when Share is pressed.
onActionPress() => void—Called when the fixed primary action is pressed.
styleStyleProp<ViewStyle>—Outer-container style.
testIDstring—Test identifier for the outer container.

Compatibility

  • Expo SDK 58
  • React Native 0.88
  • Reanimated 4.7
  • Skia 2.14
  • iOS: supported
  • Android: supported; blur uses the SDK 31+ method and a translucent fallback below it
  • Web: supported
  • Works in Expo Go because all native dependencies are included in this project's Expo SDK runtime

Accessibility

Back, Favorite, Share, and the primary action expose 44-point-or-larger labeled button targets with immediate press feedback. The guide uses a real scroll view for screen-reader navigation. With Reduce Motion enabled, hero scaling and parallax stop, the title switches without spatial interpolation, and the toolbar changes with a restrained fade.

Customization notes

The title follows scroll position, rather than a playback clock.

More animations