PatientList

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;

Props

Name	Type	Required	Default	Description
data	Patient[]	✓	-	Array of FHIR Patient resources
renderItem	ListRenderItem<Patient>	-	Default renderer	Custom item rendering function
onItemPress	(item: Patient, index: number) => void	-	-	Callback when patient is pressed
estimatedItemSize	number	-	120	Estimated height of each patient item

Inherits all props from FlashListProps except renderItem

Component Behavior

Default Rendering

• Automatically renders PatientCard with name, gender, and birth date
• Uses conditional rendering for optional patient data
• Applies consistent spacing and styling
• Provides item separators with theme-based spacing

Performance Optimization

• Built on FlashList for 60fps scrolling
• Efficient memory usage for large patient datasets
• Optimized for healthcare directories with hundreds of patients
• Automatic viewport management and recycling

FHIR Integration

• Direct compatibility with @medplum/fhirtypes Patient resources
• Handles optional FHIR fields gracefully
• Supports various patient data completeness levels

Styling

Theme Colors Used

• theme.spacing(4) - Content container padding (16px default)
• theme.spacing(3) - Item separator height (12px default)