MessageComposer

MessageComposer renders the message input of a channel or a thread. The message being written lives in a MessageComposer object from stream-chat, such as channel.messageComposer. The component renders that object and calls it when the user types, attaches, records or sends. Message composer UI explains the parts it renders and which composer it writes into, and Message composer explains the object.

Best practices

• Render it inside a Channel or a Thread. It reads the channel, the composer and its settings from them, and throws outside both.
• Configure the composer on Channel and Thread, not on MessageComposer. Props such as audioRecordingEnabled, hasCommands and messageInputFloating reach the composer's parts and the message list through MessageInputContext. Most of the props MessageComposer accepts don't, as the Props tables show.
• Change what is sent in the state layer: transform the message with composer middleware, or replace the request with a sendMessageRequest handler, as Customizing requests shows.
• Change the look with WithComponents. Each part of the composer has an override key, listed on Composer UI components.
• Declare additionalTextInputProps once, at module scope or in useMemo. MessageComposer re-renders when the object changes.

Basic usage

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 }: { channel: StreamChannel }) => (
  <Channel audioRecordingEnabled channel={channel}>
    <MessageList />
    <MessageComposer />
  </Channel>
);

export const ThreadScreen = ({ thread }: { thread: StreamThread }) => (
  <Thread audioRecordingEnabled thread={thread}>
    <MessageList />
    <MessageComposer />
  </Thread>
);

The first composer writes into channel.messageComposer, the second into thread.messageComposer. Voice recording is turned on with a prop of Channel and of Thread, because neither passes its configuration to the other.

What it renders

MessageComposer renders the composer row: MessageComposerLeadingView with the attach button, then a box with MessageInputHeaderView (the previews), InputView (the command chip, the text input and the also-send-to-channel checkbox) and MessageInputTrailingView (the send button or its replacement), then MessageComposerTrailingView. While the user records a voice message, the recorder parts take the input's place. Each of these is an override key; Composer UI components lists them with their props, and Audio recorder covers the recorder.

It also renders:

• in place of everything above, SendMessageDisallowedIndicator, once the channel's capabilities are known and the user lacks send-message, unless a message is being edited;
• the default poll creation dialog, CreatePoll in a PollModal, while showPollCreationDialog is true (see Poll components);
• the Input override in place of the row, when you register one. It gets additionalTextInputProps and getUsers(), which returns the users of members and watchers without duplicates.

When it mounts inside a Thread, it loads the thread's saved draft into the thread's composer, when drafts are turned on. When it unmounts, it closes the attachment picker. It doesn't save or clear the composer: see Drafts.

With messageInputFloating, the row floats over the message list, with a shadow, instead of sitting below it. The message list reads the same setting from MessageInputContext to leave room for it, so set it on Channel or Thread.

Props

All props are optional. Without a prop, MessageComposer uses the value it reads from its context or computes itself, which the Default column names.

Props that have no effect

MessageComposer accepts these props, but none of its parts reads them from MessageComposer. The parts read the values from their contexts instead. Set the configuration ones on Channel or Thread.

A change to audioRecordingEnabled, audioRecordingSendOnComplete, asyncMessagesMinimumPressDuration, openPollCreationDialog, editing, isOnline or t still re-renders MessageComposer.

Examples

Change the text input

This composer capitalizes sentences and shows a placeholder of its own. The props are declared once, at module scope:

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

const textInputProps: TextInputProps = {
  autoCapitalize: "sentences",
  placeholder: "Write to the team",
};

export const ChannelScreen = ({ channel }: { channel: StreamChannel }) => (
  <Channel channel={channel}>
    <MessageList />
    <MessageComposer additionalTextInputProps={textInputProps} />
  </Channel>
);

The placeholder replaces the command and slow mode placeholders too. To keep them, set additionalTextInputProps without a placeholder. To set the same props for every composer under a Channel or Thread, pass additionalTextInputProps to it instead.

Focus the input

inputBoxRef in MessageInputContext holds the text input. A part rendered inside the composer, or anywhere under the Channel or Thread, focuses it:

import { Pressable, Text } from "react-native";
import { useMessageInputContext } from "stream-chat-react-native";

export const FocusComposerButton = () => {
  const { inputBoxRef } = useMessageInputContext();

  return (
    <Pressable onPress={() => inputBoxRef.current?.focus()}>
      <Text>Reply</Text>
    </Pressable>
  );
};

Hooks

• useMessageComposer: the composer a component writes into.
• useMessageInputContext: the composer's settings, the send function, the pickers and the recorder. The values are on MessageInputContext.
• useMessageComposerHasSendableData: whether the send button is enabled.

Composer hooks lists the rest.