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 Example

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

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

export default BasicDiaryCardNoDataExample;

Props

Extends basic component props.

Primary Props

Prop	Type	Default	Description
testID	string	undefined	Test identifier for automated testing
style	StyleProp<TextStyle>	undefined	Additional styles to apply to the text

Localization

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 Integration

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

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

Styling

Theme Colors Used

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

Related Components

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