Driver Arriving
Ride Pro
Watch your driver cross the map to your curb with a big minute countdown. On arrival the headlights flash toward you, the plate lights up and the free waiting time starts to drain.
More in Ride
View all 14Agent prompt
Paste into Claude Code, Cursor or Devin to rebuild this screen.
Recreate the "Driver Arriving" screen in React Native using LumioUI.
Goal: Watch your driver cross the map to your curb with a big minute countdown. On arrival the headlights flash toward you, the plate lights up and the free waiting time starts to drain. 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/ride-driver-arriving
```
Or pull just the components: `npx @lumioui/cli add button pro/driver-card icon pro/map-sheet pro/map-view separator 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
### `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>` ×2
### `driver-card` — Driver or courier card with licence plate, a drawn car in its real colour, photo, rating, ride PIN and message or call buttons. On arrival it highlights the plate and tells riders what to look for.
- `<DriverCard>` ×1 — top-down one, so the vehicle reads as words under the plate.
### `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>` ×2
### `map-sheet` — Bottom panel that stays on screen over a map, resting at peek, half and full heights. A flick snaps it to the right stop, and the map dims as the panel rises.
- `<MapSheet>` ×1 — detents, so that inset is taken back out here.
### `map-view` — Calm vector city map with no maps SDK: pickup, dropoff and price pins, a route that draws itself, and a car that drives along it. Nearby cars appear and fade out as they come and go.
- `<MapView>` ×1
### `separator` — Thin divider line, horizontal or vertical. It can draw itself in as a page builds, or show a perforated tear line for tickets and receipts.
- `<Separator>` ×3
### `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>` ×10
## 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/ride/driver-arriving.tsx` exporting DriverArrivingScreen. 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/ride-driver-arriving
```
The source lands at `screens/ride/driver-arriving.tsx`.
Screen: https://lumioui.com/screens/ride-driver-arriving