Tile.MeasuredValue

Displays measurement results with a prominent value, unit label, and timestamp in a consistent format for healthcare data.

Quick ExampleCopy Anchor Link

import { Tile } from "@ovok/native";
import React from "react";

const MeasuredValueExample = () => {
  return (
    <Tile>
      <Tile.MeasuredValue
        value="120/80"
        unit="mmHg"
        time="15:34"
        testID="blood-pressure-value"
      />
    </Tile>
  );
};

export default MeasuredValueExample;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/tile API reference.

Component BehaviorCopy Anchor Link

The MeasuredValue component displays data in a structured layout:

1. Value and Unit Row: Value and unit are displayed side-by-side with baseline alignment
2. Value Prominence: Large, bold text for the measurement value (24px, primary color)
3. Unit Styling: Smaller, muted text for the unit (14px, disabled color)
4. Timestamp: Displayed below the value in smaller, muted text (12px, disabled color)
5. Typography: Uses custom DMSans font family for enhanced readability

Layout StructureCopy Anchor Link

┌─────────────────────────┐
│ [VALUE] [UNIT]          │  ← Baseline aligned
│ [TIMESTAMP]             │  ← Below value/unit
└─────────────────────────┘

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

• theme.colors.primary - Value text color for prominence
• theme.colors.onSurfaceDisabled - Unit and timestamp text color for subtle appearance
• theme.spacing(1) - Gap between value and unit

Typography SpecificationsCopy Anchor Link

Value TextCopy Anchor Link

• Font Family: DMSans_700Bold
• Font Size: 24px
• Color: theme.colors.primary
• Weight: Bold (700)

Unit TextCopy Anchor Link

• Font Family: DMSans_400Regular
• Font Size: 14px
• Color: theme.colors.onSurfaceDisabled
• Weight: Regular (400)

Time TextCopy Anchor Link

• Font Family: DMSans_400Regular
• Font Size: 12px
• Color: theme.colors.onSurfaceDisabled
• Weight: Regular (400)

Related ComponentsCopy Anchor Link

• Tile.NoMeasuredValue - Placeholder when no data is available
• Tile.MeasuringSpinner - Loading state during measurements
• Tile.Status - Device status when not measuring