# DiaryCard

Canonical page: https://docs.ovok.com/native-sdk/guide/components/diary/diary-card

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 [#basic-example]

```tsx
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;
```

## Props [#props]

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

## Compound Components [#compound-components]

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

- [`DiaryCard.StartSection`](/native-sdk/guide/components/diary/start-section/) - Header section with icon and optional right content
- [`DiaryCard.TaskIcon`](/native-sdk/guide/components/diary/task-icon/) - Measurement type icons (inherited from Tile module)
- [`DiaryCard.Title`](/native-sdk/guide/components/diary/title/) - Card title text (inherited from Tile module)
- [`DiaryCard.MeasuredValue`](/native-sdk/guide/components/diary/measured-value/) - Value display with unit and timestamp (inherited from Tile module)
- [`DiaryCard.NoData`](/native-sdk/guide/components/diary/no-data/) - Empty state indicator for unmeasured data

## Component Behavior [#component-behavior]

### Visual State Management [#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 [#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 [#styling]

### Theme Colors Used [#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 [#related-components]

- [DiaryCard.StartSection](/native-sdk/guide/components/diary/start-section/) - Header section component
- [DiaryCard.NoData](/native-sdk/guide/components/diary/no-data/) - Empty state component
- [Tile Module](/native-sdk/guide/components/tile/) - Source of inherited compound components