# Tile.StartSection

Canonical page: https://docs.ovok.com/native-sdk/guide/components/tile/start-section

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 [#quick-example]

```tsx
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;
```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/tile` API reference](/native-sdk/reference/tile).

## Component Behavior [#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 [#localization]

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

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

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

## Related Components [#related-components]

- [Tile.TaskIcon](/native-sdk/guide/components/tile/task-icon/) - Measurement type icons for left side
- [Tile.Title](/native-sdk/guide/components/tile/title/) - Title component that typically follows StartSection
- [Tile](/native-sdk/guide/components/tile/tile/) - Parent container component