PatientCard.BirthDate

A compound component for displaying patient birth date and age information with calendar icon support. Provides flexible date formatting and age calculation for healthcare applications.

Basic Example

import { PatientCard } from "@ovok/native";
import * as React from "react";

const birthDate = "1990-01-01";

const BasicAgeDisplay = () => (
  <PatientCard.BirthDate>
    <PatientCard.BirthDate.Icon />
    <PatientCard.BirthDate.Text birthDate={birthDate} variant="both" />
  </PatientCard.BirthDate>
);

export default BasicAgeDisplay;

Props

Name	Type	Required	Default	Description
children	React.ReactNode	-	-	Icon and text components
style	StyleProp<ViewStyle>	-	-	Custom styles for container
testID	string	-	-	Test identifier

Inherits all props from ViewProps

Compound Components

• PatientCard.BirthDate.Icon - Calendar icon component
• PatientCard.BirthDate.Text - Date and age text display component

Localization

The component uses these translation keys:

{
  "patient-card": {
    "age-years": "{{age}} years old",
    "birth-date-with-age": "{{date}} ({{age}} years old)"
  }
}

Styling

Theme Colors Used

• theme.colors.onSurfaceVariant - Icon and text color
• theme.spacing(1) - Gap between icon and text
• theme.fonts.bodyMedium - Text typography

Date Calculation

• Uses date-fns for reliable age calculation
• Handles timezone differences appropriately
• Supports various date format patterns
• Provides localized age display with translations