Booking confirm screen

Installation

$ npx shadcn@latest add @goodui-native-pro/booking-confirm-screen

Then run npx expo install --fix so react-native-reanimated match your Expo SDK. Files land in components/goodui-native/booking-confirm-screen.

Pro screens install from the license-gated @goodui-native-pro registry. Setup: Pro access.

Usage

import { router, Stack } from "expo-router";
import { BookingConfirmScreen } from "@/components/goodui-native/booking-confirm-screen/booking-confirm-screen";
import { api } from "@/lib/api";
import { addToCalendar } from "@/lib/calendar"; // for example with expo-calendar
import { useBookingDraft, useSession } from "@/lib/booking";

export default function ConfirmRoute() {
  const draft = useBookingDraft();
  const { user } = useSession();
  return (
    <>
      <Stack.Screen options={{ headerShown: false }} />
      <BookingConfirmScreen
        business={draft.business}
        items={draft.items}
        staff={draft.staff}
        start={draft.start}
        client={{ name: user?.name, email: user?.email }}
        onBack={() => router.back()}
        onEdit={() => router.back()}
        onConfirm={(details) => api.book({ ...draft.toRequest(), client: details })} // resolves with { reference }
        onAddToCalendar={(appointment) => addToCalendar(appointment)}
        onDone={() => router.dismissAll()}
      />
    </>
  );
}

When to use

Examples

<BookingConfirmScreen />

<BookingConfirmScreen confirmMode="button" requirePolicy={false} onConfirm={book} onDone={close} />

API reference

Motion and haptics

• •The slide follows the finger 1:1 and spins while onConfirm runs; a rejection shakes it with the message and it springs back.
• •On success the slider shows its check, then the screen crossfades to a success check that springs in, draws its mark and bursts confetti (the one bouncy moment of the flow).
• •Reduced motion: the slider and the check follow their own reduced-motion rules (the check fades in complete, confetti shows a static sparkle), the screens crossfade.

• •Haptic: select at the slider's point of no return, confirm or error when the booking settles (SwipeToConfirm)
• •Haptic: celebrate as the success check lands with its confetti (SuccessCheck)
• •Haptic: error when a field error appears (TextField)

• •Validation is a pure function of the field values; nothing re-renders per keystroke beyond the field itself and its error line.
• •On Android the keyboard height pads the scroll view; on iOS the scroll view adjusts its own inset. The bottom bar steps aside while the keyboard is up.

Accessibility

• •Fields are TextFields with labels, autocomplete hints and errors that are announced; Next on the keyboard moves through name, email, phone and notes.
• •Errors show only after the first attempt and then follow the typing. A failed attempt scrolls the form into view.
• •The policy is a checkbox that turns red with a written reason when it is required and unticked.
• •The slider is the kit's SwipeToConfirm: a button for screen readers (activating it confirms) with a hint naming the day and time; confirmMode='button' gives a plain button.
• •The success screen's check announces its title; the reference and the confirmation email are text.

Notes for AI

Related