# Tile.MeasuredValue

Canonical page: https://docs.ovok.com/native-sdk/guide/components/tile/measured-value

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

## Quick Example [#quick-example]

```tsx
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 [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/tile` API reference](/native-sdk/reference/tile).

## Component Behavior [#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 [#layout-structure]

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

## Styling [#styling]

### Theme Colors Used [#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 [#typography-specifications]

### Value Text [#value-text]

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

### Unit Text [#unit-text]

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

### Time Text [#time-text]

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

## Related Components [#related-components]

- [Tile.NoMeasuredValue](/native-sdk/guide/components/tile/no-measured-value/) - Placeholder when no data is available
- [Tile.MeasuringSpinner](/native-sdk/guide/components/tile/measuring-spinner/) - Loading state during measurements
- [Tile.Status](/native-sdk/guide/components/tile/status/) - Device status when not measuring