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

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:

import { FileReference } from "stream-chat";

export type File = FileReference;

Props

attachmentPickerBottomSheetHeight

Height of the image picker bottom sheet when opened.

attachmentSelectionBarHeight

Height of the attachment selection bar displayed on the attachment picker.

bottomInset

additionalTextInputProps

Additional props provided to the underlying TextInput within MessageInput.

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.

channel

Channel instance from the StreamChat client.

closeAttachmentPicker

Dismiss the attachment picker, if its already open.

closePollCreationDialog

Function called whenever the close button is pressed on the poll creation modal. Has no effect if PollCreateContent is custom.

cooldownEndsAt

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

editing

inputBoxRef

Ref for TextInput component within MessageInput

isOnline

The value is true, when current user is connected to chat.

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

selectedPicker

Value is images (string), when image attachment picker is open else undefined.

sendMessage

Sends a composed message within MessageInput component to channel. This function is attached to onPress handler of SendButton. The message optimistically gets added to message list UI first, before actually making API call to server. During this intermediate stage, MessageStatus component will display an indicator for “pending” state.

The function takes an object as a parameter with the following properties:

showPollCreationDialog

A boolean signifying whether the poll creation dialog is shown or not. Will always be false if PollCreateContent is custom.

threadList

Tells the Channel component if it is rendering a thread. We use this flag to avoid concurrency problems between a regular channel and a channel containing a thread.

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.

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

UI Component Props

AttachmentUploadPreviewList

Component to render preview of attached files and images, within the MessageInput component.

AttachmentPickerSelectionBar

Component to render and customize the attachment picker selection bar that displays the image, file and camera icons._createMdxContent

AudioRecorder

Custom UI component to render audio recorder controls in MessageInput.

AudioRecordingInProgress

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

AudioRecordingLockIndicator

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

AudioRecordingPreview

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

AudioRecordingWaveform

Custom UI component to render audio recording waveform in MessageInput.

AutoCompleteSuggestionList

Component to render the autocomplete suggestion list.

CommandInput

Component to render the message input in an active command state.

CooldownTimer

The cooldown timer is a component that displays a countdown timer for message sending cooldowns in the MessageInput. It helps to inform users about the remaining time before they can send another message.

CreatePollContent

A custom UI component used to render the entire poll creation form. It has access to the CreatePollContext values by default through the useCreatePollContext hook.

Input

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

InputButtons

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

InputEditingStateHeader

Component to render the header when a message is been edited on the message input.

InputReplyStateHeader

Component to render the header on the message input when a message is been replied to.

Reply

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

SendButton

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

ShowThreadMessageInChannelButton

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

StartAudioRecordingButton

Custom UI component for audio recording mic button in MessageInput.

StopMessageStreamingButton

Custom UI component to display the button to stop AI generation instead of the SendButton one in MessageInput.