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 ExampleCopy Anchor Link

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

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

export default BasicTimestamp;

PropsCopy Anchor Link

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

Component BehaviorCopy Anchor Link

Date FormattingCopy Anchor Link

• 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 RenderingCopy Anchor Link

• 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>.