Skip to main content

Measurement lists

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.

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​