Skip to content

Notification

Notification renders a single snackbar card: icon, message, optional action buttons, optional close button. It is invoked by NotificationList, which passes the active notification and a dismiss callback. You only render Notification directly when overriding NotificationList with a custom snackbar host.

The component handles accessibility automatically: live-region set to assertive for errors and polite for other severities, role set to alert for errors and summary otherwise, dismiss button labelled via the a11y/Dismiss notification translation key.

Usage

import {
  Notification,
  useNotificationListController,
} from "stream-chat-react-native";

const MySnackbar = () => {
  const { dismissNotification, notification } = useNotificationListController();
  if (!notification) return null;

  return (
    <Notification
      notification={notification}
      onDismiss={dismissNotification}
      showClose={!notification.duration}
    />
  );
};

Render this host inside an existing notification target, for example inside Channel, Thread, ChannelList, or your own NotificationTargetProvider.

Props

Prop Description Type
notification (required) The notification to render. Comes from stream-chat's Notification type: id, message, severity, actions, metadata, tags, origin, etc. Notification
entryDirection Direction the surrounding host animated the card in from. Available for custom transitions inside the card. 'bottom' | 'left' | 'right' | 'top'
Icon Override for the icon component. Defaults to the NotificationIcon provided through WithComponents. React.ComponentType<{ notification: Notification }>
onDismiss Called when the user taps the close button. Falls back to removeNotification(notification.id) if omitted. () => void
showClose Whether to render the close button. The close button is always shown for persistent notifications (duration: 0) regardless of this prop. boolean
transitionState The host's current transition state. Reserved for future use. 'enter' | 'exit'

Translation

The built-in Notification renders notification.message through internal type-specific translators for known notification type values. For example, 'api:attachment:upload:failed' resolves to Error uploading attachment or Attachment upload failed due to {{reason}} depending on notification.metadata.reason. Custom notifications without a recognized type fall back to t(notification.message).

Customization

For non-trivial visual changes, override Notification via ComponentsContext rather than wrapping it. See the Snackbar cookbook for a working override that preserves accessibility semantics.