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
dateTimestring--ISO date string to format and display
formatstring-"dd MMMM yyyy, EEEE HH:mm"Date format pattern
styleStyleProp<TextStyle>--Custom text styles
childrenReact.ReactNode--Fallback content when no dateTime

Inherits all props from react-native-paper Text except children

Component Behavior​

Date Formatting​

  • Uses date-fns for reliable date formatting
  • Supports all date-fns format patterns
  • Handles invalid dates gracefully
  • Provides localized date display

Conditional Rendering​

  • Shows formatted date when dateTime is provided
  • Renders children content when dateTime is undefined
  • Returns null if no dateTime and no children