MessageInputContext

MessageInputContext is provided by Channel. If you are not familiar with the React Context API, see the React docs.

Best Practices

• Prefer useMessageInputContext for consistent access and typings.
• Use context handlers (sendMessage, editMessage) to keep behavior aligned with the SDK.
• Keep input-related props stable to avoid re-renders while typing.
• Use toggleAttachmentPicker and related helpers to keep picker state consistent.
• Respect cooldowns and permissions before allowing sends or uploads.

Basic Usage

Consume MessageInputContext in any child of Channel:

import { useContext } from "react";
import { MessageInputContext } from "stream-chat-react-native";

const { sendMessage, toggleAttachmentPicker } = useContext(MessageInputContext);

Alternatively, use the useMessageInputContext hook.

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

const { sendMessage, toggleAttachmentPicker } = useMessageInputContext();

Value

additionalTextInputProps

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.

attachmentPickerBottomSheetHandleHeight

Height of the attachment picker bottom sheet handle.

attachmentPickerBottomSheetHeight

Height of the attachment picker bottom sheet when open.

attachmentSelectionBarHeight

Height of the attachment selection bar in the attachment picker.

compressImageQuality

Image compression quality before upload.

cooldownEndsAt

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

editMessage

Handles the edit message event on the message input by taking the new message as input and updating the message for the client.

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

handleAttachButtonPress

Customize behavior when the AttachButton is pressed in the message input.

hasCameraPicker

Enable the camera picker in MessageInput.

hasCommands

Enable commands in MessageInput.

hasFilePicker

Enable the file picker in MessageInput.

hasImagePicker

Enable the image picker in MessageInput.

sendMessage

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.

doFileUploadRequest

inputBoxRef

Ref for TextInput component within MessageInput

openAttachmentPicker

Opens the attachment picker bottom sheet, if its not open.

openPollCreationDialog

Called when the poll creation button is clicked in the attachment picker. Use it to override the default modal UI.

If overridden, a payload is passed with sendMessage from MessageInputContext for use in CreatePoll.

pickAndUploadImageFromNativePicker

Opens the native image picker and uploads the selected image.

pickFile

Opens the native document/file picker and uploads the selected files.

selectedPicker

setInputBoxRef

Setter function for inputBoxRef

showPollCreationDialog

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

takeAndUploadImage

Function to click an image using the device camera and upload it.

thread

toggleAttachmentPicker

Function to toggle attachment picker. By default, this function is attached to onPress handler for AttachButton.

uploadNewFile

Function to upload an attached file in MessageInput. This invokes the Message composer Attachment Manager's uploadFiles method to handle the file upload process.

This handles the abort controller to make sure that the upload can be cancelled if needed.

Components Props

AttachButton

Renders the attach button next to the input box.

AttachmentUploadPreviewList

Renders previews of attached files and images in MessageInput.

AudioAttachmentUploadPreview

Customize the audio attachment upload preview in MessageInput.

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.

AutoCompleteSuggestionHeader

Renders the autocomplete suggestion header.

AutoCompleteSuggestionItem

Renders an autocomplete suggestion item.

AutoCompleteSuggestionList

Renders the autocomplete suggestion list.

AttachmentPickerBottomSheetHandle

Bottom sheet handle component for the attachment picker.

AttachmentPickerSelectionBar

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

CameraSelectorIcon

Camera selector icon in the attachment selector bar.

CooldownTimer

Renders a countdown timer for message send cooldowns in MessageInput.

CommandsButton

Renders the button next to the input box that opens the commands list.

CommandInput

Renders the message input in an active command state.

CreatePollIcon

Create poll icon in the attachment selector bar.

FileSelectorIcon

File selector icon in the attachment selector bar.

ImageSelectorIcon

Image selector icon in the attachment selector bar.

VideoRecorderSelectorIcon

Video recorder selector icon in the attachment selector bar.

FileAttachmentUploadPreview

Customize the file attachment upload preview in MessageInput.

ImageAttachmentUploadPreview

Customize the image attachment upload preview in MessageInput.

VideoAttachmentUploadPreview

Customize the video attachment upload preview in MessageInput.

AttachmentUploadProgressIndicator

Renders upload progress for images/files in the message input.

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.

MoreOptionsButton

Renders the MessageInput “more options” button (for AttachButton, CommandsButton, etc.).

SendButton

Renders the send message button inside MessageInput.

SendMessageDisallowedIndicator

Renders an indicator when the current user can’t send messages.

ShowThreadMessageInChannelButton

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

StartAudioRecordingButton

Custom mic button for audio recording in MessageInput.

CreatePollContent