Counter

iOSAndroidTry it (web)

iPhone 17 Pro · iOS 27

Copy Text

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

export default function CounterSizes() {
  return (
    <View style={{ flexDirection: "row", alignItems: "baseline", gap: 24 }}>
      <Counter value={12} total={30} size="sm" />
      <Counter value={142} total={200} />
      <Counter value={7} total={9} size="lg" />
    </View>
  );
}

ImportCopy Anchor Link

import { Counter } from "@terratcg/ui";

UsageCopy Anchor Link

<Counter value={142} total={200} />

Counter sits wherever progress is read as numbers: beside a SectionHeader, in a Shelf's header, or next to a Progress track in a Task footer.

ExamplesCopy Anchor Link

Tone and formatCopy Anchor Link

tone changes the count only, the total stays muted; format writes both numbers in your locale.

iOSAndroidTry it (web)

iPhone 17 Pro · iOS 27

Copy Text

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

const thousands = new Intl.NumberFormat("en-US");

export default function CounterTones() {
  return (
    <View style={{ flexDirection: "row", alignItems: "baseline", gap: 24 }}>
      <Counter value={3} total={9} tone="secondary" />
      <Counter value={1200} total={4000} format={(n) => thousands.format(n)} />
    </View>
  );
}

PropsCopy Anchor Link

Counter also accepts React Native's View props, such as accessibilityLabel and testID.

AccessibilityCopy Anchor Link

• Label: one accessible element, read as "142 of 200" by default. That label is English: pass your own accessibilityLabel in other languages ("142 sur 200").
• Format: format writes both the shown numbers and the default label, so a locale formatter reaches screen readers too.
• Figures: both numbers use tabular figures, so a count that ticks up doesn't shift its neighbours.

Platform differencesCopy Anchor Link

• iOS and Android: the same layout, on the text baseline.
• Web: Counter renders through react-native-web for these docs, but the web is not a supported target.

RulesCopy Anchor Link

• Pass numbers, not strings: format is where your locale's grouping goes.
• Keep the total muted. tone changes the count only; use secondary when the count is not the subject of the view.
• Pick sm inside headers and footers, default on its own, lg when the count is the page's headline.