# ObservationDetail

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

A scrollable container component designed for displaying healthcare observation data with automatic safe area handling and theme-based spacing. Serves as the main container for compound observation detail components.

## Basic Example [#basic-example]

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

const mappedData = {
  effectiveDateTime: "2021-01-01",
  systolic: 120,
  diastolic: 80,
  heartRate: 70,
  deviceName: "Blood Pressure Monitor",
};

const MedicalObservation = () => {
  return (
    <ObservationDetail>
      <ObservationDetail.DateTime dateTime={mappedData.effectiveDateTime} />

      <ObservationDetail.DataContainer>
        <ObservationDetail.SingleCardDataRow
          label="Systolic (mmHg)"
          value={mappedData.systolic.toString()}
        />
        <ObservationDetail.SingleCardDataRow
          label="Diastolic (mmHg)"
          value={mappedData.diastolic.toString()}
        />
        <ObservationDetail.SingleCardDataRow
          label="Heart Rate (bpm)"
          value={mappedData.heartRate.toString()}
        />

        <ObservationDetail.Resource title={mappedData.deviceName} />
      </ObservationDetail.DataContainer>
    </ObservationDetail>
  );
};

export default MedicalObservation;
```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/observation-detail` API reference](/native-sdk/reference/observation-detail).

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

- `theme.spacing(4)` - Container padding (16px default)
- `theme.spacing(3)` - Gap between child elements (12px default)
- Safe area bottom inset - Additional bottom padding