Skip to main content

ListHeader

Section header component that provides visual separation and labeling for grouped settings. Features dynamic spacing based on position in the list and theme integration for consistent typography.

Quick Example​

import { ListHeader } from "@ovok/native";
import React from "react";

const ListHeaderExample = () => {
  return (
    <ListHeader
      label="Account Settings"
      isFirst={false}
      isLast={false}
      testId="account-header"
    />
  );
};

export default ListHeaderExample;

Props​

PropTypeRequiredDefaultDescription
labelstring✓-Text content displayed as the section header
isFirstboolean✓-Whether this is the first item in the list
isLastboolean✓-Whether this is the last item in the list
testIdstring--Test identifier for automated testing

Component Behavior​

The ListHeader component:

  1. Dynamic Spacing: Adjusts padding based on position in the list
  2. Typography: Uses DMSans_700Bold font family for clear hierarchy
  3. Theme Integration: Respects theme spacing values for consistency
  4. Accessibility: Provides semantic structure for section grouping

Spacing Logic​

The component applies different spacing based on position:

// Top padding: none for first item, theme.spacing(6) for others
paddingTop: !isFirst ? theme.spacing(6) : 0;

// Bottom padding: none for last item, theme.spacing(4) for others
paddingBottom: !isLast ? theme.spacing(4) : 0;

This creates proper visual separation between sections while avoiding unnecessary spacing at list boundaries.

Styling​

Theme Colors Used​

  • theme.spacing(6) - Top spacing between sections (24px by default)
  • theme.spacing(4) - Bottom spacing after headers (16px by default)
  • SettingList - Container component that automatically renders ListHeaders
  • SettingListItem - Setting items that appear under headers