Composer UI components

The default MessageComposer is built from the parts on this page. Each part reads the composer from useMessageComposer(), so it works in a channel, in a thread and while a message is being edited. Message composer UI explains what each part shows and which store it reads.

Best practices

• Replace a part by registering it under its override key with WithComponents, so the default layout keeps the rest.
• Render the parts inside a Channel or a Thread. They read MessageInputContext and the composer from them, and throw outside both.
• Keep the SDK's text input in a custom layout, by rendering InputView or AutoCompleteInput, so typing, mentions and commands keep reaching the composer.
• To keep a default part and add to it, register a component that renders the exported part with your additions around it.
• Declare override objects once, at module scope. WithComponents reads them when it mounts.

Available building blocks

The parts below MessageComposer, in the order the row renders them:

The edit button, which shows a checkmark while a message is being edited or a command is active, and the command chip have no override key and aren't exported. Replace MessageInputTrailingView to change the edit button, and InputView to change the command chip. LinkPreviewList isn't exported either: replace MessageInputHeaderView to change the link previews.

WithComponents also accepts the keys InputButtons, ShowThreadMessageInChannelButton, MessageInputLeadingView and MessageInputFooterView, but no component reads them, so registering them changes nothing. To change the parts they name, replace the part that renders them: MessageComposerLeadingView for InputButtons, and InputView for ShowThreadMessageInChannelButton. The exported MessageInputLeadingView and MessageInputFooterView render nothing, and the default layout doesn't render them.

The composer's recorder parts are on Audio recorder, and the attachment picker's on Attachment picker. The Input key replaces the whole row; see What it renders.

InputButtons props

InputButtons reads its props from MessageInputContext and the user's capabilities. Pass one to override it. It renders AttachButton when one of hasCameraPicker, hasFilePicker and hasImagePicker is true, uploadFile is true and no command is active. Otherwise it renders nothing.

AttachButton props

AttachButton reads its props from MessageInputContext and the attachment picker. Pass one to override it.

InputView props

InputView passes its props to AutoCompleteInput, which renders the TextInput. MessageComposer passes TextInputComponent and the additionalTextInputProps it has. Both take every TextInput prop and these:

The TextInput props are spread after the SDK's own, so they replace them:

• onChangeText, onSelectionChange and value replace the SDK's handling. With your own onChangeText, typing doesn't reach the composer.
• placeholder replaces "Send a message", a command's placeholder, such as "Search GIFs" for /giphy, and the slow mode placeholder.
• style replaces the SDK's style of the input, instead of adding to it.
• numberOfLines sets how many lines the input grows to before it scrolls, 5 by default.

The input is not editable while the composer's text.enabled setting is false, and its maxLength is the composer's text.maxLengthOnSend.

ShowThreadMessageInChannelButton props

ShowThreadMessageInChannelButton reads its props from ThreadContext. It renders only while thread is set and allowThreadMessagesInChannel is true. Pressing it toggles showReplyInChannel in the composer's state with MessageComposer.toggleShowReplyInChannel().

Suggestion props

AutoCompleteSuggestionList takes no props. It reads textComposer.state.suggestions, renders the items of its search source, loads more of them at the end of the list, and announces the list to screen readers when it opens. It renders the two parts below with these props.

AutoCompleteSuggestionHeader:

AutoCompleteSuggestionItem:

MentionSuggestionItem gets the suggestion's fields as props. EmojiSuggestionItem and CommandSuggestionItem are exported too, and have no override key: replace AutoCompleteSuggestionItem to change them. Mentions and Suggestions explain where the suggestions come from.

Upload preview props

AttachmentUploadPreviewList takes no props. It renders a preview per attachment, by type, with these props. With audioRecordingSendOnComplete, voice recordings get no preview, because they're sent at once.

ImageAttachmentUploadPreviewProps, FileAttachmentUploadPreviewProps and AudioAttachmentUploadPreviewProps are exported, each with A set to the attachment types it previews. The default video preview renders the SDK's image preview, not your ImageAttachmentUploadPreview, so replace VideoAttachmentUploadPreview to change videos too.

Upload state indicators

The previews show an attachment's upload state with these parts, each an override key. Which one shows depends on the attachment's uploadState and on the composer's attachments.pendingUploadsEnabled setting, which is off by default and which Chat turns on with enableOfflineSupport:

With pending uploads on, the message is sent while its attachments upload, and the message list shows their progress instead; see Sending with pending uploads. An image or video preview also shows ImageLoadingIndicator while its thumbnail loads.

The file and image versions of the in-progress indicator take UploadInProgressIndicatorProps, and the others FileUploadRetryIndicatorProps, FileUploadNotSupportedIndicatorProps and ImageUploadRetryIndicatorProps.

AttachmentUploadIndicator draws the progress with two more override keys, which the attachments of a message sent with pending uploads use too. For a file, it renders CircularProgressIndicator, 16 points wide, while the progress is known, and an ActivityIndicator while it isn't. For an image or a video, it renders MediaUploadProgressOverlay, which covers the thumbnail and draws a CircularProgressIndicator, 28 points wide with a stroke of 3, or an ActivityIndicator, in its center.

CircularProgressIndicator takes CircularProgressIndicatorProps:

MediaUploadProgressOverlay takes MediaUploadProgressOverlayProps:

The overlay's background is the backgroundCoreOverlayLight token, and messageItemView.attachmentUploadIndicator.overlayContent in the theme styles it. It doesn't take touches, so the thumbnail under it stays pressable.

OutputButtons props

OutputButtons reads its props from MessageInputContext, the channel and the composer. Pass one to override it. It renders, in this order, the first control that applies:

1. StopMessageStreamingButton, while the channel's AI state is thinking or generating. It calls Channel.stopAIResponse().
2. The edit button, while a message is being edited or a command is active. It's disabled while the composition is empty.
3. CooldownTimer, while cooldownIsActive is true.
4. StartAudioRecordingButton, when audioRecordingEnabled is true and the composer has no text and no attachments.
5. SendButton, otherwise. It's disabled until the composer has something to send.

SendButton props

StopMessageStreamingButton props

SDK integration explains the AI state.

Example

This send button keeps the default and adds a counter of the characters typed. It registers as SendButton, so it shows in the same cases as the default:

import { StyleSheet, Text, View } from "react-native";
import type { TextComposerState } from "stream-chat";
import type { SendButtonProps } from "stream-chat-react-native";
import {
  SendButton,
  useMessageComposer,
  useStateStore,
  WithComponents,
} from "stream-chat-react-native";
import type { PropsWithChildren } from "react";

const textLengthSelector = ({ text }: TextComposerState) => ({
  length: text.length,
});

const SendButtonWithCount = (props: SendButtonProps) => {
  const { textComposer } = useMessageComposer();
  const { length } = useStateStore(textComposer.state, textLengthSelector);

  return (
    <View style={styles.row}>
      {length ? <Text style={styles.count}>{length}</Text> : null}
      <SendButton {...props} />
    </View>
  );
};

const overrides = { SendButton: SendButtonWithCount };

export const ComposerOverrides = ({ children }: PropsWithChildren) => (
  <WithComponents overrides={overrides}>{children}</WithComponents>
);

const styles = StyleSheet.create({
  count: { fontSize: 12 },
  row: { alignItems: "center", flexDirection: "row", gap: 4 },
});

Wrap the Channel and Thread screens in ComposerOverrides. The Custom composer UI cookbook builds a whole composer row of its own.

Hooks

• useMessageComposer: the composer the parts write into.
• useAttachmentManagerState: the attachments and whether more fit.
• useMessageComposerHasSendableData: whether the send button is enabled.
• usePendingUploadsEnabled: whether the composer sends before uploads finish.
• useCooldownRemaining: the seconds left of a slow mode cooldown.