# 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`](/chat/docs/sdk/react-native/ui-components/in-app-notifications/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

```tsx
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`](/chat/docs/sdk/react-native/ui-components/in-app-notifications/hooks/use-system-notifications/).

## Replacing it

Override `NotificationList` with `WithComponents` to provide your own snackbar shell. See the [Snackbar cookbook](/chat/docs/sdk/react-native/guides/snackbar/#level-4-replace-notificationlist) for a working example.


---

This page was last updated at 2026-05-14T07:09:00.757Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/in-app-notifications/notification-list/](https://getstream.io/chat/docs/sdk/react-native/ui-components/in-app-notifications/notification-list/).