Skip to main content

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​

PropTypeDefaultDescription
testIDstringundefinedTest identifier for automated testing
styleStyleProp<TextStyle>undefinedAdditional 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