MessageInputContext

MessageInputContext is provided by Channel component. If you are not familiar with React Context API, please read about it on React docs.

Basic Usage

MessageInputContext can be consumed by any of the child component of Channel component as following:

import { useContext } from "react";
import { MessageInputContext } from "stream-chat-react-native";

const { sendMessage, toggleAttachmentPicker } = useContext(MessageInputContext);

Alternatively, you can also use useMessageInputContext hook provided by library to consume MessageInputContext.

import { useMessageInputContext } from "stream-chat-react-native";

const { sendMessage, toggleAttachmentPicker } = useMessageInputContext();

Value

additionalTextInputProps

Additional props provided to the underlying TextInput within MessageInput.

ayncMessagesLockDistance

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.

ayncMessagesMinimumPressDuration

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.

ayncMessagesMultiSendEnabled

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.

ayncMessagesSlideToCancelDistance

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.

attachmentPickerBottomSheetHandleHeight

Height of the image picker bottom sheet handle.

attachmentPickerBottomSheetHeight

Height of the image picker bottom sheet when opened.

attachmentSelectionBarHeight

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

compressImageQuality

Image compression quality prior to uploading.

cooldownEndsAt

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

editMessage

Handles the edit message event on the message input by taking the new message as input and updating the message for the client.

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

handleAttachButtonPress

Function to customize the behaviour when the AttachButton is pressed in the message input.

hasCameraPicker

Enable the camera picker on the MessageInput component.

hasCommands

Enable commands on the MessageInput component.

hasFilePicker

Enable the file picker on the MessageInput component.

hasImagePicker

Enable the image picker on the MessageInput component.

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:

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.

doFileUploadRequest

inputBoxRef

Ref for TextInput component within MessageInput

openAttachmentPicker

Opens the attachment picker bottom sheet, if its not open.

openPollCreationDialog

Function called immediately when the poll creation button is clicked in the attachment picker. Can be used to override the default behaviour of the poll creation UI appearing as a Modal.

If overridden, a payload is passed containing the sendMessage callback from MessageInputContext is passed, so that CreatePoll

pickAndUploadImageFromNativePicker

Opens the native image picker and uploads the selected image.

pickFile

Opens the native document/file picker and uploads the selected files.

selectedPicker

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

setInputBoxRef

Setter function for inputBoxRef

showPollCreationDialog

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

takeAndUploadImage

Function to click an image using the device camera and upload it.

thread

Can be either a LocalMessage 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.

toggleAttachmentPicker

Function to toggle attachment picker. By default, this function is attached to onPress handler for AttachButton.

uploadNewFile

Function to upload an attached file in MessageInput. This invokes the Message composer Attachment Manager’s uploadFiles method to handle the file upload process.

This handles the abort controller to make sure that the upload can be cancelled if needed.

Components Props

AttachButton

Component to render the attach button next to input box.

AttachmentUploadPreviewList

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

AudioAttachmentUploadPreview

Component prop used to customize the audio attachment upload preview when its uploading/uploaded in the MessageInput.

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.

AutoCompleteSuggestionHeader

Component to render the autocomplete suggestion header.

AutoCompleteSuggestionItem

Component to render the autocomplete suggestion item.

AutoCompleteSuggestionList

Component to render the autocomplete suggestion list.

AttachmentPickerBottomSheetHandle

Bottom sheet handle component for image picker.

AttachmentPickerSelectionBar

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

CameraSelectorIcon

Camera selector component displayed in the attachment selector bar.

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.

CommandsButton

Component to render button next to input box, which when pressed opens commands list.

CommandInput

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

CreatePollIcon

The create poll icon component displayed in the attachment selector bar.

FileSelectorIcon

File selector component displayed in the attachment selector bar.

ImageSelectorIcon

Image selector component displayed in the attachment selector bar.

VideoRecorderSelectorIcon

Video recorder selector component displayed in the attachment selector bar.

FileAttachmentUploadPreview

Component prop used to customize the file attachment upload preview when its uploading/uploaded in the MessageInput.

ImageAttachmentUploadPreview

Component prop used to customize the image attachment upload preview when its uploading/uploaded in the MessageInput.

VideoAttachmentUploadPreview

Component prop used to customize the video attachment upload preview when its uploading/uploaded in the MessageInput.

AttachmentUploadProgressIndicator

Component to render progress indicator on the image/files being uploaded in the message input.

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.

MoreOptionsButton

Component to render a button within enclosed MessageInput, which when pressed shows more options such as AttachButton, CommandsButton.

SendButton

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

SendMessageDisallowedIndicator

Component to render indicator stating send message feature is not allowed for current user.

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.

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.