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

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

PropDescriptionType
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 } | 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.

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.