# MessageComposer
`MessageComposer` provides UI and functionality for composing messages (attachment picker, commands, mentions, autocomplete). It must be rendered inside `Channel`.
## Best Practices
- Render `MessageComposer` 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
```tsx {17}
import { StreamChat } from "stream-chat";
import {
Chat,
Channel,
MessageList,
MessageComposer,
OverlayProvider,
} from "stream-chat-react-native";
const client = StreamChat.getInstance("api_key");
export const App = () => (
);
```
## 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:
```ts
import { FileReference } from "stream-chat";
export type File = FileReference;
```
## Props
Most configuration lives on the [`Channel`](/chat/docs/sdk/react-native/core-components/channel/) component. See [Customizing Message Composer](/chat/docs/sdk/react-native/guides/message-input-customization/) for UI customization.
| Prop | Description | Type |
| ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| `attachmentPickerBottomSheetHeight` | Height of the attachment picker bottom sheet when open. Defaults to `40% of Window Height`. | `number` |
| `attachmentSelectionBarHeight` | Height of the attachment selection bar in the attachment picker. Defaults to `52`. | `number` |
| `bottomInset` | Offsets the `MessageList` when the attachment picker opens. For most apps, set `bottomInset` on [`Channel`](/chat/docs/sdk/react-native/core-components/channel/) instead. Use this prop only to override `bottomInset` from [`AttachmentPickerContext`](/chat/docs/sdk/react-native/contexts/attachment-picker-context/) for a specific composer instance. | `number \| undefined` |
| `additionalTextInputProps` | Extra props passed to the underlying [TextInput](https://reactnative.dev/docs/textinput#props) in [`MessageComposer`](/chat/docs/sdk/react-native/ui-components/message-composer/). | `object` |
| `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` |
| `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 `true`. | `boolean` |
| `asyncMessagesSlideToCancelDistance` | Pixels the user must drag toward the leading side to cancel voice recording. Defaults to `100`. | `number` |
| `audioRecordingEnabled` | Enable or disable audio recording. Defaults to `false`. | `boolean` |
| `channel` | Channel instance from the Stream Chat client. | [Channel](/chat/docs/javascript/creating_channels/) |
| `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`](/chat/docs/sdk/react-native/core-components/channel#createpollcontent/) is custom. | `function` |
| `compressImageQuality` | Image compression quality used by the message input upload flow. | `number` |
| `cooldownEndsAt` | The time at which the active cool-down will end. | `Date` |
| `editing` | Whether the message input is in edit mode. | - |
| `inputBoxRef` | Ref for [`TextInput`](https://reactnative.dev/docs/textinput) component within `MessageComposer`. | [React ref](https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element) |
| `isOnline` | The value is true when current user is connected to chat. | `boolean` |
| `messageInputFloating` | Renders the input in floating mode with adjusted container behavior/styles. Defaults to `false`. | `boolean` |
| `messageInputHeightStore` | Store used internally to track and share the current input height. | `MessageInputHeightStore` |
| `openPollCreationDialog` | Function used to open the poll creation dialog. | `() => void` |
| `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. Note: these calls return only up to 100 members; use `client.queryMembers()` for larger channels. | `object` |
| `selectedPicker` | Value is `'images'` when image attachment picker is open, else `undefined`. | `'images' \| undefined` |
| `sendMessage` | Sends a composed message within `MessageComposer` component to channel. Attached to the `onPress` handler of [`SendButton`](/chat/docs/sdk/react-native/core-components/channel#sendbutton/). The message optimistically gets added to message list UI first, before making API call to server. | `function` |
| `showPollCreationDialog` | A boolean signifying whether the poll creation dialog is shown or not. Will always be `false` if [`PollCreateContent`](/chat/docs/sdk/react-native/core-components/channel#createpollcontent/) is custom. | `boolean` |
| `createPollOptionGap` | Controls spacing between poll options in the poll creation modal. | `number` |
| `threadList` | Indicates the `Channel` is rendering a thread. Used to avoid concurrency issues between the main channel and thread. | `boolean` |
| `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. Note: these calls return only up to 100 watchers; use [Channel Pagination](/chat/docs/javascript/channel_pagination/) for more. | `object` |
## UI Component Overrides
The UI components used by `MessageComposer` are read from `ComponentsContext` and can be customized via `WithComponents`. Wrap `MessageComposer` (or any ancestor) with `WithComponents` and pass the components you want to override.
```tsx
import { WithComponents } from "stream-chat-react-native";
;
```
The following components can be overridden:
| Prop | Description | Type | Default |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `AttachmentUploadPreviewList` | Renders previews of attached files and images in `MessageComposer`. | `ComponentType` | [`AttachmentUploadPreviewList`](/chat/docs/sdk/react-native/ui-components/message-composer/components/attachment-preview/attachment-upload-preview-list/) |
| `AttachmentPickerSelectionBar` | Renders the attachment picker selection bar (image, file, camera icons). | `ComponentType` | `undefined` \| [`AttachmentPickerSelectionBar`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx) |
| `AudioRecorder` | Custom UI for audio recorder controls in [MessageComposer](/chat/docs/sdk/react-native/ui-components/message-composer/). | `ComponentType` | [`AudioRecorder`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageComposer/components/AudioRecorder/AudioRecorder.tsx) |
| `AudioRecordingInProgress` | Custom UI for an in-progress audio recording in [MessageComposer](/chat/docs/sdk/react-native/ui-components/message-composer/) (waveform, duration, etc.). | `ComponentType` | [`AudioRecordingInProgress`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageComposer/components/AudioRecorder/AudioRecordingInProgress.tsx) |
| `AudioRecordingLockIndicator` | Custom lock indicator for audio recording in [MessageComposer](/chat/docs/sdk/react-native/ui-components/message-composer/). | `ComponentType` | [`AudioRecordingLockIndicator`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageComposer/components/AudioRecorder/AudioRecordingLockIndicator.tsx) |
| `AudioRecordingPreview` | Custom UI to preview and play an audio recording in [MessageComposer](/chat/docs/sdk/react-native/ui-components/message-composer/). | `ComponentType` | [`AudioRecordingPreview`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageComposer/components/AudioRecorder/AudioRecordingPreview.tsx) |
| `AudioRecordingWaveform` | Custom waveform UI for audio recording in [MessageComposer](/chat/docs/sdk/react-native/ui-components/message-composer/). | `ComponentType` | [`AudioRecordingWaveform`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageComposer/components/AudioRecorder/AudioRecordingWaveform.tsx) |
| `AutoCompleteSuggestionList` | Renders the autocomplete suggestion list. | `ComponentType` | [`AutoCompleteSuggestionList`](/chat/docs/sdk/react-native/ui-components/autocomplete-suggestion-list/) |
| `CooldownTimer` | Renders a countdown timer for message send cooldowns in `MessageComposer`. | `ComponentType` | [`CooldownTimer`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageComposer/components/OutputButtons/CooldownTimer.tsx) |
| `MessageComposerLeadingView` | Custom component rendered in the leading composer slot. | `ComponentType` | [`MessageComposerLeadingView`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageComposer/MessageComposerLeadingView.tsx) |
| `MessageComposerTrailingView` | Custom component rendered in the trailing composer slot. | `ComponentType` | [`MessageComposerTrailingView`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageComposer/MessageComposerTrailingView.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/contexts/create-poll-context/) values by default through the `useCreatePollContext` hook. | `ComponentType` | [`CreatePollContent`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Poll/CreatePollContent.tsx) |
| `Input` | Renders the UI for the enclosed `MessageComposer`. See [Customizing Message Composer](/chat/docs/sdk/react-native/guides/message-input-customization/). | `ComponentType` | - |
| `InputButtons` | Renders action buttons (AttachButton) on the left side of the `MessageComposer`. | `ComponentType` | [`InputButtons`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageComposer/components/InputButtons/index.tsx) |
| `Reply` | Renders a preview of the parent message for quoted replies. | `ComponentType` | [`Reply`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Reply/Reply.tsx) |
| `SendButton` | Renders the send message button inside `MessageComposer`. | `ComponentType` | [`SendButton`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageComposer/components/OutputButtons/SendButton.tsx) |
| `ShowThreadMessageInChannelButton` | Renders a checkbox in `Thread` that sets `show_in_channel` to true when checked. | `ComponentType` | [`ShowThreadMessageInChannelButton`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageComposer/ShowThreadMessageInChannelButton.tsx) |
| `StartAudioRecordingButton` | Custom mic button for audio recording in [MessageComposer](/chat/docs/sdk/react-native/ui-components/message-composer/). | `ComponentType` | [`StartAudioRecordingButton`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageComposer/components/AudioRecorder/AudioRecordingButton.tsx) |
| `StopMessageStreamingButton` | Custom button to stop AI generation, shown instead of `SendButton` in `MessageComposer`. | `component` | [`StopMessageStreamingButton`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageComposer/StopMessageStreamingButton.tsx) |
| `MessageInputHeaderView` | Custom component rendered above the input body for reply/edit/preview content. | `ComponentType` | [`MessageInputHeaderView`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageComposer/MessageInputHeaderView.tsx) |
| `MessageInputLeadingView` | Custom component rendered in the leading inline input area. | `ComponentType` | [`MessageInputLeadingView`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageComposer/MessageInputLeadingView.tsx) |
| `MessageInputTrailingView` | Custom component rendered in the trailing inline input area. | `ComponentType` | [`MessageInputTrailingView`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageComposer/MessageInputTrailingView.tsx) |
| `TextInputComponent` | The component prop to override the default `TextInput` component used in the message input's `AutoCompleteInput`. | `ComponentType` | Default [React Native's TextInput](https://reactnative.dev/docs/textinput) |
---
This page was last updated at 2026-04-17T17:33:45.912Z.
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/message-composer/](https://getstream.io/chat/docs/sdk/react-native/ui-components/message-composer/).