import {
getThreadNotificationHostId,
NotificationTargetProvider,
NotificationList,
} from "stream-chat-react-native";
<NotificationTargetProvider
hostId={getThreadNotificationHostId(thread.id)}
panel="thread"
>
<ThreadView thread={thread} />
<NotificationList />
</NotificationTargetProvider>;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 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
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.
import { useNotificationTargetContext } from "stream-chat-react-native";
const target = useNotificationTargetContext();
// → { hostId, panel } | undefineduseResolvedNotificationTarget
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.
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 to decide which notifications it should display.