Chat UIKit React Native v2

Chat UIKit React Native

Chat UIKit

React Native

Version 2

Icon resource

The icon resource contains icons that are used to compose views in UIKit. You can customize all the icons shown in the following table.

Icon	Image	Description
chat-hide		Hides the channel.
chat-show		Shows the channel.
add		Adds a file.
archive		Archives a channel.
arrow-left		Goes back to the previous screen.
ban		Indicates banned channel members.
broadcast		Shows a broadcast channel.
camera		Opens the user's camera app.
channels		Indicates a channel.
chat-filled		Indicates that there are channels.
chat		Indicates that there are no channels.
checkbox-off		Indicates that a check box hasn't been selected.
checkbox-on		Indicates that a check box has been selected.
chevron-down		Directs the user to the latest message.
chevron-right		Directs the user to the member list.
close		Closes a file viewer.
copy		Copies a message.
create		Creates a channel.
delete		Deletes an item.
document		Indicates a file.
done-all		Indicates that a message has been either read or delivered to all members of a channel.
done		Indicates that a message has been sent by the current user but not necessarily delivered to every member.
download		Downloads a file to the user's mobile app.
edit		Edits a message.
emoji-more		Shows more emojis.
error		Indicates an error in channel list.
file-audio		Indicates an audio file.
file-document		Indicates a document file.
freeze		Freezes a channel.
gif		Indicates a `GIF` file.
info		Shows channel information.
leave		Leaves a channel.
members		Shows channel members.
message		Indicates that there are no messages.
moderation		Shows Moderation options.
more		Shows more options.
mute		Mutes notifications in a channel.
notifications-filled		Turns on notifications by swiping the icon in channel list.
notifications-off-filled		Mutes notifications by swiping the icon in channel list.
notifications		Indcates the notifications icon in channel settings.
operator		Indicates the channel operator.
photo		Indicates the user's photo library.
play		Indicates that the message is a video file.
plus		Invites a user to a channel from a user list.
question		Indicates an error in loading emojis.
refresh		Retries connection with Sendbird server.
remove		Clears the text field in message search bar.
reply-filled		Indicates that a user replied to another user's message.
reply		Replies to a message in the channel.
search		Indicates the message search feature.
send		Sends a message to the channel.
settings-filled		Shows the profile settings.
spinner		Indicates that a message or a screen is loading.
streaming		Indicates a video streaming button.
supergroup		Indicates a Supergroup channel.
theme		Indicates the UIKit light and dark themes.
thumbnail-none		Indicates a blank image.
unarchive		Unarchives a channel.
user		Indicates the default profile image of a user.

How to use

There are two ways to use icons in UIKit for React Native: use the Icon component or use the icon images set in the Icon.Assets object.

Icon component

As shown in the code below, you can use the Icon component of UIKit for React Native to render various icons.

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

const CameraButton = (props: object) => {
    return (
        <Pressable {...props}>
            <Icon icon={'camera'} size={24} color={'black'} />
        </Pressable>
    );
};

Icon.Assets

You can also use the icon images assigned to the Icon.Assets object.

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

const CameraButton = (props: object) => {
    return (
        <Pressable {...props}>
            <Image source={Icon.Assets['camera']} style={{ width: 24, height: 24, tintColor: 'black' }} />
        </Pressable>
    );
};

Customize the icons

You can customize the icons by assigning a custom icon image to the Icon.Assets object.

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

Icon.Assets['icon-name'] = require('your_icons/your-icon-name.png');

On this page

How to use

Icon component Icon.Assets

Customize the icons