Skip to content

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();

Values

Value Description Type
additionalTextInputProps Extra props passed to the underlying TextInput in MessageComposer. object
allowSendBeforeAttachmentsUpload When enabled, messages can be optimistically created before all attachments finish uploading. Pending uploads are tracked through client.uploadManager, and the message list can render upload progress for those attachments. boolean
asyncMessagesLockDistance Pixels the user must drag upward to lock recording and lift their finger without stopping it. Defaults to 50. number
asyncMessagesMinimumPressDuration Minimum press duration (ms) on the record button to start voice recording. Defaults to 500. number
asyncMessagesSlideToCancelDistance Pixels the user must drag toward the leading side to cancel voice recording. Defaults to 75. number
attachmentPickerBottomSheetHeight Height of the attachment picker bottom sheet when open. Defaults to 333 (or 72 when the attachment picker is disabled). number
audioRecorderManager Instance of AudioRecorderManager used to manage audio recording state internally. AudioRecorderManager
audioRecordingEnabled Enable or disable audio recording. Defaults to false. boolean
audioRecordingSendOnComplete Controls what happens after a completed voice recording upload. When true, sends the voice recording immediately after upload. When false, keeps it in the composer so the user can add text, attachments, or more recordings before sending. Defaults to false. boolean
closeAttachmentPicker Dismiss the attachment picker, if its already open. function
closePollCreationDialog Function called whenever the close button is pressed on the poll creation modal. Has no effect if PollCreateContent is custom. function
compressImageQuality Image compression quality before upload. On iOS, values >= 0.8 usually keep quality while reducing size. A value of 0.8 can roughly halve file size vs 1.0. Defaults to 0.8 on iOS, 1 on Android. number (0 to 1, 1 is best quality)
createPollOptionGap Vertical gap between poll options in the poll creation dialog. number
deleteVoiceRecording Deletes the current voice recording. () => Promise<void>
doFileUploadRequest Custom function to handle file upload requests. function
editMessage Handles the edit message event on the message input by taking the new message as input and updating the message for the client. See Examples for parameter details. function
focusInputOnPickerClose Controls what happens when the AttachButton is pressed while the attachment picker is open. If true (default), the input is focused, toggling to the keyboard; if false, the picker is closed instead. Defaults to true. boolean
handleAttachButtonPress Customize behavior when the AttachButton is pressed in the message input. () => void
hasCameraPicker Enable the camera picker in MessageComposer. Defaults to true. boolean
hasCommands Enable commands in MessageComposer. Defaults to true. boolean
hasFilePicker Enable the file picker in MessageComposer. Defaults to true. boolean
hasImagePicker Enable the image picker in MessageComposer. Defaults to true. boolean
inputBoxRef Ref for TextInput component within MessageComposer. React ref
messageInputFloating Whether the message input is floating or not. Defaults to false. boolean
messageInputHeightStore Store instance for tracking the message input height. MessageInputHeightStore
openAttachmentPicker Opens the attachment picker bottom sheet, if its not open. function
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. See Examples for parameter details. function
pickAndUploadImageFromNativePicker Opens the native image picker and uploads the selected image. () => Promise<void>
pickFile Opens the native document/file picker and uploads the selected files. () => Promise<void>
sendMessage Sends a composed message within MessageComposer component to channel. Attached to the onPress handler of SendButton. The message optimistically gets added to the message list UI first, before actually making the API call to the server. See Examples for parameter details. function
setInputBoxRef Setter function for inputBoxRef. (ref) => void
setInputRef Optional internal ref setter forwarded alongside setInputBoxRef to receive the underlying TextInput ref. Primarily used internally; most apps should use inputBoxRef/setInputBoxRef instead. (ref: TextInput | null) => void
showPollCreationDialog A boolean signifying whether the poll creation dialog is shown or not. Will always be false if PollCreateContent is custom. boolean
startVoiceRecording Starts a new voice recording session. () => Promise<boolean | undefined>
stopVoiceRecording Stops the current voice recording. () => Promise<void>
takeAndUploadImage Function to capture media using the device camera and upload it. Accepts an optional mediaType and resolves to an object describing the result (or undefined). (mediaType?: MediaTypes) => Promise<{ askToOpenSettings?: boolean; canceled?: boolean } | undefined>
thread Can be a LocalMessage or ThreadType. Setting it indicates a thread is open. With Thread, this displays the thread. With the standard MessageList, it keeps singleton components in OverlayProvider in sync. Set thread on all Channel components when a thread is open. object
uploadNewFile Function to upload an attached file in MessageComposer. Invokes the Message composer Attachment Manager's uploadFiles method to handle the file upload process. Handles the abort controller to make sure the upload can be cancelled if needed. (file: File) => Promise
uploadVoiceRecording Uploads the current voice recording. When sendOnComplete is true, the recording is sent immediately after upload. When false, the recording stays in the composer so the user can add text, attachments, or more recordings before sending. (sendOnComplete: boolean) => Promise<void>

Examples

editMessage

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

Parameter Description
localMessage Contains the message data that will be shown in the UI immediately
options Contains options for sending/updating the message

openPollCreationDialog

When overridden, the openPollCreationDialog function receives a payload parameter:

Parameter Description
payload { sendMessage }

sendMessage

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

Parameter Description
localMessage Contains the message data that will be shown in the UI immediately
message Contains the data that will be sent to the backend
options Contains options for sending/updating the message