High-performance patient directory component built on FlashList for efficient rendering of large patient datasets. Provides default patient card rendering with customizable item rendering and automatic spacing.

Basic Example

import { PatientList } from "@ovok/native";
import { Patient } from "@medplum/fhirtypes";
import * as React from "react";
import { Alert } from "react-native";

const patients: Patient[] = [
  {
    id: "1",
    name: [{ given: ["John"], family: "Doe" }],
    gender: "male",
    birthDate: "1990-01-01",
    resourceType: "Patient",
  },
  {
    id: "2",
    name: [{ given: ["Jane"], family: "Smith" }],
    gender: "female",
    birthDate: "1985-05-15",
    resourceType: "Patient",
  },
  {
    id: "3",
    name: [{ given: ["Jim"], family: "Beam" }],
    gender: "male",
    birthDate: "1978-09-22",
    resourceType: "Patient",
  },
];

const PatientDirectory = () => {
  const handlePatientPress = React.useCallback(
    (patient: Patient, index: number) => {
      Alert.alert(
        "Patient Selected",
        `Selected: ${patient.name?.[0]?.given?.join(" ")} ${
          patient.name?.[0]?.family
        }`
      );
    },
    []
  );

  return (
    <PatientList
      data={patients}
      onItemPress={handlePatientPress}
      testID="patient-directory"
    />
  );
};

export default PatientDirectory;