# PatientCard.BirthDate.Text

Canonical page: https://docs.ovok.com/native-sdk/guide/components/patient/patient-birth-date/text

Date and age text display component with flexible formatting.

## Basic Example [#basic-example]

```typescript
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 [#props]

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

## Localization [#localization]

The component uses these translation keys:

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

## Styling [#styling]

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

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

### Date Calculation [#date-calculation]

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