Book and Manage Dermatology Appointments in SkinFirts

SkinFirts lets users book a dermatology appointment directly from a doctor’s profile page. The booking flow spans three screens — calendar selection, time slot and patient detail entry, and a final review — before the appointment is confirmed. After booking, the Appointments screen provides a three-tab view for tracking every appointment across its lifecycle: upcoming, complete, or cancelled.

Booking flow

Open the doctor's profile and tap Schedule

From any doctor card, tap Info to open the DoctorInfo screen. The screen opens in Info mode showing the doctor’s profile, career path, and highlights. Tap the Schedule button (calendar icon) in the profile card to switch the screen to calendar mode, which renders the ScheduleCalendar component.

Select a date from the calendar

ScheduleCalendar accepts a single onDateSelect prop and uses react-native-calendars internally. Today is marked as selected by default. Sundays and any already-booked dates are disabled and cannot be tapped. Past dates are also blocked via the minDate prop. Selecting an available date calls:

// src/components/schedules/ScheduleCalendar.jsx — inside DoctorInfo
<ScheduleCalendar
  onDateSelect={(dateString) => {
    navigation.navigate('Schedule', { date: dateString, data: item })
  }}
/>

This navigates to the Schedule screen with the ISO date string and the full doctor object.

Select a time slot and fill in patient details

The Schedule screen is split into two sections rendered inside a ScrollView:Time slot picker (AppointmentTimeSlots) — accepts date (the selected ISO date string) and onDateSelected (callback) as props. It shows a horizontal scrollable date strip for the entire current month (Sundays and past dates are greyed out) and a grid of 15 available time slots from 9:00 AM to 4:00 PM in 30-minute increments. Already-booked slots are disabled. Selecting a date and time fires onDateSelected with a structured payload:

{
  date: { year: number, month: number, day: number },
  day: string,   // short weekday, e.g. "Wed"
  time: string,  // e.g. "10:00 AM"
}

Patient details form — collects the information needed for the appointment. See Patient detail fields below.

Tap Book Appointment

The Book Appointment button is disabled while selectedDate is null. When tapped, it navigates to ScheduleDetail carrying three route params:

// src/screens/schedules/Schedule.jsx
navigation.navigate('ScheduleDetail', {
  data: data,               // full doctor object
  formData: formData,       // patient details
  selectedDate: selectedDate, // { date: { year, month, day }, day, time }
})

Review and confirm on ScheduleDetail

ScheduleDetail receives { data, formData, selectedDate } as route params and shows a summary of the appointment: the doctor’s mini-card, the formatted appointment date (e.g. July 15, 2025), the day and time, and all patient detail fields. Two action buttons are present:

Checkmark — calls bookTimeSlot(displayDate, timeLabel) to mark the slot as taken in the shared DisabledDates context, then navigates to the Doctors screen.
Close — calls navigation.goBack() to return to the Schedule screen.

Patient detail fields

The form on the Schedule screen collects the following fields, which are stored in a formData state object and passed through to ScheduleDetail:

Field	Type	Options / Notes
Booking for	Toggle pill	`Yourself` / `Another Person`
Full Name	Text input	Placeholder: `John Doe`
Age	Text input	Placeholder: `30`
Gender	Toggle pills	`Male` / `Female` / `Other`
Problem Description	Multiline text input	Max 140 characters

Appointment management

The Appointment screen (accessible from the bottom tab bar) lists all appointments grouped into three tabs. The page state is initialised to "" (an empty string), so no tab content is shown when the screen first opens — the user must tap one of the three buttons to activate a tab. Once a tab is selected, a useMemo derives the displayed list by filtering the full doctors array against the corresponding ID arrays stored on the user object:

// src/screens/appointments/Appointment.jsx
const [page, setPage] = useState("")

const appointments = useMemo(() => {
  let results = [...doctors]

  switch (page) {
    case 0:
      results = results.filter((d) => user.completeAppointments.includes(d.id)).reverse()
      break
    case 1:
      results = results.filter((d) => user.upcomingAppointments.includes(d.id))
      break
    case 2:
      results = results.filter((d) => user.cancelledAppointments.includes(d.id)).reverse()
      break
  }
  return results
}, [user, doctors, page])

The three tab buttons — Complete, Upcoming, and Cancelled — map to page values 0, 1, and 2 respectively.

Complete (tab 0)
Upcoming (tab 1)
Cancelled (tab 2)

Filters doctors whose id is in user.completeAppointments, reversed so the most recent appointment appears first.Actions available on each card:

Re-book — reserved for rebooking the same doctor.
Add Review — navigates to the ReviewAppointment screen, passing the doctor object as route.params.data.

Filters doctors whose id is in user.upcomingAppointments. Each card shows the doctor’s photo, name, department, rating, and an availability excerpt.Actions available on each card:

Details — reserved for a details view.
Checkmark — calls handleComplete(item.id), which removes the ID from upcomingAppointments and prepends it to completeAppointments via editUserDetails.
Close — navigates to CancelAppointment and passes an onPress callback. Confirming on that screen calls handleCancel(item.id), which removes the ID from upcomingAppointments and prepends it to cancelledAppointments via editUserDetails, then calls navigation.goBack().

Filters doctors whose id is in user.cancelledAppointments, reversed so the most recently cancelled appointment appears first.Actions available on each card:

Add Review — navigates to the ReviewAppointment screen, passing the doctor object as route.params.data.

CancelAppointment screen

CancelAppointment presents a radio-button list of four pre-defined cancellation reasons:

Rescheduling
Weather Conditions
Unexpected Work
Others

A freeform text input (max 140 characters) is also provided for additional context. The screen receives an onPress callback via route.params.onPress, set by UpcomingAppointment to execute the actual ID-array update on the user record. Tapping the Cancel Appointment button fires that callback.

ReviewAppointment screen

ReviewAppointment receives the doctor object via route.params.data and displays the doctor’s photo, name, department, and a star rating row rendered from data.ratings (full, half, and outline stars using Ionicons). A freeform text input (max 240 characters) allows the user to write a review. A Cancel Appointment button is rendered at the bottom of the screen.

Appointment records are not stored as independent objects. Instead, the user object in MockAPI holds three arrays — completeAppointments, upcomingAppointments, and cancelledAppointments — each containing doctor IDs as strings. Moving an appointment between states means patching those arrays on the user record via editUserDetails. When a new account is created, createUser automatically seeds these arrays with pre-defined doctor IDs for demonstration purposes.

Get Started

Core Features

Architecture

UI & Theming

Book and Manage Dermatology Appointments in SkinFirts

Booking flow

Patient detail fields

Appointment management

CancelAppointment screen

ReviewAppointment screen

Build docs developers (and LLMs) love

Get Started

Core Features

Architecture

UI & Theming

Documentation Index

​Booking flow

​Patient detail fields

​Appointment management

​CancelAppointment screen

​ReviewAppointment screen

Build docs developers (and LLMs) love

Booking flow

Patient detail fields

Appointment management

CancelAppointment screen

ReviewAppointment screen