# PatientList

Canonical page: https://docs.ovok.com/native-sdk/guide/components/patient/patient-list

High-performance patient directory component built on [FlashList](https://shopify.github.io/flash-list/docs/usage) for efficient rendering of large patient datasets. Provides default patient card rendering with customizable item rendering and automatic spacing.

## Basic Example [#basic-example]

```typescript
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 [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/patient` API reference](/native-sdk/reference/patient).

## Component Behavior [#component-behavior]

### Default Rendering [#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 [#performance-optimization]

- Built on [FlashList](https://shopify.github.io/flash-list/docs/usage) 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 [#fhir-integration]

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

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

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