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.

autoCompleteSuggestionsLimit

Maximum number of suggestions to display as part of autocomplete feature within input box.

autoCompleteTriggerSettings

Function that returns the trigger settings for the auto complete input.

clearEditingState

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

clearQuotedMessageState

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

compressImageQuality

Image compression quality prior to uploading.

cooldownEndsAt

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

doDocUploadRequest

Override of the file upload request when a user selects a file from the file picker. The function must return a Promise that is resolved to an object with the key file that is the URL of the uploaded file.

doImageUploadRequest

Override of the image upload request when a user selects an image from the image picker. The function must return a Promise that is resolved to an object with the key file that is the URL of the uploaded image.

editing

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

editMessage

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

emojiSearchIndex

Prop to override the default emoji search index in AutoCompleteSuggestionList.

Read this guide to know how it works.

handleAttachButtonPress

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

hasCameraPicker

Enable the file 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.

initialValue

The initial value for the MessageInput component.

maxMessageLength

Maximum length of the message text. The default value is supplied by the channel config.

maxNumberOfFiles

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

mentionAllAppUsersEnabled

Allows any of the app users to be mentioned in a message, as part of autocomplete feature within input box. By default only members of channel can be mentioned while composing a message.

mentionAllAppUsersQuery

Query to be used for searching users as part of autocomplete mention feature within input box. Please check the Querying Users docs for more details on filters/sort/options.

mentionAllAppUsersQuery={{
  filters: {
    id: {
      $in: ['vishal', 'lucas']
    }
  },
  sort: {},
  options: {}
}}

numberOfLines

Maximum number of lines that underlying TextInput component within MessageInput should expand to.

onChangeText

Callback that is called when the text input’s text changes.

quotedMessage

Message that is quoted to the original message

sendImageAsync

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.

appendText

Appends text to existing text entered by user in MessageInput component.

closeAttachmentPicker

Dismiss the attachment picker, if its already open.

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.

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.

openAttachmentPicker

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

openCommandsPicker

Opens the commands picker box. By default, this function is attached to onPress handler for CommandsButton.

openFilePicker

Opens the file picker. By default, this function is attached to onPress handler for FileAttachmentIcon.

openMentionsPicker

Opens the user mentions autocomplete popup. When user types @ in input box, internally this function gets called.

pickAndUploadImageFromNativePicker

Opens the native image picker and uploads the selected image.

removeFile

Removes attached file in message, which is being composed in MessageInput component. By default, this function is attached to onPress handler for close button in FileUploadPreview. It takes a string ID of the file to be removed in the fileUploads array as parameter.

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.

selectedPicker

Value is images (string), when image attachment picker is open. Value will be undefined if file picker is active or file picker is open.

sendThreadMessageInChannel

This value is only applicable to Thread component. When value sendThreadMessageInChannel is true, message gets sent from MessageInput component with property show_in_channel: true. This value is attached to the checkbox (with label “Also Send To Channel”) in MessageInput component within Thread component.

setFileUploads

Setter function for fileUploads.

setGiphyActive

Setter function for giphyActive

setImageUploads

Setter function for imageUploads.

setInputBoxRef

Setter function for inputBoxRef

setMentionedUsers

Setter function for mentionedUsers

setNumberOfUploads

Setter function for numberOfUploads

setSendThreadMessageInChannel

Setter function for setSendThreadMessageInChannel.

setShowMoreOptions

Setter function for showMoreOptions.

setText

Setter function for text.

showMoreOptions

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

takeAndUploadImage

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

text

Text message entered by user in underlying TextInput within MessageInput component. This value is attached to TextInput’s value prop

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.

toggleAttachmentPicker

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

triggerSettings

Trigger settings for the auto complete input.

updateMessage

This function is a counterpart of sendMessage, for the case of editing a message. This function is attached to SendButton when some existing message is being updated. Similar to sendMessage function, the message will be updated in message list UI first, before making API call to update the message.

uploadFile

This function is used internally by uploadNewFile function, and is used for purpose retry mechanism.

uploadImage

This function is used internally by uploadNewImage function, and is used for purpose retry mechanism.

uploadNewFile

Function to upload an attached file in MessageInput. This function adds a file to fileUploads array and calls channel.sendFile. This function takes a file from react-native-document-picker as parameter.

uploadNewImage

Function to upload an attached image in MessageInput. This function takes a image from imageUploads array as a parameter.

AttachButton

Component to render the attach button next to input box.

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.

CommandsButton

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

FileUploadPreview

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

ImageUploadPreview

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

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.

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.

UploadProgressIndicator

Component to render progress indicator on ImageUploadPreview and FileUploadPreview components, as overlay.

closePollCreationDialog

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

showPollCreationDialog

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