MeasurementList

A high-performance list component built on FlashList for displaying healthcare measurement data. Provides default measurement item rendering with customizable interactions and automatic layout animations.

Basic Example

import { MeasurementList } from "@ovok/native";
import * as React from "react";

const data = [
  { value: "120/80", unit: "mmHg", date: "2024-01-15T08:30:00Z" },
  { value: "118/78", unit: "mmHg", date: "2024-01-14T08:30:00Z" },
  { value: "125/82", unit: "mmHg", date: "2024-01-13T08:30:00Z" },
  { value: "125/82", unit: "mmHg", date: "2024-01-12T08:30:00Z" },
  { value: "125/82", unit: "mmHg", date: "2024-01-11T08:30:00Z" },
  { value: "125/82", unit: "mmHg", date: "2024-01-10T08:30:00Z" },
  { value: "125/82", unit: "mmHg", date: "2024-01-09T08:30:00Z" },
  { value: "125/82", unit: "mmHg", date: "2024-01-08T08:30:00Z" },
  { value: "125/82", unit: "mmHg", date: "2024-01-07T08:30:00Z" },
  { value: "125/82", unit: "mmHg", date: "2024-01-06T08:30:00Z" },
  { value: "125/82", unit: "mmHg", date: "2024-01-05T08:30:00Z" },
  { value: "125/82", unit: "mmHg", date: "2024-01-04T08:30:00Z" },
  { value: "125/82", unit: "mmHg", date: "2024-01-03T08:30:00Z" },
  { value: "125/82", unit: "mmHg", date: "2024-01-02T08:30:00Z" },
  { value: "125/82", unit: "mmHg", date: "2024-01-01T08:30:00Z" },
];

const BasicMeasurementList = () => {
  const [dateRange, setDateRange] = React.useState<{
    startDate: string;
    endDate: string;
  }>({
    startDate: "2024-01-13T08:30:00Z",
    endDate: "2024-01-15T08:30:00Z",
  });

  const filteredData = React.useMemo(
    () =>
      data.filter((item) => {
        const itemDate = new Date(item.date);
        return (
          itemDate >= new Date(dateRange.startDate) &&
          itemDate <= new Date(dateRange.endDate)
        );
      }),
    [dateRange]
  );

  return (
    <>
      <MeasurementList.DateRange
        startDate={dateRange.startDate}
        variant="week"
        onDateChange={setDateRange}
      />
      <MeasurementList data={filteredData} />
    </>
  );
};

export default BasicMeasurementList;

Props

Name	Type	Required	Default	Description
data	TData[]	✓	-	Array of measurement data items
onItemPress	(item: TData, index: number) => void	-	-	Callback when measurement item is pressed
estimatedItemSize	number	-	Auto-calculated	Estimated height of each measurement item

Inherits all props from FlashListProps except renderItem

Compound Components

• MeasurementList.Item - Individual measurement display component
• MeasurementList.DateRange - Date navigation and filtering controls

Component Behavior

Default Rendering

• Automatically renders measurement items using MeasurementList.Item
• Applies consistent spacing and styling
• Handles press interactions with optional callbacks
• Provides smooth scrolling performance

Layout Animations

• Integrates layout animations for data changes
• Prepares FlashList for smooth transitions
• Optimizes rendering when data updates

Performance Features

• Built on FlashList for 60fps scrolling
• Efficient memory usage for large datasets
• Automatic viewport management and recycling
• Optimized for healthcare measurement lists