/ UIKit / React Native
UIKit
Chat UIKit React Native v3
Chat UIKit React Native
Chat UIKit
React Native
Version 3
Home
/
Chat
/
UIKit
/
React Native
/
Features

File sharing

Copy link

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 GroupChannelModule.

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

Copy link

You can customize the component for file sharing by using renderMessage as shown in the code below.

import { createGroupChannelFragment, GroupChannelMessageRenderer } from '@sendbird/uikit-react-native';

const GroupChannelFragment = createGroupChannelFragment();

const GroupChannelScreen = () => {
    return (
        <GroupChannelFragment
            renderMessage={(props) => {
                if (props.message.isFileMessage()) {
                    return <CustomFileMessage {...props} />;
                }
                return <GroupChannelMessageRenderer {...props} />;
            }}
        />
    );
};

Color resource

Copy link

To customize the color and style of message items, you have to change the values of UIKitColors in UIKitTheme as shown below.

CategoryPropertyDescription

groupChannelMessage

textEdited

Specifies the text color of an edited message.

groupChannelMessage

textMsg

Specifies the text color of a message.

groupChannelMessage

textSenderName

Specifies the text color of the message sender's name.

groupChannelMessage

textTime

Specifies the text color of the time that a message was sent.

groupChannelMessage

background

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 theme resource page.

interface UIKitColors {
    ui: {
        groupChannelMessage: {
            [variant in 'incoming' | 'outgoing']: {
                [state in 'enabled' | 'pressed']: {
                    textEdited: string;
                    textMsg: string;
                    textSenderName: string;
                    textTime: string;
                    background: string;
                };
            };
        };
    };
}

String resource

Copy link

The following table shows customizable properties of StringSet.

CategoryPropertyDescription

GROUP_CHANNEL

MESSAGE_BUBBLE_FILE_TITLE

A text for the file message.

LABELS

CHANNEL_INPUT_ATTACHMENT_CAMERA_PHOTO

A text for using the camera to send a photo.

LABELS

CHANNEL_INPUT_ATTACHMENT_CAMERA_VIDEO

A text for using the camera to send a video.

LABELS

CHANNEL_INPUT_ATTACHMENT_PHOTO_LIBRARY

A text for using the photo library to send a photo.

LABELS

CHANNEL_INPUT_ATTACHMENT_FILES

A text for sending files to a channel.

TOAST

OPEN_CAMERA_ERROR

A text for when there's an error to open the camera.

TOAST

OPEN_PHOTO_LIBRARY_ERROR

A text for when there's an error to access the photo library.

TOAST

OPEN_FILES_ERROR

A text for when there's an error to open files.

TOAST

DOWNLOAD_START

A text for when a file message is downloading.

TOAST

DOWNLOAD_OK

A text for when the file was successfully downloaded.

TOAST

DOWNLOAD_ERROR

A text for when the file couldn't be downloaded.

interface StringSet {
    GROUP_CHANNEL: {
        MESSAGE_BUBBLE_FILE_TITLE: (message: SendbirdFileMessage) => string;
    };
    LABELS: {
        CHANNEL_INPUT_ATTACHMENT_CAMERA_PHOTO: string;
        CHANNEL_INPUT_ATTACHMENT_CAMERA_VIDEO: string;
        CHANNEL_INPUT_ATTACHMENT_PHOTO_LIBRARY: string;
        CHANNEL_INPUT_ATTACHMENT_FILES: string;
    };
    TOAST: {
        OPEN_CAMERA_ERROR: string;
        OPEN_PHOTO_LIBRARY_ERROR: string;
        OPEN_FILES_ERROR: string;
        DOWNLOAD_START: string;
        DOWNLOAD_OK: string;
        DOWNLOAD_ERROR: string;
    };
}

Icon resource

Copy link

The following table shows customizable file sharing icons.

IconImageDescription

add

An icon used to select and add files.

document

An icon used to select a file to send.

file-audio

An icon indicating an audio file message.

file-document

An icon indicating a document file message.

play

An icon indicating a video file message.

import { Icon } from '@sendbird/uikit-react-native-foundation';

Icon.Assets['add'] = require('your_icons/add_icon.png');
Icon.Assets['document'] = require('your_icons/document_icon.png');
Icon.Assets['file-audio'] = require('your_icons/file-audio_icon.png');
Icon.Assets['file-document'] = require('your_icons/file-document_icon.png');
Icon.Assets['play'] = require('your_icons/play_icon.png');

Image compression

Copy link

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: jpg, jpeg, and png.

The following table lists properties of the imageCompression prop in the SendbirdUIKitContainer component.

PropertyTypeDescription

compressionRate

number

Specifies the value of the compression rate to apply to the image. (Default: 0.7)

width

number

Specifies the maximum value of width that you can apply to the image. This property can only be applied to images that are wider than the new width value because images can only be downsized.

height

number

Specifies the maximu value of height that you can apply to the image. This property can only be applied to images that are longer than the new height value because images can only be downsized.

To compress an image without changing the value of width and height, use the compressionRate property. To resize the image, use the width and height properties. If you assign values to compressionRate, width, and 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 true.

const App = () => {
    return (
        <SendbirdUIKitContainer
            chatOptions={{
                enableImageCompression: true
            }}
            imageCompression={{
                compressionRate: 0.5,
                width: 600,
                height: 600
            }}
        />
    );
};
On this page
Customize the UI for file sharingImage compression