MessageComposer

MessageComposer provides UI and functionality for composing messages (attachment picker, commands, mentions, autocomplete). It must be rendered inside Channel.

Best Practices

• Render MessageComposer inside Channel to ensure composer state is available.
• Customize via Channel props first to keep behavior consistent.
• Keep additionalTextInputProps stable to avoid re-renders.
• Respect cooldowns and permissions to prevent invalid sends.
• Use built-in components for attachments and audio before rolling your own.

General Usage

import { StreamChat } from "stream-chat";
import {
  Chat,
  Channel,
  MessageList,
  MessageComposer,
  OverlayProvider,
} from "stream-chat-react-native";

const client = StreamChat.getInstance("api_key");

export const App = () => (
  <OverlayProvider>
    <Chat client={client}>
      <Channel channel={channel}>
        <MessageList />
        <MessageComposer />
      </Channel>
    </Chat>
  </OverlayProvider>
);

TypeScript

File type

The File type is now exported from the stream-chat-react-native package and extends the FileReference type from the stream-chat package. It looks like this:

import { FileReference } from "stream-chat";

export type File = FileReference;

Props

UI Component Overrides

The UI components used by MessageComposer are read from ComponentsContext and can be customized via WithComponents. Wrap MessageComposer (or any ancestor) with WithComponents and pass the components you want to override.

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

<WithComponents
  overrides={{ SendButton: CustomSendButton, Reply: CustomReply }}
>
  <Channel channel={channel}>
    <MessageList />
    <MessageComposer />
  </Channel>
</WithComponents>;

The following components can be overridden: