# 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.
## General Usage
```tsx {11}
import { StreamChat } from "stream-chat";
import {
Chat,
Channel,
MessageList,
MessageInput,
OverlayProvider,
} from "stream-chat-react-native";
const client = StreamChat.getInstance("api_key");
export const App = () => (
);
```
## Props
All the configuration for `MessageInput` can be done on [`Channel`](/chat/docs/sdk/react-native/v6/core-components/channel/) component.
Additionally please take a look at our [Guide Section](/chat/docs/sdk/react-native/v6/guides/message-input-customization/) on how to customize MessageInput UI
### `asyncMessagesLockDistance`
Controls how many pixels to the top side the user has to scroll in order to lock the recording view and allow the user to lift their finger from the screen without stopping the recording.
| Type | Default |
| ------ | ------- |
| Number | 50 |
### `asyncMessagesMinimumPressDuration`
Controls the minimum duration(in milliseconds) that the user has to press on the record button in the composer, in order to start recording a new voice message.
| Type | Default |
| ------ | ------- |
| Number | 500 |
### `AsyncMessagesMultiSendEnabled`
When it’s enabled, recorded messages won’t be sent immediately. Instead they will “stack up” in the composer allowing the user to send multiple voice recording as part of the same message.
| Type | Default |
| ------- | ------- |
| Boolean | true |
### `asyncMessagesSlideToCancelDistance`
Controls how many pixels to the leading side the user has to scroll in order to cancel the recording of a voice message.
| Type | Default |
| ------ | ------- |
| Number | 100 |
### `audioRecordingEnabled`
Controls whether the feature is enabled.
| Type | Default |
| ------- | ------- |
| Boolean | false |
### `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 |
### `editing`
Defined with message type if the user is editing some message within `MessageInput` component else its undefined.
| Type |
| ----------------------- |
| `Message`\| `undefined` |
### `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 |
| ----------------------------------------------------------------------------------------- |
| [React 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()`](/chat/docs/javascript/query_channels/) or [`channel.watch()`](/chat/docs/javascript/creating_channels/) API call.
`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()`](/chat/docs/javascript/query_members/) API endpoint separately to get the list of members.
```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;
user_id?: string;
}
>;
```
| Type |
| ------ |
| object |
### `suggestions`
Current active list of suggestions, within suggestions list for autocomplete feature.
| Type |
| ---------------------------------------------------------------- |
| `{ data: array