# Measurement lists

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

Use `MeasurementList` to render a collection of measurements with the SDK's row and
date-range primitives. The list is a UI layer, not a query client: your app decides
which observations to load, how to sort them, and what a selected range means.

```tsx
import { MeasurementList } from "@ovok/native/measurement";

<MeasurementList
  data={measurements}
  keyExtractor={(item) => item.id}
  onItemPress={(item) => openMeasurement(item)}
  ListHeaderComponent={
    <MeasurementList.DateRange
      startDate={range.startDate}
      variant="month"
      onDateChange={({ startDate, endDate }) => setRange({ startDate, endDate })}
    />
  }
/>
```

Fetch or derive the displayed observations when the range changes, and provide a
screen-level loading, empty, and error state. Keep clinical interpretation and
unit conversion in the data layer so the same rules apply to charts, cards, and
measurement detail screens.

## References [#references]

- [MeasurementList](/native-sdk/guide/components/measurement/measurement-list/)
- [MeasurementList.Item](/native-sdk/guide/components/measurement/measurement-list-item/)
- [MeasurementList.DateRange](/native-sdk/guide/components/measurement/date-range/)
- [Measurement component index](/native-sdk/guide/components/measurement/)

## API reference [#api-reference]

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