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

Mention

Mention is a feature that allows users to call out each other in a message within a group channel. Users can mention other members in the group channel to get their attention and directly notify that they've been mentioned in a message.


Limitations

The mention feature currently has the following limitations:

  • User is the only mention type that Sendbird UIKit provides.
  • Users can only mention other users in the same channel.
  • Users can mention up to 10 users in a single message.

How to use

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

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

Configure mention settings

The mention feature has basic settings that you can customize when implementing it in your client app. The maximum number of times you can mention the same user or multiple users in one message is 10. The maximum number of users shown in a suggested mention list is set to 15 by default. These numbers are customizable through userMention, which contains mentionLimit and suggestionLimit properties.

import { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
const App = () => {
    return <SendbirdUIKitContainer userMention={{ mentionLimit: 10, suggestionLimit: 15 }} />;
};

Mention a user

Users can mention other users in the same channel by either searching for the channel member or typing in the user's nickname. When a user types @ in the Input component of GroupChannelModule, a suggested mention list view appears in the group channel screen. The suggested mention list contains a scrollable list of all channel members by their nickname or user ID. The list also appears while the user types the nickname of a channel member. As the nickname is being typed, the list sorts the nicknames alphabetically in real-time.

Suggested mention list

The suggested mention list shows an alphabetical list of all channel members that you can mention in a message. For each member in the list, the profile image, nickname, and user ID are shown by default. You can choose to display either just the nickname or both nickname and user ID. The suggested mention list disappears once a user has been successfully mentioned in a message or when there's no matching nickname found in the list. If there's a typo while typing in a user's nickname or if the user's not a member of the current group channel, the mention list also disappears.

If a user reaches the value of mentionLimit, a warning guide appears in the suggested mention list view.

Mention input

When you type @ and a user nickname in the Input component of GroupChannelModule, the suggested mention list appears. While the list can display both nickname and user ID, you can only type nicknames in the message input field to mention a user. The same user can be mentioned up to 10 times per message by default and the text of each user mention is bolded.


Receive a mention

When a user is mentioned in a message, the unread message count in the List component of GroupChannelListModule increases by the number of unread mentioned messages. The unreadMentionCount property specifies the number of unread mentioned messages in a channel and gets added to the total unread message count. A mention badge also appears to the left of the unread message count number to indicate that the user has been mentioned in the unread message. Regardless of the number of unread mentioned messages, if there's at least one unread mentioned message in a channel, the mention badge appears in the channel list.

Once the user taps on the channel with the unread mentioned message, they can see all the messages in the MessageList component of GroupChannelModule where the highlighted user's nickname appears. The nickname is highlighted only in messages that mention the current user.

User profile

Users can tap on each mentioned nickname in a message to see the user profile of the mentioned channel member. The user profile includes a profile image, nickname, and user ID.


Push notifications for mentions

The option to turn on notifications for mentions only has been added to the View component of GroupChannelNotificationsModule. In order to move to the group channel notifications screen from the group channel settings screen, you need to pass a new function to the onPressMenuNotification prop. This prop is called when the Notification option is tapped in the Menu component of GroupChannelSettingsModule. You can build GroupChannelNotificationsFragment through the createGroupChannelNotificationsFragment method.

If you turn on push notifications for the channel using the toggle button, two options will appear below: all new messages and mentions only. All new messages include notifications for both non-mentioned messages and mentioned messages, whereas mentions only refer to notifications for just mentioned messages.


Customize the UI

You can customize the UI for mention in the Input component of GroupChannelModule, the Menu component of GroupChannelSettingsModule, and the components of GroupChannelNotificationsModule through the string resource and icon resource.

String resource

The following table shows customizable properties of StringSet.

CategoryPropertyDescription

GROUP_CHANNEL

MENTION_LIMITED

A text indicating that a user has reached the maximum number of mentions they can make in a single message.

GROUP_CHANNEL_SETTINGS

MENU_NOTIFICATION

A text for Notification in the group channel settings screen.

GROUP_CHANNEL_SETTINGS

MENU_NOTIFICATION_LABEL_ON

A text indicating that push notifications are turned on in the group channel settings screen.

GROUP_CHANNEL_SETTINGS

MENU_NOTIFICATION_LABEL_OFF

A text indicating that push notifications are turned off in the group channel settings screen.

GROUP_CHANNEL_SETTINGS

MENU_NOTIFICATION_LABEL_MENTION_ONLY

A text indicating that push notifications are turned on for mentions only in the group channel settings screen.

GROUP_CHANNEL_NOTIFICATIONS

HEADER_TITLE

A header text for the group channel notifications screen.

GROUP_CHANNEL_NOTIFICATIONS

MENU_NOTIFICATIONS

A text indicating that the toggle button refers to push notifications.

GROUP_CHANNEL_NOTIFICATIONS

MENU_NOTIFICATIONS_DESC

A text indicating that turning on the toggle button allows the user to to be notified when messages are delivered to the channel.

GROUP_CHANNEL_NOTIFICATIONS

MENU_NOTIFICATIONS_OPTION_ALL

A text indicating that if this radio button is selected, the user will receive notifications for all messages sent to the channel.

GROUP_CHANNEL_NOTIFICATIONS

MENU_NOTIFICATIONS_OPTION_MENTIONS_ONLY

A text indicating that if this radio button is selected, the user will receive notifications for mentions only.

interface StringSet {
    GROUP_CHANNEL: {
        MENTION_LIMITED: (mentionLimit: number) => string;
    };
    GROUP_CHANNEL_SETTINGS: {
        MENU_NOTIFICATION: string;
        MENU_NOTIFICATION_LABEL_ON: string;
        MENU_NOTIFICATION_LABEL_OFF: string;
        MENU_NOTIFICATION_LABEL_MENTION_ONLY: string;
    };
    GROUP_CHANNEL_NOTIFICATIONS: {
        HEADER_TITLE: string;
        MENU_NOTIFICATIONS: string;
        MENU_NOTIFICATIONS_DESC: string;
        MENU_NOTIFICATIONS_OPTION_ALL: string;
        MENU_NOTIFICATIONS_OPTION_MENTIONS_ONLY: string;
    };
}

Icon resource

The following table shows customizable mention icons.

IconImageDescription

info

An icon used to indicate that the user has reached the maximum mention count in a single message.

radio-on

An icon used to indicate that either All new messages or Mentions only is turned on for receiving push notifications.

radio-off

An icon used to indicate that either All new messages or Mentions only is turned off for receiving push notifications.

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

Icon.Assets['info'] = require('your_icons/info_icon.png');
Icon.Assets['radio-on'] = require('your_icons/radio-on_icon.png');
Icon.Assets['radio-off'] = require('your_icons/radio-off_icon.png');