# MessageInput

`MessageInput` component provides all the UI and necessary functionality (e.g, attachment picker, commands, mentions autocomplete etc.) for composing a message.
This component must be used as child of `Channel` component.

## Basic Usage

```tsx
<OverlayProvider>
  <Chat client={client}>
    <Channel channel={channel}>
      <MessageInput />
    </Channel>
  </Chat>
</OverlayProvider>
```

## Props

<Admonition type="note">

All the configuration for `MessageInput` can be done on [`Channel`](https://getstream.io/chat/docs/sdk/react-native/v4/core-components/channel/) component.
Additionally please take a look at our [Guide Section](https://getstream.io/chat/docs/sdk/react-native/v4/guides/message-input-customization/) on how to customize MessageInput UI

</Admonition>

### clearEditingState

Function to clear "Editing Message" state from MessageInput component.

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

### clearQuotedMessageState

Function to clear "Add Quoted Reply" state from MessageInput component.

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

### closeAttachmentPicker

Dismiss the attachment picker, if its already open.

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

### disabled

True if channel is [frozen](https://getstream.io/chat/docs/javascript/disabling-channels/) and [disableIfFrozenChannel](https://getstream.io/chat/docs/sdk/react-native/v4/core-components/channel#disableiffrozenchannel) is true.

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

### editing

True if the user is editing some message within `MessageInput` component.

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

### `fileUploads`

List of `file` type attachments currently attached to message, which is being composed in `MessageInput` component.

```tsx
[
  {
    file: {
      name: 'test.pdf';
      size: 2000;
      type: 'application/pdf';
      uri: 'file-uri';
    };
    id: 'asdas232bk3jb42k3';
    state: 'uploaded'; // or 'finished'
    url: 'https://cdn.getstream.io/kajsnkj2n3j4';
  }
]
```

| Type  |
| ----- |
| array |

### giphyActive

True if a user selects the `giphy` command from commands list (which is shown when you type a `/` in the input box).
This value is set back to `false` when the user sends the message for searching Giphy.

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

### `imageUploads`

List of `image` type attachments currently attached to message, which is being composed in `MessageInput` component.

```tsx
[
  {
    file: { name: "fallback-name.jpeg" },
    id: "2j3n4k23nj4k23n4k3",
    state: "finished", // or 'uploading'
    url: "https://cdn.getstream.io/kajsnkj2n3j4", // If the state is `uploading`, then this will be a local uri of image.
  },
];
```

| Type  |
| ----- |
| array |

### inputBoxRef

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

| Type                                                                                |
| ----------------------------------------------------------------------------------- |
| [ref](https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element) |

### isValidMessage

False if text within input box is empty and no images or files have been attached to a message yet. You can use this value to add enabled/disabled UI state on SendMessage button.

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

### members

Members of current channel. This value is received from backend when you query a channel, either using [`client.queryChannels()`](https://getstream.io/chat/docs/javascript/query-channels/) or [`channel.watch()`](https://getstream.io/chat/docs/javascript/creating-channels/) API call.

<Admonition type="warning">

`client.queryChannels()` or `channel.watch()` returns only up to 100 members of channel. So if you expect total number of members to be > 100, its better to use [`client.queryMembers()`](https://getstream.io/chat/docs/javascript/query-members/) API endpoint separately to get the list of members.

</Admonition>

```tsx
Record<
  string, // userId
  {
    banned?: boolean;
    created_at?: string;
    invite_accepted_at?: string;
    invite_rejected_at?: string;
    invited?: boolean;
    is_moderator?: boolean;
    role?: string;
    shadow_banned?: boolean;
    updated_at?: string;
    user?: UserResponse<UserType>;
    user_id?: string;
  }
>;
```

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

### suggestions

Current active list of suggestions, within suggestions list for autocomplete feature.

| Type                                                             |
| ---------------------------------------------------------------- |
| `{ data: array<object>, onSelect: function, queryText: string }` |

### `suggestionsTitle`

Title component of current active suggestions autocomplete list.

| Type              |
| ----------------- |
| string \| Element |

### additionalTextInputProps

Additional props provided to the underlying [TextInput](https://reactnative.dev/docs/textinput#props) within [`MessageInput`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/message-input/).

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

### `asyncIds`

An array of IDs for async uploads in progress.

| Type     |
| -------- |
| string[] |

### `asyncUploads`

An object containing the current async upload state.

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

### maxNumberOfFiles

Maximum number of files (documents & images), that can be attached per message.

| Type   | Default |
| ------ | ------- |
| number | 10      |

### `mentionedUsers`

Ids of users which are mentioned (for example `Hey @Vishal Narkhede, how are you`) in a message, which is being composed in MessageInput component.

```tsx
["vishal-user-id", "jaap-user-id"];
```

| Type  |
| ----- |
| array |

### numberOfUploads

Number of image + files attached to message which is being composed in `MessageInput` component.

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

### `quotedMessage`

### `removeImage`

Removes an attached image in a message being composed in the `MessageInput` component. By default, this function is attached to `onPress` handler for close button in [ImageUploadPreview](https://getstream.io/chat/docs/sdk/react-native/v4/core-components/channel#imageuploadpreview).
It takes a string ID of the image to be removed in the [`imageUploads`](https://getstream.io/chat/docs/sdk/react-native/v4/contexts/message-input-context#imageuploads) array as parameter.

| Type                   |
| ---------------------- |
| `(id: string) => void` |

### `resetInput`

Resets the entire `MessageInput` component to empty state by clearing the text, attachments etc.

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

### sending

Indicates whether a message is currently being sent.

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

### sendMessageAsync

### setGiphyActive

Setter function for [`giphyActive`](https://getstream.io/chat/docs/sdk/react-native/v4/contexts/message-input-context#giphyactive)

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

### showMoreOptions

Represents the expanded or collapsed state for attach and commands button, next to input box.

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

### thread

A message object that when set indicates a thread is open.
When used with the [`Thread`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/thread/) component this will display the thread.
When used with the standard [`MessageList`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/message-list/) component this will prevent any singleton components in the [`OverlayProvider`](https://getstream.io/chat/docs/sdk/react-native/v4/core-components/overlay-provider/) form getting out of sync.

<Admonition type="note">

`thread` should be set on all `Channel` components when a thread is open.

</Admonition>

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

### uploadNewImage

Function to upload an attached image in `MessageInput`. This function takes a image from `imageUploads` array as a parameter.

| Type                 |
| -------------------- |
| `(image) => Promise` |

### watchers

Watchers of current channel. This value is received from backend when you query a channel, either using [`client.queryChannels()`](https://getstream.io/chat/docs/javascript/query-channels/) or [`channel.watch()`](https://getstream.io/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](https://getstream.io/chat/docs/javascript/channel-pagination/)

</Admonition>

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

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

### Reply

Component to render preview of parent of message for quoted reply.

| Type      | Default                                                        |
| --------- | -------------------------------------------------------------- |
| component | [`Reply`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/reply/) |

### FileUploadPreview

Component to render preview of attached file, within enclosed `MessageInput` component.

| Type      | Default                                                                                  |
| --------- | ---------------------------------------------------------------------------------------- |
| component | [`FileUploadPreview`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/file-upload-preview/) |

### ImageUploadPreview

Component to render preview of attached images, within enclosed MessageInput component

| Type      | Default                                                                                    |
| --------- | ------------------------------------------------------------------------------------------ |
| component | [`ImageUploadPreview`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/image-upload-preview/) |

### Input

Component to render UI part of enclosed MessageInput component.
Please read section in guides about [Customizing Message Input](https://getstream.io/chat/docs/sdk/react-native/v4/guides/message-input-customization/).

| Type      |
| --------- |
| component |

### InputButtons

Component to render action buttons (CommandsButton and AttachButton) on left side of input box, within enclosed `MessageInput` component.

| Type      | Default                                                                       |
| --------- | ----------------------------------------------------------------------------- |
| component | [`InputButtons`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/input-buttons/) |

### SendButton

Component to render a send message button, within enclosed MessageInput component.

| Type      | Default                                                                   |
| --------- | ------------------------------------------------------------------------- |
| component | [`SendButton`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/send-button/) |

### ShowThreadMessageInChannelButton

Component to render a checkbox within enclosed Thread component, which when checked sets a `show_in_channel` property to true on a message.

| Type      | Default                                                                                                                   |
| --------- | ------------------------------------------------------------------------------------------------------------------------- |
| component | [`ShowThreadMessageInChannelButton`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/show-thread-message-in-channel-button/) |

### `triggerType`

The trigger type triggers a particular type of autocomplete list depending on user input.

| Type                              |
| --------------------------------- |
| 'command' \| 'emoji' \| 'mention' |


---

This page was last updated at 2026-08-13T00:26:14.538Z.

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