Chat UIKit iOS v3
Chat UIKit iOS
Chat UIKit
iOS
Version 3

Reactions

Copy link

Message reactions are a useful social interaction tool that helps build a more engaging chat experience. Users can express their response to messages beyond text using emojis. The UIKit reactions feature is based on the Chat SDK’s reactions feature and provides a default set of emojis suited for diverse messaging needs. You can also customize the reactions UI just like the global themes.

Note: Reactions are currently only available for group channels. This feature isn't supported in open channels, Supergroup channels, and custom message types.


Implementation guide for reactions

Copy link

Once a client app is connected to the Sendbird server, you can access the predefined emoji list. A combination of the emoji list and the reaction information within each message completes the UI of the reactions.

In order to implement this feature, the following settings need to be checked:

  • The application settings for reactions
  • The emojis registered in your Sendbird application

Components

Copy link

There are 3 ways in which reactions can be expressed by users:

  • Long tap on a message to select an emoji from the Emoji reaction bar.
  • Tap on the Add reaction button to select an emoji.
  • Tap on an existing emoji reaction in the Emoji reaction box to add a user count of the reaction.

Emoji reaction bar in Message menu

Copy link

When a message doesn't contain any prior reaction data, the only way to add a reaction is by holding down a message to view the Emoji reaction bar in the Message menu. The bar reveals a list of five to six emojis in the chronological order of when each emoji was registered to Sendbird server. Selecting the Add reaction button on the right end of the bar reveals the full Emoji list to add different emoji reactions.

If a message already contains reaction data, you can still long tap a message to view the Emoji reaction bar. In this case, emoji reactions already added to the message by the current user are indicated with a highlighted background color.

Add reaction button

Copy link

The Add reaction button can be accessed through either the Emoji reaction box or the Emoji reaction bar in the Message menu.

A long tap on a message can open the Emoji reaction bar where the Add reaction button appears, whereas a regular tap on the button in the Emoji reaction box sends a click event that calls the Emoji list.

Emoji list

Copy link

An Emoji list displays all emojis registered within an application. By default, Sendbird UIKit provides seven emojis but you can register more through the add emojis API. The Emoji list is refreshed when the application connects to the Chat SDK by comparing the prior emojiHash in the application to the emojiHash information from Sendbird server.

When the Emoji list is shown, reactions already added to a message by the current user are indicated with a highlighted background color.

Emoji reaction box

Copy link

When a text or file message contains reaction data, this data is displayed below the message in the form of emoji reactions. The number of users who added an emoji reaction to the message is indicated next to each emoji reaction. Selecting an emoji in the Emoji reaction box adds or removes the reacted user count.

Reacted user list

Copy link

To see a list of users who reacted to the message, long tap a reaction emoji that's displayed in the Emoji reaction box. The underlined tab corresponds to the tapped emoji reaction but you can also view the reacted user list for other emoji reactions. Each tab shows the user count and a list of all users who reacted with the emoji.


Customize the reactions UI

Copy link

You can customize the reactions UI through the methods of SBUGroupChannelViewController, SBUGroupChannelViewModel, and SBUGroupChannelModuleListDelegate.

List of methods

Copy link
ClassMethodDescription

SBUGroupChannelViewController

showEmojiListModal(message:)

Overrides this method to show the emoji list using a customized ViewController.

SBUGroupChannelViewModel

setReaction(message:emojiKey:didSelect:)

Adds or removes an emoji reaction.

SBUGroupChannelModuleListDelegate

setEmojiTapGestureHandler(_:emojiKey:)

Overrides this method to handle a tap gesture on the emoji in the cell.

SBUGroupChannelModuleListDelegate

setEmojiLongTapGestureHandler(_:emojiKey:)

Overrides this method to handle a long tap gesture on the emoji in the cell.

SBUComponentTheme

Copy link
CategoryPropertyDescription

Emoji reaction box

reactionBoxBackgroundColor

The background color of the Emoji reaction box.

Emoji reaction box

reactionBoxBorderLineColor

The color of the border line of the Emoji reaction box.

Emoji reaction box

reactionBoxEmojiCountColor

The text color of the emoji reaction count in the Emoji reaction box.

Emoji reaction box

reactionBoxEmojiBackgroundColor

The background color of an emoji reaction in the Emoji reaction box.

Emoji reaction box

reactionBoxSelectedEmojiBackgroundColor

The highlight color for the background of the emoji reaction selected by the current user in the Emoji reaction box.

Emoji reaction box

reactionBoxEmojiCountFont

The font of the emoji reaction count in the Emoji reaction box.

Reacted user list

emojiCountColor

The text color of an emoji reaction count in the Reacted user list.

Reacted user list

emojiSelectedCountColor

The text color of the count of an emoji reaction selected by the current user in the Reacted user list.

Reacted user list

emojiSelectedUnderlineColor

The color of the underline for a selected emoji reaction tab in the Reacted user list.

Reacted user list

emojiCountFont

The font of the count of an emoji reaction selected by the current user in the Reacted user list.

Reacted user list

reactionMenuLineColor

The color of the separation line between an emoji reaction tab and its reacted user list.

Emoji list

emojiListSelectedBackgroundColor

The color for the background of emojis selected by the current user in the Emoji list.

Add reaction button

addReactionTintColor

The color of drawing in the Add reaction button located in the Emoji reaction box and on the Emoji reaction bar.