# NotificationTargetContext

`NotificationTargetProvider` declares the panel and host id for the subtree below it. The SDK uses this to route notifications emitted inside that subtree to the matching `NotificationList`, and to scope reads from [`useNotifications`](/chat/docs/sdk/react-native/ui-components/in-app-notifications/hooks/use-notifications/) to that target.

You usually don't mount `NotificationTargetProvider` yourself; `Channel`, `Thread`, `ChannelList`, and `ThreadList` set it up around their notification host. Mount it manually when you build a custom surface or have multiple instances of the same panel (e.g. two thread views on screen at once) and need to disambiguate which snackbar host receives a given notification.

## Usage

```tsx
import {
  getThreadNotificationHostId,
  NotificationTargetProvider,
  NotificationList,
} from "stream-chat-react-native";

<NotificationTargetProvider
  hostId={getThreadNotificationHostId(thread.id)}
  panel="thread"
>
  <ThreadView thread={thread} />
  <NotificationList />
</NotificationTargetProvider>;
```

Any `addNotification` call inside `ThreadView` is tagged with that exact thread target and only the matching `NotificationList` displays it.

## Props

| Prop                | Description                                                                                                                                                                                                               | Type                                                                         |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| `hostId` (required) | Stable identifier for this target instance. Combine with `panel` to form the tag `target:<panel>:<hostId>`. Use `getChannelNotificationHostId(cid)` or `getThreadNotificationHostId(threadId)` for the canonical formats. | `string`                                                                     |
| `panel` (required)  | Panel this subtree belongs to.                                                                                                                                                                                            | `'channel'` \| `'thread'` \| `'channel-list'` \| `'thread-list'` \| `string` |

## Hooks

### `useNotificationTargetContext`

Returns the nearest `NotificationTarget` from React context, or `undefined` if no provider is mounted above.

```tsx
import { useNotificationTargetContext } from "stream-chat-react-native";

const target = useNotificationTargetContext();
// → { hostId, panel } | undefined
```

### `useResolvedNotificationTarget`

Resolves a target with explicit overrides. If both `hostId` and `panel` are passed, the returned target is `{ hostId, panel }`. If only one is passed and it matches the context target's panel, the context target is returned. Otherwise returns `undefined`.

```tsx
import { useResolvedNotificationTarget } from "stream-chat-react-native";

// Inherit from context
const target = useResolvedNotificationTarget();

// Force a specific target
const target = useResolvedNotificationTarget({
  hostId: "channel:messaging:abc",
  panel: "channel",
});
```

Used internally by [`NotificationList`](/chat/docs/sdk/react-native/ui-components/in-app-notifications/notification-list/) to decide which notifications it should display.


---

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

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