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 openAttachmentPicker and closeAttachmentPicker 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, openAttachmentPicker } = useContext(MessageInputContext);

Alternatively, use the useMessageInputContext hook.

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

const { sendMessage, openAttachmentPicker } = useMessageInputContext();

Value

additionalTextInputProps

Extra props passed to the underlying TextInput in MessageInput.

allowSendBeforeAttachmentsUpload

When enabled, messages can be sent before all attachments have finished uploading.

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.

audioRecorderManager

Instance of AudioRecorderManager used to manage audio recording state internally.

audioRecordingEnabled

Enable or disable audio recording.

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.

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.

createPollOptionGap

Vertical gap between poll options in the poll creation dialog.

deleteVoiceRecording

Deletes the current voice recording.

doFileUploadRequest

Override the file upload request. The function must return a Promise that resolves to an object with the key file containing the URL of the uploaded file.

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.

inputBoxRef

Ref for TextInput component within MessageInput

messageInputFloating

Whether the message input is floating or not.

messageInputHeightStore

Store instance for tracking the message input height.

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.

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:

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.

startVoiceRecording

Starts a new voice recording session.

stopVoiceRecording

Stops the current voice recording.

takeAndUploadImage

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

thread

Can be a LocalMessage or ThreadType. Setting it indicates a thread is open. Both types are interchangeable.

With Thread, this displays the thread. With the standard MessageList, it keeps singleton components in OverlayProvider in sync.

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.

uploadVoiceRecording

Uploads the current voice recording. When multiSendEnabled is true, the recording stacks in the composer instead of being sent immediately.

Components Props

AttachButton

Renders the attach button next to the input box.

AttachmentPickerSelectionBar

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

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.

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.

FileAttachmentUploadPreview

Customize the file attachment upload preview in MessageInput.

FileUploadInProgressIndicator

Renders a progress indicator for file uploads in MessageInput.

FileUploadNotSupportedIndicator

Renders an indicator when file upload is not supported.

FileUploadRetryIndicator

Renders a retry indicator for failed file uploads.

ImageAttachmentUploadPreview

Customize the image attachment upload preview in MessageInput.

ImageUploadInProgressIndicator

Renders a progress indicator for image uploads in MessageInput.

ImageUploadNotSupportedIndicator

Renders an indicator when image upload is not supported.

ImageUploadRetryIndicator

Renders a retry indicator for failed image uploads.

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.

MessageComposerLeadingView

Custom UI component to override the leading side of the composer container.

MessageComposerTrailingView

Custom UI component to override the trailing side of the composer container.

MessageInputHeaderView

Custom UI component to override the message input header content.

MessageInputLeadingView

Custom UI component to override the leading side of the input row.

MessageInputTrailingView

Custom UI component to override the trailing side of the input row.

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.

StopMessageStreamingButton

Custom UI component to render a button that stops message streaming (for AI-generated responses).

VideoAttachmentUploadPreview

Customize the video attachment upload preview in MessageInput.