MessageInput

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

Best Practices

• Render MessageInput 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,
  MessageInput,
  OverlayProvider,
} from "stream-chat-react-native";

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

export const App = () => (
  <OverlayProvider>
    <Chat client={client}>
      <Channel channel={channel}>
        <MessageList />
        <MessageInput />
      </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

attachmentPickerBottomSheetHeight

Height of the attachment picker bottom sheet when open.

attachmentSelectionBarHeight

Height of the attachment selection bar in the attachment picker.

bottomInset

Offsets the MessageList when the attachment picker opens. Use to override bottomInset from AttachmentPickerContext.

additionalTextInputProps

Extra props passed to the underlying TextInput in MessageInput.

asyncMessagesLockDistance

Pixels the user must drag upward to lock recording and lift their finger without stopping it.

asyncMessagesMinimumPressDuration

Minimum press duration (ms) on the record button to start voice recording.

asyncMessagesMultiSendEnabled

When enabled, recordings don’t send immediately. They stack in the composer so users can send multiple voice recordings in one message.

asyncMessagesSlideToCancelDistance

Pixels the user must drag toward the leading side to cancel voice recording.

audioRecordingEnabled

Enable or disable audio recording.

channel

Channel instance from the Stream Chat client.

closeAttachmentPicker

Dismiss the attachment picker, if its already open.

closePollCreationDialog

Function called whenever the close button is pressed on the poll creation modal. Has no effect if PollCreateContent is custom.

cooldownEndsAt

The time at which the active cool-down will end.

editing

Defined with message type if the user is editing some message within MessageInput component else its undefined.

inputBoxRef

Ref for TextInput component within MessageInput

isOnline

The value is true, when current user is connected to chat.

members

Members of current channel. This value is received from backend when you query a channel, either using client.queryChannels() or channel.watch() API call.

Record<
  string, // userId
  {
    banned?: boolean;
    created_at?: string;
    invite_accepted_at?: string;
    invite_rejected_at?: string;
    invited?: boolean;
    is_moderator?: boolean;
    role?: string;
    shadow_banned?: boolean;
    updated_at?: string;
    user?: UserResponse<UserType>;
    user_id?: string;
  }
>;

selectedPicker

Value is images (string), when image attachment picker is open else undefined.

sendMessage

Sends a composed message within MessageInput component to channel. This function is attached to onPress handler of SendButton. The message optimistically gets added to message list UI first, before actually making API call to server. During this intermediate stage, MessageStatus component will display an indicator for "pending" state.

The function takes an object as a parameter with the following properties:

showPollCreationDialog

A boolean signifying whether the poll creation dialog is shown or not. Will always be false if PollCreateContent is custom.

threadList

Indicates the Channel is rendering a thread. Used to avoid concurrency issues between the main channel and thread.

watchers

Watchers of current channel. This value is received from backend when you query a channel, either using client.queryChannels() or channel.watch() API call.

Record<
  string, // string
  UserResponse<UserType>
>;

UI Component Props

AttachmentUploadPreviewList

Renders previews of attached files and images in MessageInput.

AttachmentPickerSelectionBar

Renders the attachment picker selection bar (image, file, camera icons).

AudioRecorder

Custom UI for audio recorder controls in MessageInput.

AudioRecordingInProgress

Custom UI for an in-progress audio recording in MessageInput (waveform, duration, etc.).

AudioRecordingLockIndicator

Custom lock indicator for audio recording in MessageInput.

AudioRecordingPreview

Custom UI to preview and play an audio recording in MessageInput.

AudioRecordingWaveform

Custom waveform UI for audio recording in MessageInput.

AutoCompleteSuggestionList

Renders the autocomplete suggestion list.

CommandInput

Renders the message input in an active command state.

CooldownTimer

Renders a countdown timer for message send cooldowns in MessageInput.

CreatePollContent

A custom UI component used to render the entire poll creation form. It has access to the CreatePollContext values by default through the useCreatePollContext hook.

Input

Renders the UI for the enclosed MessageInput. See Customizing Message Input.

InputButtons

Renders action buttons (CommandsButton and AttachButton) on the left side of the MessageInput.

InputEditingStateHeader

Renders the header when editing a message in the input.

InputReplyStateHeader

Renders the reply header in the message input.

Reply

Renders a preview of the parent message for quoted replies.

SendButton

Renders the send message button inside MessageInput.

ShowThreadMessageInChannelButton

Renders a checkbox in Thread that sets show_in_channel to true when checked.

StartAudioRecordingButton

Custom mic button for audio recording in MessageInput.

StopMessageStreamingButton

Custom button to stop AI generation, shown instead of SendButton in MessageInput.

TextInputComponent

The component prop to override the default TextInput component used in the message input's AutoCompleteInput.