Thread

Thread gives one thread to the components inside it. It renders its children with the contexts a message list and a composer need, the same ones Channel provides, but bound to the thread's replies and composer. Render it next to Channel, on a screen of its own, not inside it. Thread UI explains what it does, and Replies and threads covers the feature.

Best practices

• Get the thread from the client, never from new Thread(). onThreadSelect on MessageList, MessageFlashList and ThreadList gives you the thread the user picked, and client.threads.ensure({ channel, parentMessage }) returns the thread for a message, creating it when needed. The client keeps one instance per thread and sends it its events.
• Compose the screen from children. Thread renders no message list or composer of its own: render MessageList or MessageFlashList, and MessageComposer, inside it.
• Pass Thread the same configuration you pass Channel, such as keyboardVerticalOffset, topInset, audioRecordingEnabled and messageActions. A thread doesn't inherit it from a channel.
• Clear your app's record of the open thread in onThreadDismount, for example when the user navigates back.
• A Thread needs no Channel around it. Inside it, useChannel() returns the thread's channel.

Basic usage

The channel screen opens a thread when the user taps a message's replies, and the thread screen renders it:

import type {
  Channel as StreamChannel,
  Thread as StreamThread,
} from "stream-chat";
import {
  Channel,
  MessageComposer,
  MessageList,
  Thread,
} from "stream-chat-react-native";

export const ChannelScreen = ({
  channel,
  openThread,
}: {
  channel: StreamChannel;
  openThread: (thread: StreamThread) => void;
}) => (
  <Channel channel={channel} keyboardVerticalOffset={0}>
    <MessageList onThreadSelect={openThread} />
    <MessageComposer />
  </Channel>
);

export const ThreadScreen = ({
  onClose,
  thread,
}: {
  onClose: () => void;
  thread: StreamThread;
}) => (
  <Thread keyboardVerticalOffset={0} onThreadDismount={onClose} thread={thread}>
    <MessageList />
    <MessageComposer />
  </Thread>
);

MessageList renders the parent message above the replies, and MessageComposer writes into thread.messageComposer. Moving between channels, threads and messages passes the thread from one screen to the other, and opens a thread at a reply.

What it does

While it's mounted, Thread:

• loads the first page of replies with paginator.toTail() on thread.messagePaginator, unless the paginator already holds some. A thread from the thread list arrives with its latest replies;
• reloads the thread with Thread.reload() while its state is stale;
• watches the thread's channel once when nobody has loaded it, so the user's capabilities in the channel reach the message menu, the reactions and the composer;
• activates the thread with Thread.activate(), so it receives its events even when the thread list doesn't hold it, and marks new replies read as they arrive. Opening a thread doesn't mark its channel read;
• routes its notifications to its own notification host.

When it unmounts, it releases the activation and calls onThreadDismount. When the first page of replies fails to load, it renders LoadingErrorIndicator, "Error loading replies...", in place of its children, and tapping it loads the replies again.

UI customization

Thread has no override key. Change the screen by changing its children. Inside it, the message list and the composer take the same override keys as in a channel. To give the thread overrides of its own, wrap its children in WithComponents:

import type { Thread as StreamThread } from "stream-chat";
import {
  MessageComposer,
  MessageList,
  Thread,
  WithComponents,
} from "stream-chat-react-native";
import type { ComponentOverrides } from "stream-chat-react-native";

const NoTimestamp = () => null;

const threadOverrides: ComponentOverrides = { MessageTimestamp: NoTimestamp };

export const CompactThread = ({ thread }: { thread: StreamThread }) => (
  <Thread thread={thread}>
    <WithComponents overrides={threadOverrides}>
      <MessageList />
      <MessageComposer />
    </WithComponents>
  </Thread>
);

The parent message isn't a child you place. The message list renders it at the older end of the list as ThreadFooterComponent: the parent message, the reply count, and InlineLoadingMoreThreadIndicator while older replies load. To change it, pass your own component as FooterComponent on MessageList or HeaderComponent on MessageFlashList; Replacing the parent message area shows one.

ThreadFooterComponent props

ThreadFooterComponent reads the thread from ThreadContext and the parent message and reply count from thread.state, so it updates when they change. It renders nothing until the thread has its parent message.

InlineLoadingMoreThreadIndicator takes no props. It shows a spinner while thread.messagePaginator loads.

Props

Configuration shared with Channel

Thread also takes the configuration props of Channel, with the same types and defaults. They configure the parts inside it, and only those: a thread screen doesn't inherit the props of a channel screen. Their descriptions are on Channel. The props that only Channel takes, channel, initializeOnMount, markReadOnMount and initialScrollToFirstUnreadMessage, are about loading a channel; Thread loads its replies itself. Channel also takes client and t, which Thread doesn't.

Messages

These reach MessagesContext, which the messages read.

Composer

These reach MessageInputContext. See MessageInputContext.

hasCreatePoll has no effect in a thread: the attachment picker offers no poll button there.

Attachment picker

These reach AttachmentPickerContext. See Attachment picker.

Message list

These reach ChannelContext, which the message list reads.

Keyboard, audio and capabilities

Related hooks

See ThreadContext, useThreadContext and, for the thread's state and methods, Thread and thread manager.