NotificationIcon

NotificationIcon maps a notification's severity to an icon. It is rendered by Notification and replaceable via component overrides.

Usage

The icon is selected automatically. You do not usually render NotificationIcon yourself. To customize the mapping, register a replacement with WithComponents:

import { Chat, WithComponents } from "stream-chat-react-native";
import { CustomNotificationIcon } from "./CustomNotificationIcon";

<WithComponents overrides={{ NotificationIcon: CustomNotificationIcon }}>
  <Chat client={client}>{/* ... */}</Chat>
</WithComponents>;

Props

Prop Description Type
notification (required) The notification being rendered. Notification

Built-in Severity Mapping

The default NotificationIcon maps these severities to icons. Any other severity renders no icon (the component returns null).

Severity Icon Color
'error' Exclamation circle semantics.textOnInverse
'warning' Exclamation circle semantics.textOnInverse
'success' Checkmark semantics.textOnInverse
'info' No icon N/A
'loading' Refresh (spinning) semantics.textOnInverse

See the Snackbar cookbook for a working override.

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>