UI components

Nabla React Native Scheduling UI components

Integrate the NablaAppointmentListView

The standalone NablaAppointmentListView component lists the scheduled and past appointments along with a CTA to schedule a new one.

Appointments starting in less than 10 minutes are considered imminent and cannot be canceled by Patients anymore.

Imminent appointments will show a button to join the associated video call.

Simply include it in your layout:

export default function App() {
  return (
    // ...
    <NablaAppointmentListView
      onAppointmentSelected={(apppointmentId) => {
        NablaSchedulingUI.navigateToAppointmentDetailScreen(appointmentId);
      }}
      style={{ flex: 1 }}
    />
    // ...
  );
}

📘

The onAppointmentSelected callback will only be used on iOS and the navigation will work as expected on Android.

Schedule a new appointment

Patients can schedule a new appointment on a screen that can either be opened programmatically from your own app's code using NablaSchedulingUI.navigateToScheduleAppointmentScreen() or by clicking on the CTA in NablaAppointmentListView.

They will be invited to choose a category, then an available time slot, and finally confirm and schedule.