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 Example

import { MeasurementTypeKey } from "@ovok/core";
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;

Props

Prop	Type	Required	Default	Description
isCompleted	boolean	✓	-	Whether the measurement task is completed
left	() => JSX.Element	-	-	Function that renders left side content
right	() => JSX.Element	-	-	Function that renders right side content
completedIconColor	string	-	theme.colors.success	Color for the completion checkmark icon
completedIconTestID	string	-	-	Test ID for the completion icon
rightTestID	string	-	-	Accepted by the public type; not currently applied by the renderer
style	ViewStyle	-	-	Accepted by the public type; not currently applied by the renderer
testID	string	-	-	Test identifier for the container

Component Behavior

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

Localization

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

Styling

Theme Colors Used

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

Related Components

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