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

PropDescriptionType
bottomOffsetExtra pixels to push the snackbar up from the bottom. Used by MessageList to clear a floating composer.number
enterFromDirection the snackbar enters from. Defaults to 'bottom'. Each notification can override via metadata.entryDirection or origin.context.entryDirection.'bottom' | 'left' | 'right' | 'top'
filterFilter applied before picking the active notification. Useful for restricting a list to a subset (e.g. errors only).(notification: Notification) => boolean
hostIdIdentifier for this snackbar host when multiple instances of the same panel exist (e.g. multiple thread views). Routed by target:<panel>:<hostId> tags.string
panelPanel 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
topOffsetExtra pixels to push the snackbar down from the top when verticalAlignment is 'top'.number
verticalAlignmentWhere 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.

Previous
Overview
Next
Notification