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

All the configuration for MessageInput can be done on Channel component. Additionally please take a look at our Guide Section 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.

TypeDefault
Number50

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.

TypeDefault
Number500

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.

TypeDefault
Booleantrue

asyncMessagesSlideToCancelDistance

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

TypeDefault
Number100

audioRecordingEnabled

Controls whether the feature is enabled.

TypeDefault
Booleanfalse

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 and disableIfFrozenChannel is true.

Type
Boolean

editing

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

Type
Boolean

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';
  }
]
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.

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

Type
Boolean

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.

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() API endpoint separately to get the list of members.

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 within MessageInput.

Type
object

asyncIds

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

Type
String[]

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).

Type
Object

maxNumberOfFiles

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

TypeDefault
number10

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"];
Type
String[]

numberOfUploads

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

Type
Number

quotedMessage

Message that is quoted to the original message

Type
Boolean | Message type

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.

Type
(id: string) => void

resetInput

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

Type
Function

sending

sendMessageAsync

setGiphyActive

Setter function for giphyActive

Type
(isActive) => void

showMoreOptions

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

Type
Boolean

thread

Can be either a MessageType object or a ThreadType that when set indicates a thread is open. Both of the types may be used interchangeably.

When used with the Thread component this will display the thread. When used with the standard MessageList component this will prevent any singleton components in the OverlayProvider form getting out of sync.

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

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() or channel.watch() API call.

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

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

triggerType

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

Type
’command’ | ‘emoji’ | ‘mention’

UI Component Props

AudioRecorder

Custom UI component to render audio recorder controls in MessageInput.

TypeDefault
ComponentTypeAudioRecorder

AudioRecordingInProgress

Custom UI component to render audio recording in progress in MessageInput. It renders the waveform, duration etc, for the recording.

TypeDefault
ComponentTypeAudioRecordingInProgress

AudioRecordingLockIndicator

Custom UI component to render audio recording lock indicator in MessageInput that can be dragged up to lock the recording start.

TypeDefault
ComponentTypeAudioRecordingLockIndicator

AudioRecordingPreview

Custom UI component to render audio recording preview in MessageInput that allows playing the recording.

TypeDefault
ComponentTypeAudioRecordingPreview

AudioRecordingWaveform

Custom UI component to render audio recording waveform in MessageInput.

TypeDefault
ComponentTypeAudioRecordingWaveform

Reply

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

TypeDefault
ComponentTypeReply

FileUploadPreview

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

TypeDefault
ComponentTypeFileUploadPreview

ImageUploadPreview

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

TypeDefault
ComponentTypeImageUploadPreview

Input

Component to render UI part of enclosed MessageInput component. Please read section in guides about Customizing Message Input.

Type
ComponentType

InputButtons

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

TypeDefault
ComponentTypeInputButtons

SendButton

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

TypeDefault
ComponentTypeSendButton

ShowThreadMessageInChannelButton

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

TypeDefault
ComponentTypeShowThreadMessageInChannelButton

StartAudioRecordingButton

Custom UI component for audio recording mic button in MessageInput.

TypeDefault
ComponentTypeStartAudioRecordingButton

© Getstream.io, Inc. All Rights Reserved.