PatientCard.BirthDate.Text

Date and age text display component with flexible formatting.

Basic Example

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;

Props

Name	Type	Required	Default	Description
birthDate	string	✓	-	Birth date in ISO format
variant	"date" | "age" | "both"	-	"both"	Display format
dateFormat	string	-	"dd MMMM yyyy"	Date formatting pattern
style	StyleProp<TextStyle>	-	-	Custom text styles

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 - Text color
• 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