# MessageInputContext
`MessageInputContext` is provided by [`Channel`](/chat/docs/sdk/react-native/v8/core-components/channel/). If you are not familiar with the React Context API, see the [React docs](https://reactjs.org/docs/context.html).
## 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`:
```tsx
import { useContext } from "react";
import { MessageInputContext } from "stream-chat-react-native";
const { sendMessage, openAttachmentPicker } = useContext(MessageInputContext);
```
Alternatively, use the `useMessageInputContext` hook.
```tsx
import { useMessageInputContext } from "stream-chat-react-native";
const { sendMessage, openAttachmentPicker } = useMessageInputContext();
```
## Value
### additionalTextInputProps
Extra props passed to the underlying [TextInput](https://reactnative.dev/docs/textinput#props) in [`MessageInput`](/chat/docs/sdk/react-native/v8/ui-components/message-input/).
| Type |
| ------ |
| object |
### allowSendBeforeAttachmentsUpload
When enabled, messages can be sent before all attachments have finished uploading.
| Type | Default |
| ------- | ------- |
| Boolean | - |
### asyncMessagesLockDistance
Pixels the user must drag upward to lock recording and lift their finger without stopping it.
| Type | Default |
| ------ | ------- |
| Number | 50 |
### asyncMessagesMinimumPressDuration
Minimum press duration (ms) on the record button to start voice recording.
| Type | Default |
| ------ | ------- |
| Number | 500 |
### asyncMessagesMultiSendEnabled
When enabled, recordings don't send immediately. They stack in the composer so users can send multiple voice recordings in one message.
| Type | Default |
| ------- | ------- |
| Boolean | true |
### asyncMessagesSlideToCancelDistance
Pixels the user must drag toward the leading side to cancel voice recording.
| Type | Default |
| ------ | ------- |
| Number | 100 |
### audioRecorderManager
Instance of `AudioRecorderManager` used to manage audio recording state internally.
| Type |
| ---------------------- |
| `AudioRecorderManager` |
### audioRecordingEnabled
Enable or disable audio recording.
| Type | Default |
| ------- | ------- |
| Boolean | false |
### `attachmentPickerBottomSheetHeight`
Height of the attachment picker bottom sheet when open.
| Type | Default |
| ------ | -------------------- |
| Number | 40% of Window Height |
### `attachmentSelectionBarHeight`
Height of the attachment selection bar in the attachment picker.
This prop is deprecated and will be removed in v9.
| Type | Default |
| ------ | ------- |
| Number | 52 |
### 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.
| Type | Default |
| -------------------------------------- | ------------------------ |
| number 0 to 1
(1 is best quality) | iOS: 0.8
Android: 1 |
### closeAttachmentPicker
Dismiss the attachment picker, if its already open.
| Type |
| -------- |
| Function |
### `closePollCreationDialog`
Function called whenever the close button is pressed on the poll creation modal. Has no effect if [`PollCreateContent`](/chat/docs/sdk/react-native/v8/core-components/channel#createpollcontent/) is custom.
| Type |
| -------- |
| function |
### createPollOptionGap
Vertical gap between poll options in the poll creation dialog.
| Type |
| ------ |
| Number |
### deleteVoiceRecording
Deletes the current voice recording.
| Type |
| --------------------- |
| `() => Promise` |
### `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.
| Type |
| -------- |
| 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.
| Type |
| -------- |
| Function |
The 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 |
### `handleAttachButtonPress`
Customize behavior when the [AttachButton](/chat/docs/sdk/react-native/v8/ui-components/attach-button/) is pressed in the message input.
| Type |
| ------------ |
| `() => void` |
### `hasCameraPicker`
Enable the camera picker in [`MessageInput`](/chat/docs/sdk/react-native/v8/ui-components/message-input/).
| Type | Default |
| ------- | ------- |
| Boolean | `true` |
### `hasCommands`
Enable commands in [`MessageInput`](/chat/docs/sdk/react-native/v8/ui-components/message-input/).
| Type | Default |
| ------- | ------- |
| boolean | true |
### `hasFilePicker`
Enable the file picker in [`MessageInput`](/chat/docs/sdk/react-native/v8/ui-components/message-input/).
| Type | Default |
| ------- | ------- |
| Boolean | `true` |
### `hasImagePicker`
Enable the image picker in [`MessageInput`](/chat/docs/sdk/react-native/v8/ui-components/message-input/).
| Type | Default |
| ------- | ------- |
| Boolean | `true` |
### inputBoxRef
Ref for [`TextInput`](https://reactnative.dev/docs/textinput) component within `MessageInput`
| Type |
| ----------------------------------------------------------------------------------------- |
| [React ref](https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element) |
### messageInputFloating
Whether the message input is floating or not.
| Type | Default |
| ------- | ------- |
| Boolean | `false` |
### messageInputHeightStore
Store instance for tracking the message input height.
| Type |
| ------------------------- |
| `MessageInputHeightStore` |
### openAttachmentPicker
Opens the attachment picker bottom sheet, if its not open.
| Type |
| -------- |
| 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`](/chat/docs/sdk/react-native/v8/contexts/message-input-context/) for use in [`CreatePoll`](/chat/docs/sdk/react-native/v8/ui-components/create-poll/).
| Type |
| -------- |
| function |
| Parameter | Description |
| --------- | ----------------- |
| payload | `{ sendMessage }` |
### `pickAndUploadImageFromNativePicker`
Opens the native image picker and uploads the selected image.
| Type |
| --------------------- |
| `() => Promise` |
### pickFile
Opens the native document/file picker and uploads the selected files.
| Type |
| --------------------- |
| `() => Promise` |
### `sendMessage`
Sends a composed message within `MessageInput` component to channel. This function is attached to `onPress` handler of [`SendButton`](/chat/docs/sdk/react-native/v8/core-components/channel#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.
| Type |
| -------- |
| Function |
The 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 |
### setInputBoxRef
Setter function for [`inputBoxRef`](/chat/docs/sdk/react-native/v8/contexts/message-input-context#inputboxref/)
| Type |
| --------------- |
| `(ref) => void` |
### `showPollCreationDialog`
A boolean signifying whether the poll creation dialog is shown or not. Will always be `false` if [`PollCreateContent`](/chat/docs/sdk/react-native/v8/core-components/channel#createpollcontent/) is custom.
| Type |
| ------- |
| boolean |
### startVoiceRecording
Starts a new voice recording session.
| Type |
| ------------------------------------- |
| `() => Promise` |
### stopVoiceRecording
Stops the current voice recording.
| Type |
| --------------------- |
| `() => Promise` |
### `takeAndUploadImage`
Function to click an image using the device camera and upload it.
| Type |
| --------------------- |
| `() => Promise` |
### thread
Can be a `LocalMessage` or [`ThreadType`](https://github.com/GetStream/stream-chat-react-native/v8/blob/develop/package/src/contexts/threadContext/ThreadContext.tsx). Setting it indicates a thread is open. Both types are interchangeable.
With [`Thread`](/chat/docs/sdk/react-native/v8/ui-components/thread/), this displays the thread. With the standard [`MessageList`](/chat/docs/sdk/react-native/v8/ui-components/message-list/), it keeps singleton components in [`OverlayProvider`](/chat/docs/sdk/react-native/v8/core-components/overlay-provider/) in sync.
Set `thread` on all `Channel` components when a thread is open.
| Type |
| ------ |
| object |
### 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.
| Type |
| -------------------------------------------------------------------------------------------------- |
| (file: [`File`](/chat/docs/sdk/react-native/v8/ui-components/message-input/#file-type)) => Promise |
### uploadVoiceRecording
Uploads the current voice recording. When `multiSendEnabled` is true, the recording stacks in the composer instead of being sent immediately.
| Type |
| ---------------------------------------------- |
| `(multiSendEnabled: boolean) => Promise` |
## Components Props
### AttachButton
Renders the attach button next to the input box.
| Type | Default |
| ------------- | ----------------------------------------------------------------------------- |
| ComponentType | [`AttachButton`](/chat/docs/sdk/react-native/v8/ui-components/attach-button/) |
### AttachmentPickerSelectionBar
Renders the attachment picker selection bar (image, file, camera icons).
| Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | `undefined` \| [`AttachmentPickerSelectionBar`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx) |
### AttachmentUploadPreviewList
Renders previews of attached files and images in `MessageInput`.
| Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`AttachmentUploadPreviewList`](/chat/docs/sdk/react-native/v8/ui-components/attachment-upload-preview-list/) |
### AudioAttachmentUploadPreview
Customize the audio attachment upload preview in `MessageInput`.
| Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ComponentType | [`AudioAttachmentUploadPreview`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageInput/components/AttachmentPreview/AudioAttachmentUploadPreview.tsx) |
### AudioRecorder
Custom UI for audio recorder controls in [MessageInput](/chat/docs/sdk/react-native/v8/ui-components/message-input/).
| Type | Default |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`AudioRecorder`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx) |
### AudioRecordingInProgress
Custom UI for an in-progress audio recording in [MessageInput](/chat/docs/sdk/react-native/v8/ui-components/message-input/) (waveform, duration, etc.).
| Type | Default |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`AudioRecordingInProgress`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx) |
### AudioRecordingLockIndicator
Custom lock indicator for audio recording in [MessageInput](/chat/docs/sdk/react-native/v8/ui-components/message-input/).
| Type | Default |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`AudioRecordingLockIndicator`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx) |
### AudioRecordingPreview
Custom UI to preview and play an audio recording in [MessageInput](/chat/docs/sdk/react-native/v8/ui-components/message-input/).
| Type | Default |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`AudioRecordingPreview`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx) |
### AudioRecordingWaveform
Custom waveform UI for audio recording in [MessageInput](/chat/docs/sdk/react-native/v8/ui-components/message-input/).
| Type | Default |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`AudioRecordingWaveform`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingWaveform.tsx) |
### `AutoCompleteSuggestionHeader`
Renders the autocomplete suggestion header.
| Type | Default |
| ------------- | -------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`AutoCompleteSuggestionHeader`](/chat/docs/sdk/react-native/v8/ui-components/autocomplete-suggestion-header/) |
### `AutoCompleteSuggestionItem`
Renders an autocomplete suggestion item.
| Type | Default |
| ------------- | ---------------------------------------------------------------------------------------------------------- |
| ComponentType | [`AutoCompleteSuggestionItem`](/chat/docs/sdk/react-native/v8/ui-components/autocomplete-suggestion-item/) |
### `AutoCompleteSuggestionList`
Renders the autocomplete suggestion list.
| Type | Default |
| ------------- | ---------------------------------------------------------------------------------------------------------- |
| ComponentType | [`AutoCompleteSuggestionList`](/chat/docs/sdk/react-native/v8/ui-components/autocomplete-suggestion-list/) |
### CooldownTimer
Renders a countdown timer for message send cooldowns in `MessageInput`.
| Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`CooldownTimer`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageInput/CooldownTimer.tsx) |
### CreatePollContent
A custom UI component used to render the entire poll creation form. It has access to the [`CreatePollContext`](/chat/docs/sdk/react-native/v8/contexts/create-poll-context/) values by default through the `useCreatePollContext` hook.
| Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`CreatePollContent`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/Poll/CreatePollContent.tsx) |
### FileAttachmentUploadPreview
Customize the file attachment upload preview in `MessageInput`.
| Type | Default |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`FileAttachmentUploadPreview`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx) |
### FileUploadInProgressIndicator
Renders a progress indicator for file uploads in `MessageInput`.
| Type |
| ------------- |
| ComponentType |
### FileUploadNotSupportedIndicator
Renders an indicator when file upload is not supported.
| Type |
| ------------- |
| ComponentType |
### FileUploadRetryIndicator
Renders a retry indicator for failed file uploads.
| Type |
| ------------- |
| ComponentType |
### ImageAttachmentUploadPreview
Customize the image attachment upload preview in `MessageInput`.
| Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ComponentType | [`ImageAttachmentUploadPreview`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx) |
### ImageUploadInProgressIndicator
Renders a progress indicator for image uploads in `MessageInput`.
| Type |
| ------------- |
| ComponentType |
### ImageUploadNotSupportedIndicator
Renders an indicator when image upload is not supported.
| Type |
| ------------- |
| ComponentType |
### ImageUploadRetryIndicator
Renders a retry indicator for failed image uploads.
| Type |
| ------------- |
| ComponentType |
### Input
Renders the UI for the enclosed `MessageInput`.
See [Customizing Message Input](/chat/docs/sdk/react-native/v8/guides/message-input-customization/).
| Type |
| ------------- |
| ComponentType |
### InputButtons
Renders action buttons (CommandsButton and AttachButton) on the left side of the `MessageInput`.
| Type | Default |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`InputButtons`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageInput/InputButtons.tsx) |
### MessageComposerLeadingView
Custom UI component to override the leading side of the composer container.
| Type |
| ------------- |
| ComponentType |
### MessageComposerTrailingView
Custom UI component to override the trailing side of the composer container.
| Type |
| ------------- |
| ComponentType |
### MessageInputHeaderView
Custom UI component to override the message input header content.
| Type |
| ------------- |
| ComponentType |
### MessageInputLeadingView
Custom UI component to override the leading side of the input row.
| Type |
| ------------- |
| ComponentType |
### MessageInputTrailingView
Custom UI component to override the trailing side of the input row.
| Type |
| ------------- |
| ComponentType |
### SendButton
Renders the send message button inside `MessageInput`.
| Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`SendButton`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageInput/SendButton.tsx) |
### SendMessageDisallowedIndicator
Renders an indicator when the current user can't send messages.
| Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`SendMessageDisallowedIndicator`](/chat/docs/sdk/react-native/v8/ui-components/send-message-disallowed-indicator/) |
### ShowThreadMessageInChannelButton
Renders a checkbox in `Thread` that sets `show_in_channel` to true when checked.
| Type | Default |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`ShowThreadMessageInChannelButton`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageInput/ShowThreadMessageInChannelButton.tsx) |
### StartAudioRecordingButton
Custom mic button for audio recording in [MessageInput](/chat/docs/sdk/react-native/v8/ui-components/message-input/).
| Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ComponentType | [`StartAudioRecordingButton`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx) |
### StopMessageStreamingButton
Custom UI component to render a button that stops message streaming (for AI-generated responses).
| Type |
| ----------------------- |
| ComponentType \| `null` |
### VideoAttachmentUploadPreview
Customize the video attachment upload preview in `MessageInput`.
| Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ComponentType | [`VideoAttachmentUploadPreview`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx) |
---
This page was last updated at 2026-04-17T17:33:44.733Z.
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v8/contexts/message-input-context/](https://getstream.io/chat/docs/sdk/react-native/v8/contexts/message-input-context/).