This is documentation for
Stream Chat React-native SDK v3, which is no longer actively maintained. For up-to-date documentation, see the latest version (v5).
The Channel component is the main entry point for many Stream Chat customizations and contains the majority of the content providers and a significant amount of the logic utilized by Stream Chat for React Native.
Components, custom and out of the box, channel information, and UI integrated chat functions are disseminated by the contexts contained in Channel.
MessageList, MessageInput, and Thread all rely on Channel to function correctly.
Channel takes an instance of a StreamChat channel as a prop.
You can create a channel, or if you are navigating from the ChannelList, access the selected channel via the parameter passed to the onSelect function.
Channel contains providers for the ChannelContext, KeyboardContext, MessageInputContext, MessagesContext, PaginatedMessageListContext, SuggestionsContext, ThreadContext, and TypingContext.
These can be accessed using the corresponding hooks.
Channel is the entry point for customizing the majority of the Stream Chat for React Native SDK.
The UI can be tailored to your design by replacing any number of components with custom components.
Custom components provided as props to Channel will be utilized throughout the SDK where appropriate.
Customizing the message avatar can be done easily by providing a custom component to the appropriate prop.
Override of the Block UserMessageAction shown when a user long presses a message.
The blockUser function receives as a parameter the relevant message and must return a MessageAction.
Please refer to the guide on customizing message actions for details.
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.
Override of the Copy MessageMessageAction shown when a user long presses a message.
The copyMessage function receives as a parameter the relevant message and must return a MessageAction.
Please refer to the guide on customizing message actions for details.
Override of the Delete MessageMessageAction shown when a user long presses a message.
The deleteMessage function receives as a parameter the relevant message and must return a MessageAction.
Please refer to the guide on customizing message actions for details.
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.
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.
This prop should only be used for advanced functionality in which you want to conditionally allow mark-read requests.
Don not use this function to disable the read-receipts feature.
If you would like to disable read-receipts, this can be done via Read Events on the dashboard.
Example
const doMarkReadRequest = (channel) => { if (/** Some custom logic here */) { channel.markRead(); }};
Override of the Edit MessageMessageAction shown when a user long presses a message.
The editMessage function receives as a parameter the relevant message and must return a MessageAction.
Please refer to the guide on customizing message actions for details.
Limits reactions to one per user.
If a user selects another reaction, their previous reaction will be replaced.
This is similar to reaction UX of iMessage.
Override of the Flag MessageMessageAction shown when a user long presses a message.
The flagMessage function receives as a parameter the relevant message and must return a MessageAction.
Please refer to the guide on customizing message actions for details.
Forces alignment of messages in the list to either the left or right side of the screen.
By default, received messages are aligned on the left side of the screen, and sent messages are aligned on the right.
Function called when the Block User action is invoked from message actions list.
This function does not override the default behavior of the Block User action.
Please refer to the guide on customizing message actions for details.
Function called when the Copy Message action is invoked from message actions list.
This function does not override the default behavior of the Copy Message action.
Please refer to the guide on customizing message actions for details.
Function called when the Delete Message action is invoked from message actions list.
This function does not override the default behavior of the Delete Message action.
Please refer to the guide on customizing message actions for details.
Function called when the Edit Message action is invoked from message actions list.
This function does not override the default behavior of the Edit Message action.
Please refer to the guide on customizing message actions for details.
Function called when the Flag Message action is invoked from message actions list.
This function does not override the default behavior of the Flag Message action.
Please refer to the guide on customizing message actions for details.
Function called when the Mute User action is invoked from message actions list.
This function does not override the default behavior of the Mute User action.
Please refer to the guide on customizing message actions for details.
Function called when a reaction is selected in the message overlay, this is called on both the add and remove action.
This function does not override the default behavior of the reaction being selected.
Please refer to the guide on customizing message actions for details.
Function called when the Reply action is invoked from message actions list.
This function does not override the default behavior of the Reply action.
Please refer to the guide on customizing message actions for details.
Function called when the Retry action is invoked from message actions list.
This function does not override the default behavior of the Retry action.
Please refer to the guide on customizing message actions for details.
Function called when the Thread Reply action is invoked from message actions list.
This function does not override the default behavior of the Thread Reply action.
Please refer to the guide on customizing message actions for details.
Note: This prop is available only in SDK version >= v3.9.0
Enables/disables the legacy image viewer behavior.
By default, when you open (press) an image attachment it opens the image in a full-screen image viewer.
Within the viewer, you can keep swiping left to scroll through all the images that have been loaded within a channel so far.
This creates quite a lot of extra work for the JS thread to keep track of image attachments loaded in a channel and pre-populating them in the viewer for smooth transitions.
For performance reason, you can switch to an alternate UX for the image viewer where image attachments are only loaded for the selected messages in a viewer,
by setting this prop to false.
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.
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.
An array of, or function that returns and array of, actions that can be performed on a message shown in the message overlay.
Please refer to the guide on customizing message actions for details.
Override of the Mute UserMessageAction shown when a user long presses a message.
The muteUser function receives as a parameter the relevant message and must return a MessageAction.
Please refer to the guide on customizing message actions for details.
Note: This prop is available only in SDK version >= v3.9.0
Throttling interval (in milliseconds) for react state update for channel, when new messages arrive in chat. By default state updates are throttled at 500 ms, but for high concurrency
application this prop should be adjusted to 1000 ms to avoid excessive overload on JS thread.
The default handler for message press interactions acts differently when pressing on reactions and attachments.
You will have to handle these cases when overriding this function.
Override of the ReplyMessageAction shown when a user long presses a message.
The quotedReply function receives as a parameter the relevant message and must return a MessageAction.
Please refer to the guide on customizing message actions for details.
Override of the Resend MessageMessageAction shown when a user long presses a message.
The retry function receives as a parameter the relevant message and must return a MessageAction.
Please refer to the guide on customizing message actions for details.
Full override of the reaction function on a message.
This function must return a function that takes as a parameter the reactionType as a string.
Please refer to the guide on customizing message actions for details.
Sends a message with attachments in asynchronous way. By default, a message can’t be sent until all the image/file attachments have been
uploaded. If this prop is set to true, every attachment will be sent as a separate message, as soon as the upload is complete.
Note: This prop is available only in SDK version >= v3.9.0
Throttling interval (in milliseconds) for react state update for channel, (except new messages). By default state updates are throttled at 500 ms, but for high concurrency
application this prop should be adjusted to 1000 ms to avoid excessive overload on JS 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.
Override of the Thread ReplyMessageAction shown when a user long presses a message.
The threadReply function receives as a parameter the relevant message and must return a MessageAction.
Please refer to the guide on customizing message actions for details.
Component to override underlying default KeyboardCompatibleView. Generally you won’t need to use this prop at all,
you can simply use following props instead:
Component to render system type messages. Purpose of system messages is to inform user about changes to channel. System messages are part of message history, and have a property type set as system.
You can add system messages within message history in following scenarios:
Component to render text of message. By default, we use Simple Markdown package to render the text content of message.
If you decide to use this prop, please be aware that you will need to handle the markdown rendering yourself.