298 Services
Mixed finishes

Booking Review

Services Pro

Review a home-service booking laid out as a numbered work order: when, how to get in, notes and the price. Slide to book and the whole order folds into a single calendar page.

More in Services

View all 9

Agent prompt

Paste into Claude Code, Cursor or Devin to rebuild this screen.
Recreate the "Booking Review" screen in React Native using LumioUI.

Goal: Review a home-service booking laid out as a numbered work order: when, how to get in, notes and the price. Slide to book and the whole order folds into a single calendar page. 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/services-booking-review
```

Or pull just the components: `npx @lumioui/cli add avatar pro/countdown icon pro/slide-to-confirm 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

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

### `countdown` — Live countdown with rolling digits, inline or as blocks that brighten through the final ten seconds. At zero it can celebrate and show your result, or quietly fade if time ran out.
- `<Countdown>` ×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>` ×4

### `slide-to-confirm` — Slide-to-confirm control for payments and other deliberate actions. The thumb follows your finger, shows progress while the action runs and ends with a check; a press-and-hold mode is included.
- `<SlideToConfirm>` ×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>` ×26

## 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/services/booking-review.tsx` exporting BookingReviewScreen. 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/services-booking-review
```

The source lands at `screens/services/booking-review.tsx`.

Screen: https://lumioui.com/screens/services-booking-review