Section

iOSAndroidTry it (web)

iPhone 17 Pro · iOS 27

Copy Text

import { Counter, SectionHeader } from "@terratcg/ui";
import { View } from "react-native";

export default function SectionHeaders() {
  return (
    <View style={{ width: 320, gap: 16 }}>
      <SectionHeader title="Collection">
        <Counter value={142} total={200} size="sm" />
      </SectionHeader>
      <SectionHeader title="Birds" level="secondary" marker="#2F5DA8">
        <Counter value={38} total={60} size="sm" tone="secondary" />
      </SectionHeader>
      <SectionHeader title="Mammals" level="secondary" marker="#2E7D4F">
        <Counter value={21} total={40} size="sm" tone="secondary" />
      </SectionHeader>
    </View>
  );
}

ImportCopy Anchor Link

import { Divider, SectionHeader } from "@terratcg/ui";

UsageCopy Anchor Link

<SectionHeader title="Collection">
  <Counter value={142} total={200} size="sm" />
</SectionHeader>

The title wraps and fills the row; the children sit at its end. A marker (a colour swatch) or a leading glyph goes before the title.

ExamplesCopy Anchor Link

DividerCopy Anchor Link

A hairline where one group of content ends and the next begins. The headers carry the structure; the Divider is hidden from screen readers.

iOSAndroidTry it (web)

iPhone 17 Pro · iOS 27

Copy Text

import { Divider, SectionHeader, Text } from "@terratcg/ui";
import { View } from "react-native";

export default function SectionDivider() {
  return (
    <View style={{ width: 320, gap: 16 }}>
      <View style={{ gap: 4 }}>
        <SectionHeader title="Account" />
        <Text tone="secondary">Name, email and password.</Text>
      </View>
      <Divider />
      <View style={{ gap: 4 }}>
        <SectionHeader title="Privacy" />
        <Text tone="secondary">Who sees your photos.</Text>
      </View>
    </View>
  );
}

PropsCopy Anchor Link

SectionHeaderCopy Anchor Link

SectionHeader also accepts React Native's View props. A testID also names the marker, as <testID>-marker.

DividerCopy Anchor Link

Divider takes React Native's View props: a hairline in the theme's border colour, stretched across its parent.

AccessibilityCopy Anchor Link

• Heading: the title is announced with the header role, so screen reader users can move from section to section.
• Decoration: the marker swatch is not announced, and the leading glyph and the Divider are hidden from assistive technology. The title names the section on its own.
• Larger text: the title wraps instead of truncating; the trailing content stays at the end of the row.

Platform differencesCopy Anchor Link

• iOS and Android: the same headers. The Divider is one physical pixel thick on each screen.
• Web: Section renders through react-native-web for these docs, but the web is not a supported target.

RulesCopy Anchor Link

• Use primary for a page's groups and secondary for the subgroups inside one.
• Keep the marker for category colours (a photo category, a set); it must never be the only way to tell sections apart.
• Put a Divider between groups, not under every header: the headers carry the structure.