PatientCard.BirthDate.Text

Date and age text display component with flexible formatting.

Basic ExampleCopy Anchor Link

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

const birthDate = "1990-01-01";

const ShowAgeOnly = () => (
  <PatientCard.BirthDate.Text birthDate={birthDate} variant="age" />
);

export default ShowAgeOnly;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/patient API reference.

LocalizationCopy Anchor Link

The component uses these translation keys:

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

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

• theme.colors.onSurfaceVariant - Text color
• theme.fonts.bodyMedium - Text typography

Date CalculationCopy Anchor Link

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