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

PropDescriptionType
notification (required)The notification to render. Comes from stream-chat's Notification type: id, message, severity, actions, metadata, tags, origin, etc.Notification
entryDirectionDirection the surrounding host animated the card in from. Available for custom transitions inside the card.'bottom' | 'left' | 'right' | 'top'
IconOverride for the icon component. Defaults to the NotificationIcon provided through WithComponents.React.ComponentType<{ notification: Notification }>
onDismissCalled when the user taps the close button. Falls back to removeNotification(notification.id) if omitted.() => void
showCloseWhether to render the close button. The close button is always shown for persistent notifications (duration: 0) regardless of this prop.boolean
transitionStateThe 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.

Previous
NotificationList
Next
NotificationIcon