File sharing is a feature that allows users to send files during a chat, such as images, audio files, and videos. File sharing appears in the MessageList component of the
There are currently four types of file messages that users can send: image file, video file, audio file, and document file. These files can be shared with other members in the channel by either directly taking a photo with the camera on a mobile device or uploading an image, video, audio, or document file from the sender’s mobile device.
Note: In order to use the file sharing feature, you must first create a channel and enable the chat service. To learn how to allow users to chat in a channel, refer to the chat in a group channel page.
Customize the UI for file sharing
You can customize the component for file sharing by using
renderMessage as shown in the code below.
To customize the color and style of message items, you have to change the values of
UIKitTheme as shown below.
Specifies the text color of an edited message.
Specifies the text color of a message.
Specifies the text color of the message sender's name.
Specifies the text color of the time that a message was sent.
Specifies the background color of a message bubble.
Note: To learn how to customize the theme colors, refer to the color resource page and the themes overview page.
The following table shows customizable properties of
A text for the file message.
A text for using the camera to send a photo.
A text for using the photo library to send a photo.
A text for sending files to a channel.
A text for when there's an error to open the camera.
A text for when there's an error to access the photo library.
A text for when there's an error to open files.
A text for when a file message is downloading.
A text for when the file was successfully downloaded.
A text for when the file couldn't be downloaded.
The following table shows customizable file sharing icons.
An icon used to select and add files.
An icon used to select a file to send.
An icon indicating an audio file message.
An icon indicating a document file message.
An icon indicating a video file message.
UIKit for React Native allows users to compress images when sending them to other users in the channel on a client app. By reducing the image size, they can send and receive image files faster and minimize the usage of data storage as well as data usage. Image compression can be applied to the following image types:
The following table lists properties of the
imageCompression prop in the
Specifies the value of the compression rate to apply to the image. (Default:
Specifies the maximum value of
Specifies the maximu value of
To compress an image without changing the value of
height, use the
compressionRate property. To resize the image, use the
height properties. If you assign values to
height simultaneously, the image will be both compressed and resized. If you don't want to compress the image, set
chatOptions.enableImageCompression in the
SendbirdUIKitContainer component to
false. The default value is set to