# useNotificationListController

`useNotificationListController` drives a snackbar host. It picks the active notification for the resolved target, starts and resets the dismiss timer, removes superseded notifications, and clears the target on unmount. [`NotificationList`](/chat/docs/sdk/react-native/ui-components/in-app-notifications/notification-list/) uses this hook internally; reach for it when building a custom snackbar host that should preserve the SDK's selection and timing rules.

## Usage

```tsx
import Animated, { SlideInDown, SlideOutDown } from "react-native-reanimated";
import {
  useComponentsContext,
  useNotificationListController,
} from "stream-chat-react-native";

const CustomSnackbarHost = () => {
  const { Notification } = useComponentsContext();
  const { dismissNotification, notification } = useNotificationListController();

  if (!notification) return null;

  return (
    <Animated.View entering={SlideInDown} exiting={SlideOutDown}>
      <Notification
        notification={notification}
        onDismiss={dismissNotification}
        showClose={!notification.duration}
      />
    </Animated.View>
  );
};
```

Render the host inside an existing notification target, for example inside `Channel`, `Thread`, `ChannelList`, or your own `NotificationTargetProvider`. If you render outside a provider, pass both `hostId` and `panel`.

## Options

| Option   | Type                                                                         | Description                                                                                                                   |
| -------- | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `filter` | `(notification: Notification) => boolean`                                    | Restrict which notifications this host considers. The system-notification filter is always applied on top of yours.           |
| `hostId` | `string`                                                                     | Identifier for this host when multiple hosts share the same panel. Notifications tagged `target:<panel>:<hostId>` route here. |
| `panel`  | `'channel'` \| `'thread'` \| `'channel-list'` \| `'thread-list'` \| `string` | Panel this host serves. Defaults to the panel inferred from context.                                                          |

## Returns

| Field                 | Type                   | Description                                                                                  |
| --------------------- | ---------------------- | -------------------------------------------------------------------------------------------- |
| `dismissNotification` | `() => void`           | Dismiss the currently active notification. Calls `removeNotification(id)` under the hood.    |
| `notification`        | `Notification \| null` | The notification this host should render right now, or `null` when there is nothing to show. |

## Behavior

- **Selection.** Among eligible notifications, persistent ones (`duration: 0` or no resolved duration) are preferred. Otherwise the newest is picked.
- **Timer.** When `notification` changes, `startNotificationTimeout` is invoked once. Notifications with actions get a minimum 5-second duration.
- **Cleanup of older notifications.** When a new notification is picked, the controller removes other notifications eligible for the same target so they don't pile up in the store.
- **Active-target registration.** While the hook is mounted, its resolved target is registered as an "active" target for the client's `NotificationManager`. Any notification emitted without an explicit target while this hook is mounted is routed here.
- **Unmount.** On unmount, every non-system notification for the target is removed.

The controller is intentionally low-level. You control the layout, animations, and accessibility wrapper. For a higher-level override that keeps most of the host's styling, override `NotificationList` directly.


---

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

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