ThreadContext

ThreadContext tells a component which thread it renders in. Thread provides it, and useThreadContext() reads it. Components that work in both a channel and a thread, such as MessageList and MessageComposer, use it to tell the two apart: thread is set inside a Thread and undefined everywhere else.

Best practices

• Read it with useThreadContext(). It doesn't throw outside a Thread, so one component can render in a channel and in a thread.
• Check thread to know whether a component is in a thread. Read the list and the composer with useMessagePaginator() and useMessageComposer(), which already return the thread's inside it, rather than branching yourself.
• Read the thread's state with useStateStore(thread?.state, selector) and a selector declared at module scope. The context holds the Thread instance, which changes only when the thread does.
• Let Thread provide it. Thread also loads and activates the thread and provides the contexts the list and the composer need. ThreadProvider does none of that.
• In a ThreadList row, use useThreadListItemContext(). Rows aren't inside a Thread, so useThreadContext() returns no thread there.

Basic usage

This screen header shows the parent message's author in a thread and nothing in a channel:

import { Text } from "react-native";
import type { ThreadState } from "stream-chat";
import { useStateStore, useThreadContext } from "stream-chat-react-native";

const parentMessageSelector = ({ parentMessage }: ThreadState) => ({
  parentMessage,
});

export const ThreadTitle = () => {
  const { thread } = useThreadContext();
  const { parentMessage } =
    useStateStore(thread?.state, parentMessageSelector) ?? {};

  if (!thread) return null;

  return (
    <Text numberOfLines={1}>
      Thread with {parentMessage?.user?.name ?? parentMessage?.user?.id}
    </Text>
  );
};

Render it as the first child of Thread. useStateStore returns undefined when it gets no store, so the selector's result is read with ?? {} outside a thread.

Values

Outside a Thread, useThreadContext() returns { thread: undefined, allowThreadMessagesInChannel: false }. ThreadContextValue is the type of the value, and ThreadContext itself is exported, so useContext(ThreadContext) returns the same as useThreadContext().

The thread's own data is in its stores, not in this context:

Thread and thread manager lists the fields of thread.state.

ThreadProvider

ThreadProvider sets the context for its children. It takes a value of type ThreadContextValue:

useCreateThreadContext({ allowThreadMessagesInChannel, thread }) returns a memoized value for it. Under ThreadProvider alone, inside a Channel, useThreadContext() and useMessagePaginator() return the thread's values, but useMessageComposer() still returns the channel's composer, which Thread sets in providers of its own, and nothing loads or activates the thread. Render Thread to show a thread's replies.

AlsoSentToChannelHeaderPressPayload, the argument of onAlsoSentToChannelHeaderPress, is exported from the same module: { targetedMessageId, thread? }, the reply's id and, in the channel, its thread.

Related hooks

See useThreadContext and useMessagePaginator.