# PatientCard

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

A touchable card container component designed for displaying patient information in healthcare applications. Built with compound architecture to provide flexible composition of patient data elements with consistent Material Design 3 styling; add accessibility semantics through the touchable props in the host app.

## Basic Example [#basic-example]

```tsx
import { PatientCard } from "@ovok/native";
import * as React from "react";
import { Text } from "react-native-paper";

const patient = {
  resourceType: "Patient",
  name: [{ given: ["John"], family: "Doe" }],
  gender: "male" as const,
  birthDate: "1990-01-01",
  address: [
    {
      line: ["123 Main St"],
      city: "Anytown",
      state: "CA",
      postalCode: "12345",
    },
  ],
  telecom: [{ system: "email", value: "john.doe@example.com" }],
  photo: [{ url: "https://example.com/photo.jpg" }],
  identifier: [
    { system: "https://example.com/identifier", value: "1234567890" },
  ],
  active: true,
};

const TermsScreen = () => {
  const handlePress = () => {
    console.log("Patient card pressed");
  };

  return (
    <PatientCard onPress={handlePress}>
      <PatientCard.Name name={patient.name} />
      <PatientCard.Gender gender={patient.gender} />
      <PatientCard.BirthDate>
        <PatientCard.BirthDate.Icon />
        <PatientCard.BirthDate.Text
          birthDate={patient.birthDate}
          variant="both"
        />
      </PatientCard.BirthDate>

      <PatientCard.Meta>
        <Text>Any kind of data 1</Text>
        <Text>Any kind of data 2</Text>
        <Text>Any kind of data 3</Text>
      </PatientCard.Meta>
    </PatientCard>
  );
};

export default TermsScreen;
```

## Props [#props]

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

## Styling [#styling]

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

- `theme.colors.surface` - Card background color
- `theme.colors.outlineVariant` - Card border color
- `theme.colors.shadow` - Card shadow color
- `theme.spacing(5)` - Card padding (20px default)
- `theme.spacing(3)` - Internal gap between elements (12px default)
- `theme.spacing(20)` - Minimum card height (80px default)
- `theme.borderRadius(4)` - Card corner radius (16px default)