# Collapsing Coin Header — React Native component from Motionary

> A collapsing scroll header with a price chart, matched to X's coin page: as the feed slides over it, the header shrinks from its top edge and fades. Pull down and it rides with the content to reveal an arrow, with opacity and drift curves sampled frame by frame from a screen recording. Drop it into a crypto, stock or token detail screen.

Product page: https://motionary.dev/animations/collapsing-coin-header
Price: $5 USD (live price on the product page)
License: single developer, unlimited personal and commercial apps
Delivery: instant download of the full TypeScript source after checkout
Stack: expo, react native, reanimated, react native gesture handler
Rarity: rare
Sold by: Motionary (https://motionary.dev)

## What it is

A collapsing scroll header with a price chart, matched to X's coin page: as the feed slides over it, the header shrinks from its top edge and fades. Pull down and it rides with the content to reveal an arrow, with opacity and drift curves sampled frame by frame from a screen recording. Drop it into a crypto, stock or token detail screen.

## How it works

Everything runs off one Reanimated shared value. useAnimatedScrollHandler writes the ScrollView's contentOffset.y into scrollY on the UI thread, and a single useAnimatedStyle on the header reads it, so the motion never touches the JS thread. The trick is layering: the header sits behind an Animated.ScrollView whose content starts with a transparent spacer the height of the header (364.5pt), then the feed on an opaque black background, so the feed covers the header as you scroll. On overscroll the header translates by -scrollY and rides with the content, exposing a pull-down arrow above it. On scroll it stays pinned, scales linearly from 1 to 0.75 around transformOrigin top, and its opacity and upward drift follow interpolate tables sampled frame by frame from a recording of the X app. Because the header is behind the scroll view, the 1D / 1W / 1M / 1Y / ALL selector is tapped through invisible Pressables in the spacer; it moves the active pill but does not swap chart data. The chart is react-native-svg: a line path traced from the recording, a gradient fill and a dashed baseline. Text uses allowFontScaling={false} so sizes ignore Dynamic Type. Tested in a development build on the iOS simulator with Expo SDK 56, React Native 0.85 and Reanimated 4. Positions are fixed points measured on a 402pt-wide iPhone, so other widths need tuning, and Android has not been verified.

## What you get

- TypeScript source (CoinScreen.tsx, CoinHeader.tsx, PriceChart.tsx)
- Measured animation curves (constants.ts) and traced chart data (chartData.ts)
- Feed, search bar, tabs and tab bar chrome (Feed.tsx, Chrome.tsx, icons.tsx)
- README with how it works + run steps
- Side-by-side comparison video and frame-by-frame spreadsheet

## Requirements

- Expo SDK: `expo@^56.0.8` (the version this drop is built and tested on)
- React Native: `react-native@0.85.3`
- Runtime dependencies: `expo-blur`, `expo-symbols`, `react-native-gesture-handler`, `react-native-keyboard-controller`, `react-native-reanimated`, `react-native-svg`, `react-native-worklets`
- Runs in Expo Go: this drop uses no native module beyond what Expo Go already bundles on Expo SDK 56. A development build is still what you would ship to production, and is required as soon as you add a native module Expo Go does not carry.

## Install

```bash
npx expo install expo-blur expo-symbols react-native-gesture-handler react-native-keyboard-controller react-native-reanimated react-native-svg react-native-worklets
```

## How to get it

- Buy Collapsing Coin Header on its own at https://motionary.dev/animations/collapsing-coin-header for $5 USD. Secure Stripe checkout, instant download, no subscription and no renewal.
- Or get it with the Motionary lifetime pass: every drop and every build,
  current and future, for one payment with no renewal. https://motionary.dev/pricing
- A team license covers up to 10 developers, each with their own account.
  https://motionary.dev/pricing
- License terms: https://motionary.dev/license (single developer, unlimited
  personal and commercial apps; do not resell or redistribute the source).
- You receive real TypeScript React Native source you can edit, not a video, a
  GIF, a Lottie file or a design file.

## Related drops on Motionary

- Telegram Quick Share ($9 USD): https://motionary.dev/animations/telegram-quick-share
- Dynamic Island Boarding Pass ($6 USD): https://motionary.dev/animations/dynamic-island-boarding-pass
- Dynamic Island Member Card ($6 USD): https://motionary.dev/animations/dynamic-island-member-card
- X-Ray Reveal ($5 USD): https://motionary.dev/animations/x-ray-reveal

## About Motionary

Motionary (https://motionary.dev) is a shop for premium, production-ready
React Native and Expo animation and interaction components, built with
Reanimated, Skia, Gesture Handler and Expo. Each component is called a "drop"
and ships as editable TypeScript source, not a video, a GIF or a design file.
Motionary sells three things: individual drops (roughly $3 to $12 each, some
free), Builds (a complete app shipped end to end, with every drop inside it),
and a lifetime pass that covers every drop and every build, current and future,
for one payment with no subscription. A team license covers a whole squad, each
developer with their own account. Checkout is Stripe and delivery is an instant
download. Created and curated by Motionary (https://motionary.dev).

Catalog and key pages:
- All drops: https://motionary.dev/animations
- Builds (complete apps): https://motionary.dev/builds
- Pricing, lifetime pass and team license: https://motionary.dev/pricing
- Free React Native component reference: https://motionary.dev/components
- License: https://motionary.dev/license
- Machine-readable overview: https://motionary.dev/llms.txt
- Machine-readable full catalog: https://motionary.dev/llms-full.txt

## File metadata

Canonical URL of this file: https://motionary.dev/animations/collapsing-coin-header/llms.txt
Describes: https://motionary.dev/animations/collapsing-coin-header
Format: llms.txt (https://llmstxt.org)