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 Example

import { MeasurementTypeKey } from "@ovok/core";
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;

Props

Extends TouchableOpacityProps from React Native.

Primary Props

Prop	Type	Default	Description
children	ReactNode	required	Child components to render within the card
hasData	boolean	undefined	Whether the measurement has data (affects styling)
style	ViewStyle	undefined	Additional styles to apply to the card
testID	string	undefined	Test identifier for automated testing

Inherited Props

All TouchableOpacity props are supported:

• onPress
• disabled
• accessibilityLabel
• accessibilityRole
• accessibilityState

Compound Components

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

Visual State Management

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 Integration

• 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

Styling

Theme Colors Used

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

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