CometChatQuickReactions
is a UIView
component designed for displaying a row of reactions that users can apply to messages. Initially, it shows favorite reactions along with a plus icon. Tapping the plus icon opens the CometChatEmojiKeyboard, providing access to a broader range of reactions. Selecting a reaction from the keyboard or the favorite reactions list automatically applies it to the respective message.
The number of reactions shown depends on the message bubble width. If the message bubble can only fit a limited number of reactions, it displays the first few with an indicator for additional reactions not immediately visible. This indicator informs users of the total number of reactions available.
This component is typically activated by long-pressing a message bubble in the message list.
CometChatQuickReactions
is a standard UIView that displays a list of favorite reactions with a plus button. It’s showcased in the UIContextMenu for CometChatMessageBubble but is versatile enough to be used in various UIView
contexts. The component requires a list of favorite reactions to function, which can be supplied using the reactions property.
addReactionIcon
does customize the add reaction button icon.
addReactionIcon
action.
onReacted
callback is triggered when a reaction is selected.
onAddReactionIconTapped
callback is triggered when the add reaction button is clicked.
Quick Reactions
component does not provide any exposed filtering options.
Quick Reactions
component does not provide any available events.
QuickReactionsStyle
is a class designed for customizing the visual styles of the CometChatQuickReactions view. It enables developers to easily modify colors, borders, backgrounds, and other visual attributes to align the QuickReactions component with the overall design aesthetics of their application.
This class is essential for enhancing user experience and ensuring visual consistency within the messaging interface.
QuickReactionsStyle
to customize the appearance.
Property | Description | Code |
---|---|---|
Background Color | Sets the background color | .set(background: UIColor) |
Corner Radius | Sets the corner radius | .set(cornerRadius: CometChatCornerStyle) |
Border Width | Sets the width of the border | .set(borderWidth: CGFloat) |
Border Color | Sets the color of the border | .set(borderColor: UIColor) |
PlusIcon Background Color | Sets the background color for the plusicon | .set(plusIconBackgroundColor: UIColor) |
PlusIcon Tint Color | Sets the tint color of plusicon | .set(plusIconTintColor: UIColor) |
PlusIcon Corner Radius | Sets the corner radius of the plusicon | .set(plusIconCornerRadius: CometChatCornerStyle) |
Reactions Background Color | Sets the background color of the reactions | .set(reactionsBackgroundColor: UIColor) |
Reaction Font | Sets the text appearance | .set(reactionFont: UIFont) |
Reaction Corner Radius | Sets the corner radius of reactions | .set(reactionCornerRadius: CometChatCornerStyle) |
CometChatConversationsWithMessages
by incorporating Quick Reactions
.
By leveraging custom configurations, such as QuickReactionsStyle
and QuickReactionsConfiguration
, users can seamlessly add reactions to messages
, enriching their communication experience. Notably, we’ve fine-tuned the visual aspects, setting the background color to systemPurple and ensuring clarity with a white plus icon.
Additionally, we’ve opted for a visually appealing plus diamond icon as the add reaction option, enhancing the overall user interaction.
Property | Description | Code |
---|---|---|
addReactionIcon | used to set custom add reaction button icon. | .set(addReactionIcon: UIImage?) |
setReactionList( )
method. This method allows you to pass a custom list of reactions, which will override the default reaction list functionality. By utilizing this method, you can tailor the reactions displayed in your application to meet specific requirements.
CometChatConversationsWithMessages
. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.