PatientCard

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 and accessibility features.

Basic Example

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

Name	Type	Required	Default	Description
style	StyleProp<ViewStyle>	-	-	Custom styles for the card container
testID	string	-	-	Test identifier for the component
children	React.ReactNode	-	-	Patient information components to display
onPress	() => void	-	-	Callback when card is pressed
disabled	boolean	-	false	Whether the card is disabled

Inherits all props from TouchableOpacityProps

Compound Components

• PatientCard.Name - Patient name display component
• PatientCard.Gender - Gender indicator with visual styling
• PatientCard.BirthDate - Birth date and age display container
• PatientCard.Meta - Metadata container for additional patient info

Theme Integration

• Automatically applies theme colors for surface, borders, and shadows
• Respects theme spacing and border radius multipliers
• Supports both light and dark theme variations

Styling

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)