DiaryCard

The DiaryCard component is a specialized interactive card designed for displaying health measurement data and diary entries. It extends TouchableOpacity with healthcare-specific styling and automatic visual state management based on data availability.

Basic ExampleCopy Anchor Link

import { MeasurementTypeKey } from "@ovok/core/next";
import { DiaryCard } from "@ovok/native";
import * as React from "react";

const BasicDiaryCardExample = () => {
  return (
    <DiaryCard hasData={false}>
      <DiaryCard.StartSection
        left={() => (
          <DiaryCard.TaskIcon
            measurementTypeKey={MeasurementTypeKey.bodyWeight}
          />
        )}
      />

      <DiaryCard.Title>Body Weight</DiaryCard.Title>

      <DiaryCard.MeasuredValue value={"70"} unit={"kg"} time="15:34" />
    </DiaryCard>
  );
};

export default BasicDiaryCardExample;

PropsCopy Anchor Link

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

Compound ComponentsCopy Anchor Link

DiaryCardProps is exported from @ovok/native for typing wrappers around the card.

• DiaryCard.StartSection - Header section with icon and optional right content
• DiaryCard.TaskIcon - Measurement type icons (inherited from Tile module)
• DiaryCard.Title - Card title text (inherited from Tile module)
• DiaryCard.MeasuredValue - Value display with unit and timestamp (inherited from Tile module)
• DiaryCard.NoData - Empty state indicator for unmeasured data

Component BehaviorCopy Anchor Link

Visual State ManagementCopy Anchor Link

The card automatically adjusts its appearance based on the hasData prop:

Has Data (hasData = true):

• Background: theme.colors.surface
• Full opacity and normal interaction
• Standard shadow and elevation

No Data (hasData = false):

• Background: theme.colors.surfaceDisabled
• Reduced visual prominence
• Maintains touch interaction for data entry

Theme IntegrationCopy Anchor Link

• Background Colors: Uses Material Design 3 surface colors
• Border: theme.colors.outlineVariant with hairline width
• Shadow: theme.colors.shadow with consistent elevation
• Spacing: theme.spacing(4) padding and theme.spacing(2) gap
• Border Radius: theme.borderRadius(4) for consistent rounding

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

• theme.colors.surface - Default card background
• theme.colors.surfaceDisabled - Background when no data is available
• theme.colors.outlineVariant - Border color
• theme.colors.shadow - Shadow color for elevation

Related ComponentsCopy Anchor Link

• DiaryCard.StartSection - Header section component
• DiaryCard.NoData - Empty state component
• Tile Module - Source of inherited compound components