DiaryCard.StartSection

The DiaryCard.StartSection component provides a horizontal layout container for the header section of diary cards. It manages the placement of icons, labels, and optional right-side content with automatic fallback to an arrow icon when no right content is provided.

Basic ExampleCopy Anchor Link

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

const BasicDiaryCardStartSectionExample = () => {
  return (
    <DiaryCard.StartSection
      left={() => (
        <DiaryCard.TaskIcon
          measurementTypeKey={MeasurementTypeKey.bloodPressure}
        />
      )}
    />
  );
};

export default BasicDiaryCardStartSectionExample;

PropsCopy Anchor Link

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

Component BehaviorCopy Anchor Link

Icon IntegrationCopy Anchor Link

• Default Arrow: Uses ArrowRight2 from iconsax-react-nativejs
• Arrow Styling: 20px size with theme.colors.onSurfaceDisabled color
• Theme Integration: Arrow color adapts to current theme

StylingCopy Anchor Link

Default StylesCopy Anchor Link

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
});

Related ComponentsCopy Anchor Link

• DiaryCard - Parent container component
• DiaryCard.NoData - Empty state component
• Tile.TaskIcon - Inherited icon component