App Store card → article zoom (expo-router)

Three parts that only work as a set: a poster card, the zoom transition,
and the article screen it lands on. Working reference implementation:
mobile-app/src/components/chat/discover.tsx (card) and
mobile-app/src/app/(tabs)/chat/discover/[slug].tsx (destination), with the
tint library in mobile-app/src/lib/image-tint.ts.

Requirements

• expo-router above v55 (this repo runs ~57.0.4, SDK 57) — Link.AppleZoom
  / Link.AppleZoomTarget don't exist in older routers.
• expo-image — supplies the blurhash placeholder AND
  Image.generateBlurhashAsync for the tint.
• iOS 18+ for the zoom itself. Off iOS (and on older iOS) the components are
  a passthrough: the press degrades to a plain stack push. Ship it anyway —
  nothing crashes, Android just pushes.

The transition — rules that are load-bearing

<Link href={{ pathname: '/discover/[slug]', params: { slug } }} asChild>
  <Pressable onPress={() => Haptics.selectionAsync().catch(() => {})}>
    <Link.AppleZoom>
      <View>{/* the WHOLE card — image + caption — as ONE child */}</View>
    </Link.AppleZoom>
  </Pressable>
</Link>

1. <Link asChild> is required, not stylistic. The router threads the zoom
   through the HREF (it rewrites it with a source id the destination reads off
   its route params). router.push gets no zoom at all, and Link.AppleZoom
   throws without asChild.
2. Link.AppleZoom takes exactly ONE child — more than one warns and
   renders nothing. Wrap the whole card in a single view; the card is what
   expands.
3. Destination marks the landing rect with <Link.AppleZoomTarget> around
   its hero image — otherwise the card expands into the screen as a whole
   instead of the picture flying into place.
4. No press-scale wrapper on the card (no BouncyPressable): a press-shrink
   transform fights the zoom for the same frame — the zoom IS the feedback.
   A plain Pressable with a selection haptic is enough. (Radix Slot composes
   handlers, so onPress runs alongside the Link's navigation press.)
5. Build the card as a small copy of the destination — picture on top, text
   block below in the picture's own colour — so the zoom has something to land
   on and the colour continues across the transition.

The card (poster)

expo-image with the picture's own blurhash as placeholder (same crop, so one
blurs UP into the other), cross-dissolve transition, caption block filled with
the image's tint. Shadow on an outer wrapper; the card body uses
overflow: 'hidden' for its corner radius (a clipping view drops its own shadow
on iOS). Full code: REFERENCE.md.

The tint — one artefact, two jobs

A blurhash's first component (the DC term, base83 chars 2–6) is the image's
average sRGB colour — so one Image.generateBlurhashAsync(uri, [4, 3]) yields
the placeholder AND the palette. No native palette extractor, no second decode.

• Parse the DC term with a ~20-line base83 decode (REFERENCE.md).
• Mix the raw average 22% toward the page background (raw photo averages are
  washed mid-tones), then pick white / near-black text by sRGB luma > 0.6.
• Cache hashes in a module Map + AsyncStorage so the second launch blurs-up
  before the image downloads. A first sight can't be blurred (hashing needs
  pixels) — ship a build-time hash (seed) for bundled/known heroes.

The article screen

• Hero runs under the transparent header: contentInsetAdjustmentBehavior="never"
  on the ScrollView, Stack.Screen options={{ title: '' }} (the masthead below
  carries the headline; the bar keeps only chevron + menu).
• Hero wrapped in Link.AppleZoomTarget, same URI + same useImageTint call as
  the card — the hash is already in the session cache, so the colour is there on
  the first frame of the zoom.
• Tint the masthead only (kicker / title / standfirst). Body copy runs on the
  app's own page colours — three screens of text on an arbitrary photographic
  colour is illegible.
• Editorial type scale, one step up from UI type; lead paragraph opens with a
  bold foreground-coloured phrase via a nested <Text> so both weights share
  one flowing line box. Full code: REFERENCE.md.