GuidesComponents

Measurement

List and date-range primitives for measurement summaries

  • Stable unknown
  • Release candidate since 1.16.1-rc.3
  • Development since 1.16.1-dev.2111+9796905

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

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

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.

Last updated on

On this page