Skip to main content

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.

References​