Quest Complete

Recreate the "Quest Complete" screen in React Native using LumioUI.

Goal: Level-up celebration on a full orange field: the new medal rises a notch with each reward as it stamps in and the streak grows. Claiming the XP fills the bar into the next level and unlocks its chest. Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.

## Setup

Fastest path — install the screen plus its component deps:

```bash
npx @lumioui/cli add pro/health-quest-complete
```

Or pull just the components: `npx @lumioui/cli add pro/achievement-badge animated-number button icon pro/streak-counter text`

Native packages:
- react-native-reanimated@*
- react-native-safe-area-context@*
- react-native-svg@*

Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.

## Components — how, where, when

### `achievement-badge` — Award medallion that shows progress while locked and its tier metal once earned. Unlocking closes the ring, fills the face and pops with a glow in its colour and a haptic. Tile, row and medal layouts.
- imported but not rendered directly — likely used through a sibling or as a utility

### `animated-number` — Number that moves to each new value as a calm count-up or a roll where only the changed digits turn, set in type or in dot-matrix LEDs whose dots switch on in place. Screen readers announce just the final value, not every step.
- `<AnimatedNumber>` ×1

### `button` — Pill button that presses down under your finger, in eight styles from solid to glass, with a built-in loading state that swaps in place while an action runs.
- `<Button>` ×1

### `icon` — Icon set drawn on one consistent grid, sized and coloured from your theme. The heart, star and bookmark can fill in place inside their outline, then fade back out.
- `<Icon>` ×6

### `streak-counter` — Streak counter with a friendly flame that grows with the streak, plus this week’s day dots. Extending the streak lights the flame up, and it rests grey until today’s goal is done.
- imported but not rendered directly — likely used through a sibling or as a utility

### `text` — Themed type scale from caption to display that follows light and dark mode. Includes a pull-quote style with an accent rule and a quieter dimmed tone for secondary text.
- `<Text>` ×15

## Conventions (non-negotiable)

- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.

## Deliverable

One file: `screens/health/quest-complete.tsx` exporting QuestCompleteScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.

## Reference implementation

This is a LumioUI Pro item: its source is not published in the docs. Install it with a Pro license key
(set `LUMIO_LICENSE_KEY`; keys are on lumioui.com/account) and read the installed file as the reference:

```bash
npx @lumioui/cli add pro/health-quest-complete
```

The source lands at `screens/health/quest-complete.tsx`.

Screen: https://lumioui.com/screens/health-quest-complete