Thread

Renders thread replies for a message, with an input for new replies. Internally uses MessageList and MessageComposer.

Best Practices

Render Thread within Channel and pass thread/threadList correctly.
Use closeThreadOnDismount to keep channel state in sync.
Avoid heavy customization; override MessageList/MessageComposer only when needed.
Keep thread input focused only when appropriate (autoFocus).
Use reloadThread/loadMoreThread instead of manual pagination.

General Usage

import {
  OverlayProvider,
  Chat,
  Channel,
  Thread,
} from "stream-chat-react-native";

const App = () => {
  return (
    <OverlayProvider>
      <Chat client={client}>
        <Channel channel={channel} thread={message} threadList>
          <Thread />
        </Channel>
      </Chat>
    </OverlayProvider>
  );
};

Props

Prop	Description	Type
`additionalMessageComposerProps`	Additional props for underlying `MessageComposer` component.	`object`
`additionalMessageListProps`	Additional props for underlying `MessageList` component.	`object`
`additionalMessageFlashListProps`	Additional props for underlying `MessageFlashList` component.	`object`
`autoFocus`	When true, the input auto-focuses on mount. Defaults to `false`.	`boolean`
`client`	Stream Chat client instance.	`StreamChat`
`closeThreadOnDismount`	Closes thread on dismount. Defaults to `true`.	`boolean`
`disabled`	When true, the underlying input box will be disabled. When omitted the input is editable.	`boolean`
`onThreadDismount`	Called when `Thread` unmounts.	`function`
`closeThread`	Unsets the thread and thread messages in the Channel state.	`function`
`loadMoreThread`	Loads more messages for the thread. Returns a promise.	`() => Promise<void>`
`parentMessagePreventPress`	Boolean to enable/disable parent message press. Defaults to `true`.	`boolean`
`shouldUseFlashList`	When true, renders the experimental `MessageFlashList` instead of `MessageList` (requires `@shopify/flash-list` to be installed). Defaults to `false`.	`boolean`
`notificationHostId`	Identifier for the notification host used to anchor thread notifications. When omitted, a default host id is derived from the thread. Mostly internal.	`string`
`reloadThread`	Reloads the thread and thread messages.	`function`
`thread`	Can be a `LocalMessage` or `ThreadType`. Setting it indicates a thread is open. Set `thread` on all `Channel` components when a thread is open.	`object`
`threadInstance`	Instance of `Thread` used to read more data or pass to `onThreadSelect`.	`Thread`

The message list and composer used by Thread are not passed as props. Override them through the WithComponents provider higher in the tree; Thread reads them from useComponentsContext(). Note the thread composer override key is ThreadMessageComposer (not MessageComposer).

import { WithComponents, Channel, Thread } from "stream-chat-react-native";

<WithComponents
  overrides={{
    MessageList: MyMessageList,
    ThreadMessageComposer: MyMessageComposer,
  }}
>
  <Channel channel={channel} thread={message} threadList>
    <Thread />
  </Channel>
</WithComponents>;

Override	Description	Type
`MessageList`	Custom message list component. Defaults to `MessageList`.	`ComponentType`
`ThreadMessageComposer`	Custom message composer component for the thread. Defaults to `MessageComposer`.	`ComponentType`

Thread

Best Practices

General Usage

Props

UI Component Overrides

Ask AI