# 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 = () => (
  <OverlayProvider>
    <Chat client={client}>
      <Channel channel={channel}>
        <MessageList />
        <MessageComposer />
      </Channel>
    </Chat>
  </OverlayProvider>
);
```

## 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

<admonition type="note">

Most configuration lives on the [`Channel`](/chat/docs/sdk/react-native/v9/core-components/channel/) component. See [Customizing Message Composer](/chat/docs/sdk/react-native/v9/guides/message-input-customization/) for UI customization.

</admonition>

### `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.

| Type   | Default |
| ------ | ------- |
| Number | 52      |

### `bottomInset`

Offsets the `MessageList` when the attachment picker opens. Use to override `bottomInset` from [`AttachmentPickerContext`](/chat/docs/sdk/react-native/v9/contexts/attachment-picker-context/).

| Type                |
| ------------------- |
| Number \| undefined |

### `additionalTextInputProps`

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/ui-components/channel/props/additional_text_input_props"></partial>

### `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     |

### `audioRecordingSendOnComplete`

Controls what happens after a completed voice recording upload.

- `true`: send the voice recording immediately after upload.
- `false`: keep it in the composer so the user can add text, attachments, or more recordings before sending.

| Type    | Default |
| ------- | ------- |
| Boolean | true    |

### `asyncMessagesSlideToCancelDistance`

Pixels the user must drag toward the leading side to cancel voice recording.

| Type   | Default |
| ------ | ------- |
| Number | 100     |

### `audioRecordingEnabled`

Enable or disable audio recording.

| Type    | Default |
| ------- | ------- |
| Boolean | false   |

### `channel`

Channel instance from the Stream Chat client.

| Type                                                |
| --------------------------------------------------- |
| [Channel](/chat/docs/javascript/creating_channels/) |

### `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/v9/core-components/channel#createpollcontent/) is custom.

| Type     |
| -------- |
| function |

### `compressImageQuality`

Image compression quality used by the message input upload flow.

| Type     |
| -------- |
| `number` |

### `cooldownEndsAt`

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

| Type |
| ---- |
| Date |

### `editing`

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/contexts/message-input-context/editing"></partial>

### `inputBoxRef`

Ref for [`TextInput`](https://reactnative.dev/docs/textinput) component within `MessageComposer`

| Type                                                                                      |
| ----------------------------------------------------------------------------------------- |
| [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.

| Type    |
| ------- |
| boolean |

### `messageInputFloating`

Renders the input in floating mode with adjusted container behavior/styles.

| Type      | Default |
| --------- | ------- |
| `boolean` | `false` |

### `messageInputHeightStore`

Store used internally to track and share the current input height.

| Type                      |
| ------------------------- |
| `MessageInputHeightStore` |

### `openPollCreationDialog`

Function used to open the poll creation dialog.

| Type         |
| ------------ |
| `() => void` |

### `members`

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/contexts/channel-context/members"></partial>

### `selectedPicker`

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/contexts/attachment-picker-context/selected_picker"></partial>

### `sendMessage`

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/contexts/message-input-context/send_message"></partial>

### `showPollCreationDialog`

A boolean signifying whether the poll creation dialog is shown or not. Will always be `false` if [`PollCreateContent`](/chat/docs/sdk/react-native/v9/core-components/channel#createpollcontent/) is custom.

| Type    |
| ------- |
| boolean |

### `createPollOptionGap`

Controls spacing between poll options in the poll creation modal.

| Type     |
| -------- |
| `number` |

### `threadList`

Indicates the `Channel` is rendering a thread. Used to avoid concurrency issues between the main channel and thread.

| Type    |
| ------- |
| boolean |

### `watchers`

Watchers of current channel. This value is received from backend when you query a channel, either using [`client.queryChannels()`](/chat/docs/javascript/query_channels/) or [`channel.watch()`](/chat/docs/javascript/creating_channels/) API call.

<admonition type="warning">

`client.queryChannels()` or `channel.watch()` returns only up to 100 watchers for channel. So if you expect total number of watchers to be > 100, you should request them explicitly using [Channel Pagination](/chat/docs/javascript/channel_pagination/)

</admonition>

```tsx
Record<
  string, // string
  UserResponse<UserType>
>;
```

| Type   |
| ------ |
| object |

## UI Component Props

### AttachmentUploadPreviewList

Renders previews of attached files and images in `MessageComposer`.

| Type          | Default                                                                                                                                                      |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ComponentType | [`AttachmentUploadPreviewList`](/chat/docs/sdk/react-native/v9/ui-components/message-composer/components/attachment-preview/attachment-upload-preview-list/) |

### `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) |

### `AudioRecorder`

Custom UI for audio recorder controls in [MessageComposer](/chat/docs/sdk/react-native/v9/ui-components/message-composer/).

| Type          | Default                                                                                                                                                                 |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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/v9/ui-components/message-composer/) (waveform, duration, etc.).

| Type          | Default                                                                                                                                                                                    |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 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/v9/ui-components/message-composer/).

| Type          | Default                                                                                                                                                                                          |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 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/v9/ui-components/message-composer/).

| Type          | Default                                                                                                                                                                              |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 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/v9/ui-components/message-composer/).

| Type          | Default                                                                                                                                                                                |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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.

| Type          | Default                                                                                                    |
| ------------- | ---------------------------------------------------------------------------------------------------------- |
| ComponentType | [`AutoCompleteSuggestionList`](/chat/docs/sdk/react-native/v9/ui-components/autocomplete-suggestion-list/) |

### `CooldownTimer`

Renders a countdown timer for message send cooldowns in `MessageComposer`.

| Type          | Default                                                                                                                                                                 |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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.

| Type          | Default                                                                                                                                                                  |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 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.

| Type          | Default                                                                                                                                                                    |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`MessageComposerTrailingView`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageComposer/MessageComposerTrailingView.tsx) |

### `CreatePollContent`

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/contexts/create-poll-context/create-poll-content"></partial>

### `Input`

Renders the UI for the enclosed `MessageComposer`.
See [Customizing Message Composer](/chat/docs/sdk/react-native/v9/guides/message-input-customization/).

| Type          |
| ------------- |
| ComponentType |

### `InputButtons`

Renders action buttons (AttachButton) on the left side of the `MessageComposer`.

| Type          | Default                                                                                                                                                       |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`InputButtons`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageComposer/components/InputButtons/index.tsx) |

### `Reply`

<partial id="chat-sdk/react-native/v9-latest/_partials/common-content/ui-components/channel/props/reply"></partial>

### `SendButton`

Renders the send message button inside `MessageComposer`.

| Type          | Default                                                                                                                                                           |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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.

| Type          | Default                                                                                                                                                                              |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 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/v9/ui-components/message-composer/).

| Type          | Default                                                                                                                                                                                 |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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`.

| Type      | Default                                                                                                                                                                |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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.

| Type          | Default                                                                                                                                                          |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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.

| Type          | Default                                                                                                                                                            |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 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.

| Type          | Default                                                                                                                                                              |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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`.

| Type          | Default                                                                    |
| ------------- | -------------------------------------------------------------------------- |
| ComponentType | Default [React Native's TextInput](https://reactnative.dev/docs/textinput) |


---

This page was last updated at 2026-04-03T17:24:31.793Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-composer/](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-composer/).