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>
);
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
Props
All the configuration for MessageInput
can be done on Channel
component.
Additionally please take a look at our Guide Section on how to customize MessageInput UI
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.
Type | Default |
---|---|
Number | 50 |
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.
Type | Default |
---|---|
Number | 500 |
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.
Type | Default |
---|---|
Boolean | true |
asyncMessagesSlideToCancelDistance
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 |
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 |
closeAttachmentPicker
Dismiss the attachment picker, if its already open.
Type |
---|
Function |
disabled
True if channel is frozen and disableIfFrozenChannel is true.
Type |
---|
Boolean |
editing
Defined with message type if the user is editing some message within MessageInput
component else its undefined.
Type |
---|
Boolean |
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 |
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.
client.queryChannels()
or channel.watch()
returns only up to 100 members of channel. So if you expect total number of members to be > 100, its better to use client.queryMembers()
API endpoint separately to get the list of members.
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;
}
>;
Type |
---|
object |
suggestions
Current active list of suggestions, within suggestions list for autocomplete feature.
Type |
---|
{ data: array<object>, onSelect: function, queryText: string } |
suggestionsTitle
Title component of current active suggestions autocomplete list.
Type |
---|
string | Element |
additionalTextInputProps
Additional props provided to the underlying TextInput within MessageInput
.
Type |
---|
object |
asyncIds
Queue that stores the asset id, if user hit send before image uploaded.
Type |
---|
String[] |
asyncUploads
It is of type Object with key as the asynchronous upload id, and value as an object containing file upload state and URL(url
).
Type |
---|
Object |
maxNumberOfFiles
Maximum number of files (documents & images), that can be attached per message.
Type | Default |
---|---|
number | 10 |
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 |
quotedMessage
Message that is quoted to the original message
Type |
---|
Boolean | Message type |
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 |
sending
sendMessageAsync
setGiphyActive
Setter function for giphyActive
Type |
---|
(isActive) => void |
showMoreOptions
Represents the expanded or collapsed state for attach and commands button, next to input box.
Type |
---|
Boolean |
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.
thread
should be set on all Channel
components when a thread is open.
Type |
---|
object |
uploadNewImage
Function to upload an attached image in MessageInput
. This function takes a image from imageUploads
array as a parameter.
Type |
---|
(image) => Promise |
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.
client.queryChannels()
or channel.watch()
returns only up to 100 watchers for channel. So if you expect total number of watchers to be > 100, you should request them explicitly using Channel Pagination
Record<
string, // string
UserResponse<UserType>
>;
Type |
---|
object |
triggerType
The trigger type triggers a particular type of autocomplete list depending on user input.
Type |
---|
’command’ | ‘emoji’ | ‘mention’ |
UI Component Props
AudioRecorder
Custom UI component to render audio recorder controls in MessageInput.
Type | Default |
---|---|
ComponentType | AudioRecorder |
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 |
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 |
AudioRecordingPreview
Custom UI component to render audio recording preview in MessageInput that allows playing the recording.
Type | Default |
---|---|
ComponentType | AudioRecordingPreview |
AudioRecordingWaveform
Custom UI component to render audio recording waveform in MessageInput.
Type | Default |
---|---|
ComponentType | AudioRecordingWaveform |
Reply
Component to render preview of parent of message for quoted reply.
Type | Default |
---|---|
ComponentType | Reply |
FileUploadPreview
Component to render preview of attached file, within enclosed MessageInput
component.
Type | Default |
---|---|
ComponentType | FileUploadPreview |
ImageUploadPreview
Component to render preview of attached images, within enclosed MessageInput component
Type | Default |
---|---|
ComponentType | ImageUploadPreview |
Input
Component to render UI part of enclosed MessageInput component. Please read section in guides about Customizing Message Input.
Type |
---|
ComponentType |
InputButtons
Component to render action buttons (CommandsButton and AttachButton) on left side of input box, within enclosed MessageInput
component.
Type | Default |
---|---|
ComponentType | InputButtons |
SendButton
Component to render a send message button, within enclosed MessageInput component.
Type | Default |
---|---|
ComponentType | SendButton |
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 |
StartAudioRecordingButton
Custom UI component for audio recording mic button in MessageInput.
Type | Default |
---|---|
ComponentType | StartAudioRecordingButton |
- General Usage
- Props
- asyncMessagesLockDistance
- asyncMessagesMinimumPressDuration
- AsyncMessagesMultiSendEnabled
- asyncMessagesSlideToCancelDistance
- audioRecordingEnabled
- clearEditingState
- clearQuotedMessageState
- closeAttachmentPicker
- disabled
- editing
- fileUploads
- giphyActive
- imageUploads
- inputBoxRef
- isValidMessage
- members
- suggestions
- suggestionsTitle
- additionalTextInputProps
- asyncIds
- asyncUploads
- maxNumberOfFiles
- mentionedUsers
- numberOfUploads
- quotedMessage
- removeImage
- resetInput
- sending
- sendMessageAsync
- setGiphyActive
- showMoreOptions
- thread
- uploadNewImage
- watchers
- triggerType
- UI Component Props