Chat UIKit React Native v3
Chat UIKit React Native
Chat UIKit
React Native
Version 3

Voice message

Copy link

Voice message is an alternate form of communication between users without sending a text or file message. By delivering voice messages, users can be more expressive with their tone and intentions. It also takes less time to record a voice message than type up a long message, which enhances efficiency for the sender. The receiver can also listen to the message at a convenient time while multi-tasking. The user can record and send a voice message in the input component of the group channel. Then, the message will appear in the message list component of the channel where the receiver can play the file.


Limitations

Copy link

The voice message feature currently has the following limitations:

  • Voice messages are available for group channels and supergroup channels only.
  • Users must record for at least one second and can record up to and including ten minutes.
  • Users can't pause while recording a voice message.

How to use

Copy link

To turn on the feature, refer to the code below:

import { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
const App = () => {
    return <SendbirdUIKitContainer uikitOptions={{ groupChannel: { enableVoiceMessage: true } }} />;
};

Send a voice message

Copy link

In order to send a voice message, users have to record a message first in the Input component of GroupChannelModule. By default, a voice message icon is visible on the right side of the input field. Once this icon is tapped, the voice recorder appears. Users can record a message by tapping the red record button. They can select the cancel button to go back to the message input field or they can tap the send button to send the voice message. To listen to the preview of the voice message before sending it, users can tap the play button.

Voice message recorder

Copy link

When recording a voice message, the message must be at least one second long and shorter than ten minutes. Once you tap the stop button, you can't restart to continue recording. You must either cancel the recording and record again or just send what you've recorded so far. If the message is less than one second before tapping the stop button, the message won't be saved and you'll see the message input component with the red record button again. Once you've successfully recorded a voice message, you can listen to it before sending it to others. Pausing the recorded voice message while listening to it is allowed.

Customize the UI for voice message recorder

Copy link

You can customize the UI for voice message recorder in the Input component of GroupChannelModule through the style resource and icon resource.

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

textVoicePlaytime

Specifies the text color of the voice message's playing time.

groupChannelMessage

voiceSpinner

Specifies the color of the loading spinner on the voice message.

groupChannelMessage

voiceProgressTrack

Specifies the color of the progress tracker of the voice message in the chat view.

groupChannelMessage

voiceActionIcon

Specifies the color of a play and pause icon of the voice message.

groupChannelMessage

voiceActionIconBackground

Specifies the background color of a play and pause icon of the voice message.

voiceMessageInput

textCancel

Specifies the text color of a cancel button of the voice message input field.

voiceMessageInput

textTime

Specifies the text color of the playing time in the voice message input field.

voiceMessageInput

background

Specifies the background color of the voice message input field.

voiceMessageInput

actionIcon

Specifies the color of a play, pause, and stop icon in the voice message input field.

voiceMessageInput

actionIconBackground

Specifies the background color of a play, pause, and stop icon in the voice message input field.

voiceMessageInput

sendIcon

Specifies the color of a send button in the voice message input field.

voiceMessageInput

sendIconBackground

Specifies the background color of a send button in the voice message input field.

voiceMessageInput

progressTrack

Specifies the color of the progress tracker of the voice message during recording.

voiceMessageInput

recording

Specifies the color of a record icon in the voice message input field.

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']: {
                    textVoicePlaytime: string;
                    voiceSpinner: string;
                    voiceProgressTrack: string;
                    voiceActionIcon: string;
                    voiceActionIconBackground: string;
                };
            };
        };
        voiceMessageInput: {
            [variant in 'default']: {
                [state in 'active' | 'inactive']: {
                    textCancel: string;
                    textTime: string;
                    background: string;
                    actionIcon: string;
                    actionIconBackground: string;
                    sendIcon: string;
                    sendIconBackground: string;
                    progressTrack: string;
                    recording: string;
                };
            };
        };
    };
}

String resource

Copy link

The following table shows customizable properties of StringSet.

CategoryPropertyDescription

GROUP_CHANNEL_LIST

CHANNEL_PREVIEW_BODY

A preview text of the channel's latest message.

MESSAGE_SEARCH

SEARCH_RESULT_ITEM_BODY

A preview text of message search results.

LABELS

VOICE_MESSAGE

A text to indicate a voice message.

LABELS

VOICE_MESSAGE_INPUT_CANCEL

A text for a cancel button of the voice message.

LABELS

CHANNEL_INPUT_REPLY_PREVIEW_BODY

A preview text of the message that the current user is replying to.

TOAST

USER_MUTED_ERROR

A text for an alert dialog that's displayed when the current user tries to send a voice message while muted.

TOAST

CHANNEL_FROZEN_ERROR

A text for an alert dialog that's displayed when a user tries to play the voice message in a frozen channel.

interface StringSet {
    GROUP_CHANNEL_LIST: {
        CHANNEL_PREVIEW_BODY: string;
    };
    MESSAGE_SEARCH: {
        SEARCH_RESULT_ITEM_BODY: string;
    };
    LABELS: {
        VOICE_MESSAGE: string;
        VOICE_MESSAGE_INPUT_CANCEL: string;
        CHANNEL_INPUT_REPLY_PREVIEW_BODY: string;
    };
    TOAST: {
        USER_MUTED_ERROR: string;
        CHANNEL_FROZEN_ERROR: string;
    };
}

Icon resource

Copy link

The following table shows customizable mention icons.

IconImageDescription

audio-on

An icon used as a button to show the voice message recording view in the input component.

recording

An icon used as a record button start recording a voice message in the input component.

stop

An icon used as a stop button to stop recording a voice message in the input component.

play

An icon used as a play button to listen to a voice message recording in the input component.

pause

An icon used as a pause button to pause a voice message recording from playing in the input component.

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

Icon.Assets['audio-on'] = require('your_icons/audio-on_icon.png');
Icon.Assets['recording'] = require('your_icons/recording_icon.png');
Icon.Assets['stop'] = require('your_icons/stop_icon.png');
Icon.Assets['play'] = require('your_icons/play_icon.png');
Icon.Assets['pause'] = require('your_icons/pause_icon.png');