BadgeNotification

BadgeNotification renders a notification badge with a numeric count, typically used for unread message indicators in channel lists. It supports multiple color types (primary, error, neutral) and includes a border ring for visual distinction against various backgrounds.

Usage

import { BadgeNotification } from "stream-chat-react-native";

<BadgeNotification count={3} size="sm" type="primary" />;
<BadgeNotification count={99} size="xs" type="error" />

Props

Prop Description Type
count (required) The notification count to display. number
size (required) The size of the notification badge. Size mapping: 'sm' (20x20), 'xs' (16x16). 'sm' | 'xs'
type The visual variant of the badge, which controls the background color. 'primary' uses badgeBgPrimary, 'error' uses badgeBgError, 'neutral' uses badgeBgNeutral. Defaults to 'primary'. 'primary' | 'error' | 'neutral'
testID Test identifier for testing frameworks. string
accessibilityLabel Accessibility label applied to the badge for screen readers. string
Add Chat to my app: getstream.io/SKILL.md

The fastest way to build with Stream. Start a new project or improve an existing one. Full CLI and documentation integration out of the box.


Ask your agent:

/stream Build me a Social App with Feeds and Moderation.
/stream Any livestream calls running?
/stream Chat React Native v9: <Your Question>