Skip to main content

MeasurementList.Item

A touchable measurement display component designed for healthcare data presentation. Shows measurement value, unit, and formatted timestamp with consistent styling and interactive feedback.

Basic Example​

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

const BasicMeasurementListItem = () => (
  <MeasurementList.Item data={{ value: "120/80", unit: "mmHg", date: "2024-01-15T08:30:00Z" }} />
);

export default BasicMeasurementListItem;

Props​

NameTypeRequiredDefaultDescription
dataMeasurementData✓-Measurement data to display
styleStyleProp<ViewStyle>--Custom container styles
testIDstring--Test identifier for component
onPress() => void--Callback when item is pressed

Inherits all props from TouchableOpacityProps

Data Structure​

interface MeasurementData {
  value: string; // Display value (e.g., "120/80", "72", "98.6")
  unit: string; // Unit of measurement (e.g., "mmHg", "bpm", "°F")
  date: string; // ISO date string for timestamp
}

Component Behavior​

Visual Design​

  • Material Design 3 card appearance with surface colors
  • Prominent value display with large, bold typography
  • Secondary unit and timestamp information
  • Touch feedback with opacity changes

Layout System​

  • Flexbox row layout with space-between alignment
  • Left side: Value and unit display
  • Right side: Formatted date and navigation arrow
  • Consistent padding and border radius from theme

Date Formatting​

  • Uses date-fns for reliable date formatting
  • Format: "HH:mm, dd.MM.yy" (e.g., "14:30, 15.01.24")
  • Automatic timezone handling

Styling​

Theme Colors Used​

  • theme.colors.surface - Card background color
  • theme.colors.primary - Value text color
  • theme.colors.onSurfaceDisabled - Unit and date text color
  • theme.spacing(4) - Card padding (16px default)
  • theme.borderRadius(4) - Card corner radius (16px default)

Typography​

  • Value: 24px, DMSans_700Bold font, primary color
  • Unit: 14px, DMSans_400Regular font, disabled color
  • Date: 12px, DMSans_400Regular font, disabled color