DiaryCard.NoData

The DiaryCard.NoData component displays a localized message indicating that no measurement data is available. It provides consistent empty state messaging for diary cards with internationalization support and theme-aware styling.

Basic ExampleCopy Anchor Link

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

const BasicDiaryCardNoDataExample = () => {
  return <DiaryCard.NoData />;
};

export default BasicDiaryCardNoDataExample;

PropsCopy Anchor Link

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

LocalizationCopy Anchor Link

The component uses the "diary.no-data" translation key. Ensure this key is defined in your translation files:

{
  "diary": {
    "no-data": "No data recorded"
  }
}

Theme IntegrationCopy Anchor Link

• Text Color: Uses theme.colors.onSurfaceDisabled for muted appearance
• Typography: Custom font family DMSans_700Bold with 16px size
• Responsive: Adapts to system font size preferences

Visual DesignCopy Anchor Link

• Muted Appearance: Subtle styling to indicate absence of data
• Consistent Typography: Matches other secondary text in the app
• Accessible Contrast: Maintains readable contrast ratios

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

• theme.colors.onSurfaceDisabled - Text color for muted appearance

Related ComponentsCopy Anchor Link

• DiaryCard - Parent container component
• DiaryCard.StartSection - Header section component
• Tile.MeasuredValue - Counterpart for measured data display