ObservationDetail.DataContainer

A themed card container component for grouping related observation data with consistent styling, shadows, and Material Design 3 theming. Provides structured presentation for healthcare information.

Basic Example

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

const vitals = {
  systolic: 120,
  diastolic: 80,
  heartRate: 70,
  temperature: 37.5,
};

const VitalSignsContainer = () => (
  <ObservationDetail.DataContainer>
    <ObservationDetail.SingleCardDataRow
      label="Blood Pressure"
      value={`${vitals.systolic}/${vitals.diastolic} mmHg`}
    />
    <ObservationDetail.SingleCardDataRow
      label="Heart Rate"
      value={`${vitals.heartRate} bpm`}
    />
    <ObservationDetail.SingleCardDataRow
      label="Temperature"
      value={`${vitals.temperature}°C`}
    />
  </ObservationDetail.DataContainer>
);

export default VitalSignsContainer;

Props

Name	Type	Required	Default	Description
children	React.ReactNode	-	-	Content to display in container
style	StyleProp<ViewStyle>	-	-	Custom container styles

Inherits all props from ViewProps

Component Behavior

Visual Design

• Material Design 3 card appearance with elevation
• Themed border and shadow colors
• Rounded corners with theme-based radius
• Consistent padding and spacing

Theme Integration

• Automatically applies surface colors
• Respects theme border and shadow colors
• Uses theme-based border radius and spacing
• Supports light and dark mode variations

Styling

Theme Colors Used

• theme.colors.surface - Card background color
• theme.colors.outlineVariant - Card border color
• theme.colors.shadow - Card shadow color
• theme.borderRadius(2) - Card corner radius (8px default)