Skip to main content
Version: v4

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#

forwarded from Channel props
additionalTextInputProps#

Additional props provided to the underlying TextInput within MessageInput.

Type
object

forwarded from Channel props
autoCompleteSuggestionsLimit#

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

TypeDefault
number10

forwarded from Channel props
autoCompleteTriggerSettings#

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

TypeDefault
functionACITriggerSettings

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

forwarded from Channel props
compressImageQuality#

Image compression quality prior to uploading.

note

On iOS values of 0.8 and above don't reduce the quality noticeably in most images. A value of 0.8 will reduce the file size in iOS by approximately half compared to a value of 1.

TypeDefault
number 0 to 1
(1 is best quality)
iOS: 0.8
Android: 1

cooldownEndsAt#

The time at which the active cooldown will end.

Type
Date

forwarded from Channel props
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.

note

This can be used to store file attachments in your own custom CDN.

Type
function
ParameterDescription
file{ name, size, type, uri }
channelcurrent channel instance

forwarded from Channel props
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.

note

This can be used to store image attachments in your own custom CDN.

Type
function
ParameterDescription
image{ name, uri }
channelcurrent channel instance

editing#

True if the user is editing some message within MessageInput component.

Type
boolean

forwarded from Channel props
editMessage#

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

Type
function | null
ParameterDescription
messagemessage the action is called on
userIdThe channel ID

forwarded from Channel props
hasCommands#

Enable commands on the MessageInput component.

TypeDefault
booleantrue

forwarded from Channel props
hasFilePicker#

Enable the file picker on the MessageInput component.

TypeDefault
booleantrue

forwarded from Channel props
hasImagePicker#

Enable the image picker on the MessageInput component.

TypeDefault
booleantrue

forwarded from Channel props
initialValue#

The initial value for the MessageInput component.

Type
string

forwarded from Channel props
maxMessageLength#

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

Type
number

forwarded from Channel props
maxNumberOfFiles#

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

TypeDefault
number10

forwarded from Channel props
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.

TypeDefault
booleanfalse

forwarded from Channel props
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: {}
}}
Type
object

forwarded from Channel props
numberOfLines#

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

TypeDefault
number5

forwarded from Channel props
onChangeText#

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

Type
function
ParameterDescription
textchanged text

quotedMessage#

forwarded from Channel props
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.

Type
function

appendText#

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

Type
(text) => void

closeAttachmentPicker#

Dismiss the attachment picker, if its already open.

Type
function

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

Type
ref

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

mentionedUsers#

Ids of users which are mentioned (e.g., Hey @Vishal Narkhede, how are you) in a message, which is being composed in MessageInput component.

['vishal-user-id', 'jaap-user-id'];
Type
array

numberOfUploads#

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

Type
number

openAttachmentPicker#

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

Type
function

openCommandsPicker#

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

Type
function

openFilePicker#

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

Type
function

openMentionsPicker#

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

Type
function

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.

Type
(id: string) => void

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

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.

Type
'images' | undefined

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.

Type
boolean

setFileUploads#

Setter function for fileUploads.

Type
(files) => void

setGiphyActive#

Setter function for giphyActive

Type
(isActive) => void

setImageUploads#

Setter function for imageUploads.

Type
(images) => void

setInputBoxRef#

Setter function for inputBoxRef

Type
(ref) => void

setMentionedUsers#

Setter function for mentionedUsers

Type
(mentionedUsers) => void

setNumberOfUploads#

Setter function for numberOfUploads

Type
(numberOfUploads) => void

setSendThreadMessageInChannel#

Setter function for setSendThreadMessageInChannel.

Type
(sendThreadMessageInChannel) => void

setShowMoreOptions#

Setter function for showMoreOptions.

Type
(showMoreOptions) => void

setText#

Setter function for text.

Type
(text) => void

showMoreOptions#

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

Type
boolean

text#

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

Type
string

forwarded from ThreadContext
thread#

A message object that when set indicates a thread is open. 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.

note

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

Type
object

toggleAttachmentPicker#

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

Type
function

triggerSettings#

Trigger settings for the auto complete input.

TypeDefault
objectTriggerSettings

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.

Type
function

uploadFile#

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

Type
function

uploadImage#

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

Type
function

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.

Type
(file) => Promise

uploadNewImage#

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

Type
(image) => Promise

forwarded from Channel props
AttachButton#

Component to render the attach button next to input box.

TypeDefault
componentAttachButton

forwarded from Channel props
CommandsButton#

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

TypeDefault
componentCommandsButton

forwarded from Channel props
FileUploadPreview#

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

TypeDefault
componentFileUploadPreview

forwarded from Channel props
ImageUploadPreview#

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

TypeDefault
componentImageUploadPreview

forwarded from Channel props
Input#

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

Type
component

forwarded from Channel props
InputButtons#

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

TypeDefault
componentInputButtons

forwarded from Channel props
MoreOptionsButton#

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

TypeDefault
componentMoreOptionsButton

forwarded from Channel props
SendButton#

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

TypeDefault
componentSendButton

forwarded from Channel props
SendMessageDisallowedIndicator#

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

TypeDefault
componentSendMessageDisallowedIndicator

forwarded from Channel props
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
componentShowThreadMessageInChannelButton

forwarded from Channel props
UploadProgressIndicator#

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

TypeDefault
componentUploadProgressIndicator

Did you find this page helpful?