Dating Chat

Recreate the "Dating Chat" screen in React Native using LumioUI.

Goal: Start a first conversation with a new match, opening on the photo they liked and their comment. Accepting their date idea turns the plan card into “It’s a date” and offers to share plans for safety. 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/dating-dating-chat
```

Or pull just the components: `npx @lumioui/cli add pro/audio-recorder avatar button icon keyboard-avoiding pro/lightbox pro/message-bubble pro/quick-replies pro/reaction-picker text typing-indicator pro/waveform`

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

### `audio-recorder` — Voice-note recorder controls: hold the mic for a live timer, slide left to throw the take away, or slide up to lock hands-free with a level meter. Your app does the recording.
- `<AudioRecorder>` ×1

### `avatar` — Circular profile image with fallback initials and a presence dot. An optional mode shows presence on the photo itself, bright when online and faded when away or offline.
- `<Avatar>` ×2

### `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

### `keyboard-avoiding` — Container that lifts your content above the on-screen keyboard on iOS, so fields and message bars never end up hidden behind it. On Android it leaves this to the system’s own resizing.
- `<KeyboardAvoiding>` ×1

### `lightbox` — Photo gallery where any tapped photo grows out of its exact tile into a full-screen viewer, then flies back into the tile of whichever photo is showing when you let it go.
- `<LightboxProvider>` ×1
- `<LightboxImage>` ×1

### `message-bubble` — Chat bubbles in six styles with grouping, swipe-to-reply and long-press actions. Drag the thread to reveal times, hold a message to react, and watch read ticks update in place.
- `<MessageBubble>` ×1

### `quick-replies` — Suggested reply chips that sit above a message composer. Tapping one lights it and can fly it into the conversation as your message, while the other suggestions fade away.
- `<QuickReplies>` ×1

### `reaction-picker` — Emoji reaction bar that opens on long press right where you touch. Slide across to grow each emoji, let go to pick it, and watch it fly into a chip with a live count. Tap yours to take it back.
- `<ReactionPicker>` ×1

### `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>` ×13

### `typing-indicator` — Chat typing indicator with three dots that brighten in turn. When the reply arrives, the bubble grows to fit it and the words appear in reading order.
- `<TypingIndicator>` ×1

### `waveform` — Audio scrubber that shows playback as a filling waveform. Bars near the playhead grow and brighten as you drag, and chapter marks appear as small gaps in the wave.
- `<Waveform>` ×1

## 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/dating/dating-chat.tsx` exporting DatingChatScreen. 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/dating-dating-chat
```

The source lands at `screens/dating/dating-chat.tsx`.

Screen: https://lumioui.com/screens/dating-dating-chat