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

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

Props

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.

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.

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.

asyncMessagesSlideToCancelDistance

Controls how many pixels to the leading side the user has to scroll in order to cancel the recording of a voice message.

audioRecordingEnabled

Controls whether the feature is enabled.

clearEditingState

Function to clear “Editing Message” state from MessageInput component.

clearQuotedMessageState

Function to clear “Add Quoted Reply” state from MessageInput component.

closeAttachmentPicker

Dismiss the attachment picker, if its already open.

disabled

True if channel is frozen and disableIfFrozenChannel is true.

editing

Defined with message type if the user is editing some message within MessageInput component else its undefined.

fileUploads

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

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

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.

imageUploads

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

[
  {
    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.
  },
];

inputBoxRef

Ref for TextInput component within MessageInput

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.

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.

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;
  }
>;

suggestions

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

suggestionsTitle

Title component of current active suggestions autocomplete list.

additionalTextInputProps

Additional props provided to the underlying TextInput within MessageInput.

asyncIds

Queue that stores the asset id, if user hit send before image uploaded.

asyncUploads

It is of type Object with key as the asynchronous upload id, and value as an object containing file upload state and URL(url).

maxNumberOfFiles

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

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.

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

numberOfUploads

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

quotedMessage

Message that is quoted to the original message

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. It takes a string ID of the image to be removed in the imageUploads array as parameter.

resetInput

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

sending

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