Appointments screen

Installation

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

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

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

Usage

import { router, Stack } from "expo-router";
import { AppointmentsScreen } from "@/components/goodui-native/appointments-screen/appointments-screen";
import { api } from "@/lib/api";
import { useAppointments } from "@/lib/booking"; // your data, Appointment[]

export default function AppointmentsRoute() {
  const { data, refresh } = useAppointments();
  return (
    <>
      <Stack.Screen options={{ headerShown: false }} />
      <AppointmentsScreen
        appointments={data}
        onOpen={(a) => router.push({ pathname: "/appointments/[id]", params: { id: a.id } })}
        onReschedule={(a) => router.push({ pathname: "/book/time", params: { reschedule: a.id } })}
        onCancel={(a) => api.cancel(a.id).then(refresh)}
        onBookAgain={(a) => router.push({ pathname: "/book", params: { again: a.id } })}
        onBook={() => router.push("/book")}
      />
    </>
  );
}

When to use

Examples

<AppointmentsScreen />

<AppointmentsScreen appointments={[]} onBook={() => router.push("/book")} />

API reference

Motion and haptics

• •Cards follow the finger and unfold Cancel and Reschedule in proportion to the drag (SwipeActions).
• •After a confirmed cancellation the card fades out and the cards below slide up into its place; the Upcoming count badge updates.
• •Empty states draw their line art in.
• •Reduced motion: cards below jump into place instead of sliding; the components inside follow their own reduced-motion rules.

• •Haptic: tap when a swipe action runs (SwipeActions)
• •Haptic: select when the tab changes (TopTabs)
• •Haptic: success or error when the cancellation settles (AlertDialog)

• •Upcoming and Past are derived with useMemo from one list; a page mounts only when its tab is first shown (TopTabs lazy).
• •For hundreds of appointments, page the data from your API; each page is a ScrollView.

Accessibility

• •Tabs are the kit's TopTabs (tablist with selected state and a count on Upcoming).
• •Each card is one button: on native it reads as a sentence (services, day, time, professional, status) and offers Reschedule and Cancel as accessibility actions; the web names it from its text and opens it with Enter or Space.
• •Cancelling always asks first in an AlertDialog that names the visit and the free cancellation window or the late fee.
• •A line under each list says that cards can be swiped, so the actions are discoverable.

Notes for AI

Related