Booking details screen

Installation

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

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

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

Usage

import { router, Stack, useLocalSearchParams } from "expo-router";
import { Linking } from "react-native";
import { BookingDetailsScreen } from "@/components/goodui-native/booking-details-screen/booking-details-screen";
import { api } from "@/lib/api";
import { addToCalendar } from "@/lib/calendar";
import { useAppointment } from "@/lib/booking"; // your data, an Appointment

export default function AppointmentRoute() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const appointment = useAppointment(id);
  if (!appointment) return null;
  return (
    <>
      <Stack.Screen options={{ headerShown: false }} />
      <BookingDetailsScreen
        appointment={appointment}
        onBack={() => router.back()}
        onDirections={(a) => {
          const c = a.business.coordinates;
          Linking.openURL(c ? `https://maps.google.com/?daddr=${c.lat},${c.lng}` : `https://maps.google.com/?q=${encodeURIComponent(a.business.address)}`);
        }}
        onCall={(phone) => Linking.openURL(`tel:${phone.replace(/\s/g, "")}`)}
        onAddToCalendar={(a) => addToCalendar(a)}
        onReschedule={(a) => router.push({ pathname: "/book/time", params: { reschedule: a.id } })}
        onCancel={(a) => api.cancel(a.id)}
        onBookAgain={(a) => router.push({ pathname: "/book", params: { again: a.id } })}
      />
    </>
  );
}

When to use

Examples

<BookingDetailsScreen />

<BookingDetailsScreen appointment={appointment} mapImage={{ uri: staticMapUrl }} />

API reference

Motion and haptics

• •Hold to cancel fills like ink while held and draws a check; then the status badge turns to Cancelled with a fade and the actions give way to Book again.
• •The large title collapses into the bar on scroll; Add to calendar gathers into a spinner and opens into Added.
• •Reduced motion: the components follow their own reduced-motion rules; the status and the actions crossfade.

• •Haptic: select at each quarter of the hold, warning at its end, confirm when cancelled or error when onCancel rejects (HoldToConfirm)
• •Haptic: tap on buttons, then success or error for promises (Button)

• •Static content in one ScrollView; the drawn map is a single SVG with theme colors, no map SDK.

Accessibility

• •The day is a header; the large title collapses into the bar with a labelled back button (LargeTitleScrollView).
• •The map card is one image named after the address; the avatar is hidden because the name is written next to it.
• •Services are list rows with name, length and price; the total is its own row.
• •Hold to cancel is the kit's HoldToConfirm: a button with the policy as its hint, announced when done.

Notes for AI

Related