# Observation detail screens

Canonical page: https://docs.ovok.com/native-sdk/guide/modules/observation-detail

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

```tsx
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 [#references]

- [ObservationDetail](/native-sdk/guide/components/observation-detail/observation-detail/)
- [Rows, text, date, resource, and photo components](/native-sdk/guide/components/observation-detail/)
- [Observation detail component index](/native-sdk/guide/components/observation-detail/)

## API reference [#api-reference]

Every export of `@ovok/native/observation-detail`, with signatures, props and types, is in the [`observation-detail` API reference](/native-sdk/reference/observation-detail).