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 Example

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

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

export default BasicDiaryCardStartSectionExample;

Props

Extends ViewProps from React Native.

Primary Props

Prop	Type	Default	Description
style	ViewStyle	undefined	Additional styles to apply to the container
left	() => JSX.Element | null	undefined	Function returning left-side content (typically icon)
right	() => JSX.Element | null	undefined	Function returning right-side content
rightTestID	string	undefined	Test ID for the default right arrow icon
testID	string	undefined	Test ID for the container

Inherited Props

All standard View props are supported:

• accessibilityLabel
• accessibilityRole
• onLayout

Component Behavior

Icon Integration

• 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

Styling

Default Styles

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

Related Components

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