Tile.StartSection

Header section component that displays the task icon on the left, shows completion state with a checkmark, and supports optional right-side content for additional controls or information.

Quick ExampleCopy Anchor Link

import { MeasurementTypeKey } from "@ovok/core/next";
import { Tile } from "@ovok/native";
import React from "react";
import { IconButton } from "react-native-paper";

const StartSectionExample = () => {
  return (
    <Tile>
      <Tile.StartSection
        isCompleted={false}
        left={() => (
          <Tile.TaskIcon
            measurementTypeKey={MeasurementTypeKey.bloodPressure}
          />
        )}
        right={() => <IconButton icon="plus" size={20} />}
        testID="measurement-start-section"
      />
    </Tile>
  );
};

export default StartSectionExample;

PropsCopy Anchor Link

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

Component BehaviorCopy Anchor Link

The StartSection component provides a flexible header layout with conditional rendering:

1. Not Completed State: Shows the left function content (typically a task icon)
2. Completed State: Replaces left content with a green checkmark (TickCircle icon)
3. Right Content: Always renders the right function content if provided
4. Layout: Uses space-between justification to separate left and right content

LocalizationCopy Anchor Link

This component does not use any localization keys directly. Localization is handled by the content rendered through the left and right functions.

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

• theme.colors.success - Default color for the completion checkmark icon

Related ComponentsCopy Anchor Link

• Tile.TaskIcon - Measurement type icons for left side
• Tile.Title - Title component that typically follows StartSection
• Tile - Parent container component