Skip to content

NotificationList

NotificationList is the snackbar host. It subscribes to the notification store, picks the active notification for its target (preferring persistent notifications over transient ones, otherwise the newest), starts the dismiss timer, and renders the Notification component for it. MessageList, ChannelList, and ThreadList mount one for you by default; you only need to mount your own when you've replaced their default child components.

Usage

import {
  Channel,
  MessageList,
  MessageInput,
  NotificationList,
} from "stream-chat-react-native";

export const ChannelScreen = () => (
  <Channel channel={channel}>
    <MessageList />
    <MessageInput />
    <NotificationList panel="channel" verticalAlignment="bottom" />
  </Channel>
);

Mount one per panel you want to surface notifications in. When NotificationList is rendered inside the SDK's built-in Channel, Thread, ChannelList, or ThreadList tree, it uses the nearest NotificationTargetProvider automatically. If you render it outside that provider, pass both hostId and panel.

Props

Prop Description Type
bottomOffset Extra pixels to push the snackbar up from the bottom. Used by MessageList to clear a floating composer. number
enterFrom Direction the snackbar enters from. Defaults to 'bottom'. Each notification can override via metadata.entryDirection or origin.context.entryDirection. 'bottom' | 'left' | 'right' | 'top'
filter Filter applied before picking the active notification. Useful for restricting a list to a subset (e.g. errors only). (notification: Notification) => boolean
hostId Identifier for this snackbar host when multiple instances of the same panel exist (e.g. multiple thread views). Routed by target:<panel>:<hostId> tags. string
panel Panel this list serves. Defaults to the nearest NotificationTargetProvider target when omitted. If rendering outside that provider, pass this together with hostId. 'channel' | 'thread' | 'channel-list' | 'thread-list' | string
topOffset Extra pixels to push the snackbar down from the top when verticalAlignment is 'top'. number
verticalAlignment Where the snackbar docks vertically. Defaults to 'bottom'. 'bottom' | 'top'

Behavior

  • Selection. When multiple notifications are eligible for the target, NotificationList shows persistent ones (duration: 0 or no resolved duration) first; otherwise it shows the newest one and removes the older eligible notifications from the store.
  • Auto-dismiss. NotificationList calls startNotificationTimeout for the active notification. Notifications with at least one action are kept on screen for a minimum of 5 seconds so users can tap.
  • Unmount. When the host unmounts (e.g. user navigates away from the panel), every non-system notification for the resolved target is removed. System notifications survive because useSystemNotifications consumers may still need them.
  • System notifications are always excluded. They're emitted via addSystemNotification and read via useSystemNotifications.

Replacing it

Override NotificationList with WithComponents to provide your own snackbar shell. See the Snackbar cookbook for a working example.