Booking confirmation with summary
import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Icon, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { Mount, Press, World } from "../shared";
export interface BookingConfirmScreenProps {
place?: string;
dates?: string;
guests?: string;
confirmation?: string;
onViewTrip?: () => void;
onShare?: () => void;
onHome?: () => void;
}
/** Booking confirm — green check + booking summary + next steps. */
export function BookingConfirmScreen({
place = "Memmo Alfama",
dates = "Oct 4 – Oct 8 · 4 nights",
guests = "2 guests",
confirmation = "LIS-4N8K-2210",
onViewTrip,
onShare,
onHome,
}: BookingConfirmScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
return (
<World primary="#65A30D">
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top", "bottom"]}>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{
flexGrow: 1,
justifyContent: "space-between",
paddingBottom: insets.bottom + 24,
}}
>
{/* Confirmation hero — the moment's pay-off. */}
<Mount className="items-center pt-10">
<View className="h-20 w-20 items-center justify-center rounded-full bg-success">
<Icon name="check" size="xl" color="primaryForeground" />
</View>
<Text variant="h3" className="mt-4">
You're booked
</Text>
<Text className="mt-1 text-sm text-muted-foreground">
{place}
</Text>
<Text className="mt-1 text-xs text-muted-foreground">
Confirmation {confirmation}
</Text>
{/* Post-booking nudge — confirms answer "what next". */}
<Text className="mt-2 text-[11px] text-muted-foreground/80">
Trip itinerary emailed · free cancellation until Oct 2
</Text>
</Mount>
{/* Booking summary — Airbnb's label-first rows: small caps label,
value, inline action. No icon tiles. */}
<Mount delay={60} className="mx-4 mt-6">
{[
{ label: "Dates", value: dates, action: "Change" },
{ label: "Guests", value: guests, action: "Change" },
{ label: "Check-in", value: "After 3:00 PM" },
].map((r, i) => (
<View
key={r.label}
className={`flex-row items-baseline justify-between py-3.5 ${i > 0 ? "border-t border-border" : ""}`}
>
<View>
<Text className="text-[11px] font-semibold uppercase tracking-widest text-muted-foreground">
{r.label}
</Text>
<Text className="mt-0.5 text-[15px] font-medium">{r.value}</Text>
</View>
{r.action ? (
<Press
haptic="light"
onPress={() => {}}
accessibilityLabel={`${r.action} ${r.label.toLowerCase()}`}
className="rounded-full bg-muted px-3 py-1.5"
>
<Text className="text-xs font-semibold">{r.action}</Text>
</Press>
) : null}
</View>
))}
</Mount>
{/* Actions — view trip primary, share secondary, home ghost. */}
<Mount delay={120} className="gap-2 px-4 pt-6">
<Button
haptic="light"
onPress={() => {
haptics.light();
onViewTrip?.();
}}
accessibilityLabel="View trip"
tone="inverse" className="bg-[#1B1B26] w-full"
>
View trip
</Button>
<Button
variant="secondary"
haptic="light"
onPress={() => {
haptics.light();
onShare?.();
}}
accessibilityLabel="Share booking"
className="w-full"
>
<Icon name="share" size="sm" color="foreground" />
<Text className="ml-1.5">Share</Text>
</Button>
<Button
variant="ghost"
haptic="light"
onPress={() => {
haptics.light();
onHome?.();
}}
accessibilityLabel="Back to home"
className="w-full"
>
Back to home
</Button>
</Mount>
</ScrollView>
</SafeAreaView>
</World>
);
}
BookingConfirmScreen.displayName = "BookingConfirmScreen";
Recreate the "Booking Confirm Screen" screen in React Native using LumioUI.
Goal: Booking confirmation with summary 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 add travel-booking-confirm
```
Or pull just the components: `npx lumioui add button icon list text`
Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-reanimated@*
- react-native-svg@*
- nativewind@*
Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.
## Components — how, where, when
### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×3
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×2
### `list` — Settings-style rows with separators and press feedback.
- imported but not rendered directly — likely used through a sibling or as a utility
### `text` — Themed type scale from caption to display.
- `<Text>` ×8
## 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/travel/booking-confirm.tsx` exporting BookingConfirmScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.
## Reference implementation
The LumioUI source for this screen — reproduce it faithfully:
```tsx
import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Icon, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { Mount, Press, World } from "../shared";
export interface BookingConfirmScreenProps {
place?: string;
dates?: string;
guests?: string;
confirmation?: string;
onViewTrip?: () => void;
onShare?: () => void;
onHome?: () => void;
}
/** Booking confirm — green check + booking summary + next steps. */
export function BookingConfirmScreen({
place = "Memmo Alfama",
dates = "Oct 4 – Oct 8 · 4 nights",
guests = "2 guests",
confirmation = "LIS-4N8K-2210",
onViewTrip,
onShare,
onHome,
}: BookingConfirmScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
return (
<World primary="#65A30D">
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top", "bottom"]}>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{
flexGrow: 1,
justifyContent: "space-between",
paddingBottom: insets.bottom + 24,
}}
>
{/* Confirmation hero — the moment's pay-off. */}
<Mount className="items-center pt-10">
<View className="h-20 w-20 items-center justify-center rounded-full bg-success">
<Icon name="check" size="xl" color="primaryForeground" />
</View>
<Text variant="h3" className="mt-4">
You're booked
</Text>
<Text className="mt-1 text-sm text-muted-foreground">
{place}
</Text>
<Text className="mt-1 text-xs text-muted-foreground">
Confirmation {confirmation}
</Text>
{/* Post-booking nudge — confirms answer "what next". */}
<Text className="mt-2 text-[11px] text-muted-foreground/80">
Trip itinerary emailed · free cancellation until Oct 2
</Text>
</Mount>
{/* Booking summary — Airbnb's label-first rows: small caps label,
value, inline action. No icon tiles. */}
<Mount delay={60} className="mx-4 mt-6">
{[
{ label: "Dates", value: dates, action: "Change" },
{ label: "Guests", value: guests, action: "Change" },
{ label: "Check-in", value: "After 3:00 PM" },
].map((r, i) => (
<View
key={r.label}
className={`flex-row items-baseline justify-between py-3.5 ${i > 0 ? "border-t border-border" : ""}`}
>
<View>
<Text className="text-[11px] font-semibold uppercase tracking-widest text-muted-foreground">
{r.label}
</Text>
<Text className="mt-0.5 text-[15px] font-medium">{r.value}</Text>
</View>
{r.action ? (
<Press
haptic="light"
onPress={() => {}}
accessibilityLabel={`${r.action} ${r.label.toLowerCase()}`}
className="rounded-full bg-muted px-3 py-1.5"
>
<Text className="text-xs font-semibold">{r.action}</Text>
</Press>
) : null}
</View>
))}
</Mount>
{/* Actions — view trip primary, share secondary, home ghost. */}
<Mount delay={120} className="gap-2 px-4 pt-6">
<Button
haptic="light"
onPress={() => {
haptics.light();
onViewTrip?.();
}}
accessibilityLabel="View trip"
tone="inverse" className="bg-[#1B1B26] w-full"
>
View trip
</Button>
<Button
variant="secondary"
haptic="light"
onPress={() => {
haptics.light();
onShare?.();
}}
accessibilityLabel="Share booking"
className="w-full"
>
<Icon name="share" size="sm" color="foreground" />
<Text className="ml-1.5">Share</Text>
</Button>
<Button
variant="ghost"
haptic="light"
onPress={() => {
haptics.light();
onHome?.();
}}
accessibilityLabel="Back to home"
className="w-full"
>
Back to home
</Button>
</Mount>
</ScrollView>
</SafeAreaView>
</World>
);
}
BookingConfirmScreen.displayName = "BookingConfirmScreen";
```
Screen: https://lumioui.dev/screens/travel-booking-confirm