Native Animation

Sign in Get all-access

Base Badge animation preview

Base Badge animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add base-badge

Base Badge

React Native Badge Component

A status badge with a sliding count and configurable content, leading icon, count, and theme.

Native Animation Base · Free · MIT

Read and download source

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

About this component

A status badge with a sliding count and configurable content, leading icon, count, and theme.

How it works

Four variants map to the theme's primary, secondary, destructive, and outline surfaces.
A full radius, 8 × 2 pt padding, and 12/16 pt medium text keep labels compact. Icons are supplied by the caller.
count composes BaseSlidingNumber at 12 pt with a 16 pt line height. The number receives the same theme and foreground color.

Install

npx nativeanimation add base-badge

The CLI also copies base-theme and base-sliding-number. Dependencies, if you copy by hand:

npx expo install react-native-reanimated react-native-worklets

Load the Geist regular and medium fonts used by the theme once in your app, or supply your own font names in a custom theme.

Usage

import { BaseBadge } from './base-badge';

<BaseBadge variant="secondary">Paid</BaseBadge>
<BaseBadge variant="outline">Refunded</BaseBadge>
<BaseBadge count={unread}>Unread</BaseBadge>

Wrap your app in BaseThemeProvider (from base-theme) to choose light/dark and an accent; without it, pieces use the light neutral theme. Every piece also takes a theme prop that wins over the provider.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	`—`	Label; strings and numbers receive the badge text style.
`variant`	`'default' \| 'secondary' \| 'destructive' \| 'outline'`	`'default'`	Surface and foreground pair.
`leading`	`ReactNode`	`—`	Optional 12 pt icon; supply its color to match the variant.
`count`	`number`	`—`	Animated number after the label, including zero.
`style`	`StyleProp<ViewStyle>`	`—`	Root view style.
`theme`	`BaseTheme`	`provider`	Theme override, also passed to the number.
`testID`	`string`	`—`	Root identifier.
`accessibilityLabel`	`string`	`label + count`	Explicit name, especially for custom label elements.

Compatibility

Expo SDK 58 · React Native 0.88 · Reanimated 4.7 · react-native-worklets 0.13. Targets iOS, Android, and web, including Expo Go and development builds. Part of Native Animation Base, a free family sharing one theme; the CLI installs its family dependencies automatically.

Accessibility

The badge is informational, with a single accessible label containing its text and count. Decorative icons and digit wheels are hidden from screen readers. Supply accessibilityLabel for custom label content. BaseSlidingNumber handles Reduce Motion by changing digits immediately. The badge is not a touch target.

Part of a shared foundation

Use it in a screen

Compose Base Badge with other Base components and a single shared theme. Ask your agent to read each API, then connect real navigation, state, and callbacks.

Build a habit tracker Build with an agent CLI and manual installation Theme and dark mode Accessibility checklist Native Animation Base UI library

Go further.

Base covers the everyday. Choose a more expressive interaction when your app calls for it.

Another way to solve this task · $9

Stacked Category Cards ↗

A category stack whose tabs unfold into detail cards, with configurable categories, title, colors, and fonts.

Another way to solve this task · $9

Review Approval Card ↗

A moderation queue with swipe-to-approve or decline feedback, with configurable reviews, labels, colors, and fonts.

Source code

Loading public source…

Dependencies

No additional packages are required.

Compatibility

SDK	Status	Revision	Last revision	Platforms	Dependencies
Expo SDK 58	Tested	1	10/27/2026	iOS, Web, Android	None
Expo SDK 57	Tested	1	10/27/2026	iOS, Web, Android	None

Scroll the table horizontally to review every column ↔

More animations

BaseBadge.tsx

import React from 'react';
import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
import { useBaseTheme, type BaseTheme } from '../base-theme';
import { BaseSlidingNumber } from '../base-sliding-number';

export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline';
export type BaseBadgeProps = {
  children?: React.ReactNode;
  variant?: BadgeVariant;
  /** A 12 pt icon or other small leading element. */
  leading?: React.ReactNode;
  count?: number;
  style?: StyleProp<ViewStyle>;
  theme?: BaseTheme;
  testID?: string;
  accessibilityLabel?: string;
};

export function BaseBadge({
  children,
  variant = 'default',
  leading,
  count,
  style,
  theme: override,
  testID,
  accessibilityLabel,
}: BaseBadgeProps) {
  const theme = useBaseTheme(override);
  const { colors } = theme;
  const surface = {
    default: {
      background: colors.primary,
      foreground: colors.primaryForeground,
    },
    secondary: {
      background: colors.secondary,
      foreground: colors.secondaryForeground,
    },
    destructive: {
      background: colors.destructiveSurface,
      foreground: '#ffffff',
    },
    outline: { background: 'transparent', foreground: colors.foreground },
  }[variant];
  const label =
    accessibilityLabel ??
    [
      typeof children === 'string' || typeof children === 'number'
        ? children
        : undefined,
      count,
    ]
      .filter((part) => part !== undefined)
      .join(' ');
  return (
    <View
      testID={testID}
      accessible
      accessibilityRole="text"
      accessibilityLabel={label || undefined}
      style={[
        {
          alignSelf: 'flex-start',
          flexDirection: 'row',
          alignItems: 'center',
          gap: 4,
          borderRadius: theme.radius.full,
          borderWidth: 1,
          borderColor: variant === 'outline' ? colors.border : 'transparent',
          backgroundColor: surface.background,
          paddingHorizontal: 8,
          paddingVertical: 2,
        },
        style,
      ]}
    >
      {leading ? (
        <View aria-hidden importantForAccessibility="no-hide-descendants">
          {leading}
        </View>
      ) : null}
      {typeof children === 'string' || typeof children === 'number' ? (
        <Text
          style={{
            fontFamily: theme.fonts.medium,
            fontSize: 12,
            lineHeight: 16,
            color: surface.foreground,
          }}
        >
          {children}
        </Text>
      ) : (
        children
      )}
      {count !== undefined ? (
        <View
          aria-hidden
          accessibilityElementsHidden
          importantForAccessibility="no-hide-descendants"
        >
          <BaseSlidingNumber
            value={count}
            fontSize={12}
            lineHeight={16}
            fontFamily={theme.fonts.medium}
            color={surface.foreground}
            theme={theme}
          />
        </View>
      ) : null}
    </View>
  );
}

LICENSE

MIT License

Copyright (c) 2026 Native Animation

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

nativeanimation.manifest.json

{
  "schemaVersion": 1,
  "id": "base-badge",
  "family": "base",
  "license": "MIT",
  "kind": "component",
  "registryDependencies": [
    "base-theme",
    "base-sliding-number"
  ],
  "dependencies": {}
}