# Measurement

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

The measurement module provides a `FlashList` wrapper, a default measurement row,
and a date-range control. The SDK does not fetch, filter, or paginate measurements;
the app supplies data and decides how to query it.

Exports are `MeasurementList`, `MeasurementList.Item`, and
`MeasurementList.DateRange`. The module is available from `@ovok/native` and
`@ovok/native/measurement`.

## Compose a measurement screen [#compose-a-measurement-screen]

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

export function MeasurementsScreen({ measurements, setRange }) {
  const theme = useAppTheme();

  return (
    <>
      <MeasurementList.DateRange
        startDate={"2026-01-01T00:00:00.000Z"}
        variant="month"
        onDateChange={setRange}
      />
      <MeasurementList
        data={measurements}
        keyExtractor={(item) => item.id}
        contentContainerStyle={{ padding: theme.spacing(4) }}
        onItemPress={(item) => openMeasurement(item)}
      />
    </>
  );
}
```

`MeasurementList` accepts `FlashListProps<T>` except `renderItem`, plus
`onItemPress(item, index)`. The default row expects `data` with
`{ value: string; unit: string; date: string }`; additional fields can be carried by
the generic item type. The list forwards item props to `MeasurementList.Item`, so
`badge`, touchable props, and `testID` can be supplied on each item.

When a different row is needed, render `MeasurementList.Item` yourself or use a
separate `FlashList`; `MeasurementList` intentionally owns its default row renderer.
The forwarded ref is a `FlashListRef<T>` and can be used by the host for scrolling.

## Date ranges [#date-ranges]

`MeasurementList.DateRange` accepts a required ISO-compatible `startDate` and one of
`week`, `month`, or `year`. It renders previous/next controls and calls
`onDateChange({ startDate, endDate })` with ISO strings when a control is pressed.
`disabledPrevious` and `disabledNext` prevent the corresponding action. The range is
calculated relative to the supplied start date; `month` and `year` do not normalize to
the first day of a calendar month or year. Changing `variant` also emits the current
start date with the new range.