Tile.MeasuredValue

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

Quick Example

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;

Props

Prop	Type	Required	Default	Description
value	string	✓	-	The measurement value to display
unit	string	✓	-	Unit of measurement (e.g., "mmHg", "kg")
time	string	✓	-	Timestamp when measurement was taken
style	StyleProp<ViewStyle>	-	-	Custom container styles
testID	string	-	-	Test identifier for automated testing

Component Behavior

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 Structure

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

Styling

Theme Colors Used

• 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 Specifications

Value Text

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

Unit Text

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

Time Text

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

Related Components

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