UIKit React Native v3
UIKit React Native
UIKit
React Native
Home
/
UIKit
/
React Native

File sharing

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

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

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

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

Color resource

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

CategoryPropertyDescription

message

textEdited

Specifies the text color of an edited message.

message

textMsg

Specifies the text color of a message.

message

textSenderName

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

message

textTime

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

message

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 themes overview page.

interface UIKitColors {
    ui: {
        message: {
            [variant in 'incoming' | 'outgoing']: {
                [state in 'enabled' | 'pressed']: {
                    textEdited: string;
                    textMsg: string;
                    textSenderName: string;
                    textTime: string;
                    background: string;
                };
            };
        };
        // More UI colors.
    };
    // More UI colors.
}

Icon resource

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');

String resource

The following table shows customizable properties of StringSet.

CategoryPropertyDescription

GROUP_CHANNEL

MESSAGE_BUBBLE_FILE_TITLE

A text for the file message.

GROUP_CHANNEL

DIALOG_ATTACHMENT_CAMERA

A text for using the camera to send a photo.

GROUP_CHANNEL

DIALOG_ATTACHMENT_PHOTO_LIBRARY

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

GROUP_CHANNEL

DIALOG_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;
        DIALOG_ATTACHMENT_CAMERA: string;
        DIALOG_ATTACHMENT_PHOTO_LIBRARY: string;
        DIALOG_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;
    };
}

Image compression

UIKit for React Native currently doesn't provide the image compression feature when sending them to other users in the channel. However, you can allow them to reduce the image size using an ImageResizer before sending it to the channel.

import ImageResizer from 'react-native-image-resizer';

const GroupChannelScreen = () => {
    return (
        <GroupChannelFragment
            onBeforeSendFileMessage={async (params) => {
                if ('uri' in params.file) {
                    if (getFileExtension(params.file.name).match(/jpeg|png/i)) {
                        const { uri, size } = await ImageResizer.createResizedImage(params.file.uri);
                        params.file = { ...params.file, uri, size };
                    }
                }

                return params;
            }}
        />
    );
};