ObservationDetail.SingleCardDataRow

A label-value data row component designed for structured display of healthcare information. Provides consistent spacing, typography, and layout for observation data presentation.

Basic Example

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

const BasicMedicalData = () => (
  <>
    <ObservationDetail.SingleCardDataRow label="Systolic (mmHg)" value="120" />
    <ObservationDetail.SingleCardDataRow label="Diastolic (mmHg)" value="80" />
    <ObservationDetail.SingleCardDataRow label="Heart Rate (bpm)" value="72" />
  </>
);

export default BasicMedicalData;

Props

Name	Type	Required	Default	Description
label	string	✓	-	Label text for the data row
value	string	✓	-	Value text to display
style	StyleProp<ViewStyle>	-	-	Custom container styles
labelStyle	StyleProp<TextStyle>	-	-	Custom label text styles
valueStyle	StyleProp<TextStyle>	-	-	Custom value text styles
labelTestID	string	-	-	Test ID for label text
valueTestID	string	-	-	Test ID for value text

Inherits all props from ViewProps

Component Behavior

Layout System

• Uses flexbox row layout with space-between alignment
• Label text is flexible and can wrap
• Value text is right-aligned and fixed-width
• Consistent vertical padding and alignment

Typography

• Standard 16px font size for both label and value
• Normal font weight (400) for medical data readability
• Inherits theme typography when available

Styling

Theme Colors Used

• theme.spacing(4) - Vertical padding (16px default)
• theme.spacing(6) - Horizontal padding (24px default)