Skip to main content

ObservationDetail.DateTime

A date and time display component with flexible formatting options and fallback content support. Designed for healthcare observation timestamps with localization and conditional rendering capabilities.

Basic Example​

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

const BasicTimestamp = () => (
  <ObservationDetail.DateTime dateTime="2024-01-15T10:30:00Z" />
);

export default BasicTimestamp;

Props​

NameTypeRequiredDefaultDescription
dateTimestringrequired when children is absent-ISO date string to format and display
formatstringonly with dateTime"dd MMMM yyyy, EEEE HH:mm"Date format pattern
styleStyleProp<TextStyle>--Custom text styles
childrenReact.ReactNode--Fallback content when no dateTime

The public type is based on Paper Text props, but the current renderer forwards only style and testID to the rendered text. dateTime and children are a discriminated union: provide a date, or provide fallback children.

Component Behavior​

Date Formatting​

  • Uses date-fns for reliable date formatting
  • Supports all date-fns format patterns
  • date-fns/format throws for an invalid date string; validate input before rendering
  • Provides localized date display

Conditional Rendering​

  • Shows formatted date when dateTime is provided
  • Renders children content when dateTime is omitted. The fallback is returned as a bare fragment, so a plain string must be wrapped in a text component by the host; otherwise React Native can reject the raw string outside <Text>.