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 |
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.
Type | Default |
---|---|
Number | 50 |
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.
Type | Default |
---|---|
Number | 500 |
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.
Type | Default |
---|---|
Boolean | true |
ayncMessagesSlideToCancelDistance
Controls how many pixels to the leading side the user has to scroll in order to cancel the recording of a voice message.
Type | Default |
---|---|
Number | 100 |
audioRecordingEnabled
Controls whether the feature is enabled.
Type | Default |
---|---|
Boolean | false |
forwarded from Channel props autoCompleteSuggestionsLimit
Maximum number of suggestions to display as part of autocomplete feature within input box.
Type | Default |
---|---|
Number | 10 |
forwarded from Channel props autoCompleteTriggerSettings
Function that returns the trigger settings for the auto complete input.
Type | Default |
---|---|
function | ACITriggerSettings |
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.
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.
Type | Default |
---|---|
number 0 to 1 (1 is best quality) | iOS: 0.8 Android: 1 |
cooldownEndsAt
The time at which the active cool-down 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.
This can be used to store file attachments in your own custom CDN.
Type |
---|
function |
Parameter | Description |
---|---|
file | { name, size, type, uri } |
channel | current 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.
This can be used to store image attachments in your own custom CDN.
Type |
---|
function |
Parameter | Description |
---|---|
image | { name, uri } |
channel | current channel instance |
editing
Defined with message type if the user is editing some message within MessageInput
component else its undefined.
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 |
Parameter | Description |
---|---|
message | message the action is called on |
userId | The channel ID |
forwarded from Channel props emojiSearchIndex
Prop to override the default emoji search index in AutoCompleteSuggestionList.
Read this guide to know how it works.
Type |
---|
Object |
forwarded from Channel props handleAttachButtonPress
Function to customize the behaviour when the AttachButton is pressed in the message input.
Type |
---|
() => void |
forwarded from Channel props hasCameraPicker
Enable the file picker on the MessageInput
component.
Type | Default |
---|---|
Boolean | true |
forwarded from Channel props hasCommands
Enable commands on the MessageInput
component.
Type | Default |
---|---|
boolean | true |
forwarded from Channel props hasFilePicker
Enable the file picker on the MessageInput
component.
Type | Default |
---|---|
Boolean | true |
forwarded from Channel props hasImagePicker
Enable the image picker on the MessageInput
component.
Type | Default |
---|---|
Boolean | true |
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.
Type | Default |
---|---|
number | 10 |
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.
Type | Default |
---|---|
boolean | false |
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.
Type | Default |
---|---|
number | 5 |
forwarded from Channel props onChangeText
Callback that is called when the text input's text changes.
Type |
---|
function |
Parameter | Description |
---|---|
text | changed text |
quotedMessage
Message that is quoted to the original message
Type |
---|
Boolean | Message type |
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 |
---|
React 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 (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 |
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 |
pickAndUploadImageFromNativePicker
Opens the native image picker and uploads the selected image.
Type |
---|
() => Promise<void> |
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 |
forwarded from AttachmentPickerContext 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 |
takeAndUploadImage
Function to click an image using the device camera and upload it.
Type |
---|
() => Promise<void> |
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.
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.
Type | Default |
---|---|
Object | TriggerSettings |
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 a parameter.
Type |
---|
(image) => Promise |
forwarded from Channel props AttachButton
Component to render the attach button next to input box.
Type | Default |
---|---|
ComponentType | AttachButton |
forwarded from Channel props AudioAttachmentUploadPreview
Component prop used to customize the audio attachment upload preview when its uploading/uploaded in the MessageInput
.
Type | Default |
---|---|
ComponentType | AudioAttachment |
forwarded from Channel props AudioRecorder
Custom UI component to render audio recorder controls in MessageInput.
Type | Default |
---|---|
ComponentType | AudioRecorder |
forwarded from Channel props AudioRecordingInProgress
Custom UI component to render audio recording in progress in MessageInput. It renders the waveform, duration etc, for the recording.
Type | Default |
---|---|
ComponentType | AudioRecordingInProgress |
forwarded from Channel props AudioRecordingLockIndicator
Custom UI component to render audio recording lock indicator in MessageInput that can be dragged up to lock the recording start.
Type | Default |
---|---|
ComponentType | AudioRecordingLockIndicator |
forwarded from Channel props AudioRecordingPreview
Custom UI component to render audio recording preview in MessageInput that allows playing the recording.
Type | Default |
---|---|
ComponentType | AudioRecordingPreview |
forwarded from Channel props AudioRecordingWaveform
Custom UI component to render audio recording waveform in MessageInput.
Type | Default |
---|---|
ComponentType | AudioRecordingWaveform |
forwarded from Channel props CommandsButton
Component to render button next to input box, which when pressed opens commands list.
Type | Default |
---|---|
ComponentType | CommandsButton |
forwarded from Channel props FileUploadPreview
Component to render preview of attached file, within enclosed MessageInput
component.
Type | Default |
---|---|
ComponentType | FileUploadPreview |
forwarded from Channel props ImageUploadPreview
Component to render preview of attached images, within enclosed MessageInput component
Type | Default |
---|---|
ComponentType | ImageUploadPreview |
forwarded from Channel props Input
Component to render UI part of enclosed MessageInput component. Please read section in guides about Customizing Message Input.
Type |
---|
ComponentType |
forwarded from Channel props InputButtons
Component to render action buttons (CommandsButton and AttachButton) on left side of input box, within enclosed MessageInput
component.
Type | Default |
---|---|
ComponentType | InputButtons |
forwarded from Channel props MoreOptionsButton
Component to render a button within enclosed MessageInput, which when pressed shows more options such as AttachButton, CommandsButton.
Type | Default |
---|---|
ComponentType | MoreOptionsButton |
forwarded from Channel props SendButton
Component to render a send message button, within enclosed MessageInput component.
Type | Default |
---|---|
ComponentType | SendButton |
forwarded from Channel props SendMessageDisallowedIndicator
Component to render indicator stating send message feature is not allowed for current user.
Type | Default |
---|---|
ComponentType | SendMessageDisallowedIndicator |
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.
Type | Default |
---|---|
ComponentType | ShowThreadMessageInChannelButton |
forwarded from Channel props StartAudioRecordingButton
Custom UI component for audio recording mic button in MessageInput.
Type | Default |
---|---|
ComponentType | StartAudioRecordingButton |
forwarded from Channel props UploadProgressIndicator
Component to render progress indicator on ImageUploadPreview
and FileUploadPreview
components, as overlay.
Type | Default |
---|---|
ComponentType | UploadProgressIndicator |