Observation detail screens

Use ObservationDetail to compose a readable detail screen from values your app has already loaded and interpreted. Its children cover common presentation needs such as date and time, labeled rows, text, resources, and photos. It is not a general FHIR renderer and does not retrieve an Observation.

import { ObservationDetail } from "@ovok/native/observation-detail";

<ObservationDetail>
  <ObservationDetail.DateTime dateTime={measurement.effectiveDateTime} />
  <ObservationDetail.DataContainer>
    <ObservationDetail.SingleCardDataRow
      label="Systolic (mmHg)"
      value={String(measurement.systolic)}
    />
  </ObservationDetail.DataContainer>
  <ObservationDetail.Resource title={measurement.deviceName} />
</ObservationDetail>

Normalize the resource before rendering: select the display fields, resolve units, and decide which attachments are safe to show. The app owns authorization, image loading, and fallback states. Use explicit labels and units so the detail remains understandable when values are viewed outside their original card.

ReferencesCopy Anchor Link

• ObservationDetail
• Rows, text, date, resource, and photo components
• Observation detail component index

API referenceCopy Anchor Link

Every export of @ovok/native/observation-detail, with signatures, props and types, is in the observation-detail API reference.