Comments & Reactions

Engagement features including threaded comments, emoji reactions, multiple reaction types, and real-time interactions

Key Benefit: Foster dynamic community engagement with comprehensive comment systems, emoji reactions, and real-time interaction features that encourage meaningful conversations and content discovery.

Feature Overview

The Comments & Reactions UIKit provides comprehensive tools for building engaging comment systems and reaction features. From threaded conversations and reply management to emoji reactions and user interaction tracking, these components create the foundation for vibrant community discussions and content engagement.

Comment Systems

Rich Conversations

• Threaded comment displays
• Comment creation and editing
• Reply management
• Mention support in comments

Reaction Features

Expressive Engagement

• Emoji reaction systems
• Reaction list displays
• Real-time reaction updates
• Custom reaction support

Interactive Components

Community Engagement

• Comment tray interfaces
• Reaction picker components
• User interaction tracking
• Brand user comment support

Content Management

Moderation Tools

• Comment reporting
• Content moderation
• User blocking capabilities
• Administrative controls

Platform Support

Feature	iOS	Android	React	React Native	Flutter
Create / Edit Comment	✅	✅	✅	✅	✅
View Comments	✅	✅	✅	✅	✅
Report Comment	✅	✅	✅	✅	✅
Mention in Comments	✅	✅	✅	✅	✅
Comment Tray	✅	✅	✅	❌	✅
Brand User Comment	✅	✅	✅	❌	✅
Comment Ads	✅	✅	✅	✅	❌
Multi-Level Comment Replies (2-Level)	✅	✅	✅	❌	❌
Post / Comment / Story Reactions	✅	✅	✅	✅	✅
View Reactions	✅	✅	✅	✅	✅
Multiple Reactions	✅	✅	✅	❌	❌

Legend: ✅ Full Support | ❌ Not Available

Component Features

Comment Features

Interactive Comment Systems

• Threaded Comments: Nested reply conversations with two-level display model
• Comment Creation: Rich text editing with mention support
• Comment Management: Edit, delete, and report capabilities
• Real-time Updates: Live comment synchronization

Reaction Features

Expressive User Engagement

• Emoji Reactions: Pre-defined and custom emoji support
• Reaction Analytics: User lists and engagement metrics
• Multiple Reactions: Support for various reaction types
• Real-time Updates: Instant reaction synchronization

Reply Threading Features

Multi-Level Comment Reply System

• Reply to any bubble: Users can reply to L0 comments, L1 replies, or L2 replies
• Expand & Load More: “View replies (n)” button to expand reply threads, “View more replies” for pagination (5 replies per page)
• Inline Edit: Edit L1/L2 replies directly within the comment bubble
• Per-Level Deletion: Soft-deleted L0 comments show placeholder; deleted L1/L2 replies are silently removed
• Notification Deep-Link: Tapping a reply notification navigates to the post and display the specific reply

Advanced Features

Enhanced Functionality

• Mention System: @username functionality with notifications
• Content Moderation: Reporting and administrative controls
• Brand User Support: Professional commenting capabilities
• Accessibility: Screen reader and keyboard navigation support

Multi-Level Comment Replies

The UIKit comment system supports a two-level display model for replies, enabling richer conversations while keeping the UI clean.

Comment Hierarchy

Level	Display	Reply Action
Level 0 (L0)	Top-level comment on a post/story	”Reply” creates an L1 reply
Level 1 (L1)	Direct reply to L0, indented under the parent	”Reply” creates an L2 reply
Level 2 (L2)	Reply to an L1 comment, indented under L1	”Reply” creates another L2 reply (auto-resolved to L1 ancestor)

UIKit supports up to Level 2 only. All replies beyond Level 1 are always displayed as Level 2. When a user taps “Reply” on an L2 comment, the UIKit automatically resolves the parentId to the L1 ancestor, so the new reply is created as another L2 sibling — never L3 or deeper.

When a user taps “Reply” on an L2 reply, the compose bar shows “Replying to @[author-name]” and pre-fills the text with @[author-name]. The reply is created under the L1 ancestor, not the L2 comment itself.

Reply Thread Behavior

Expand & Load More

Paginated reply threads with progressive loading

• When an L0 comment has replies, a “View replies (n)” button appears below it
• Tapping it loads the first page of replies (5 per batch)
• If more replies exist, a “View more replies” button appears at the end of the thread
• L1 replies are sorted newest first (lastCreated)
• L2 replies are sorted oldest first (firstCreated) for chronological reading

Reply Compose Bar

Contextual compose bar for replies

• Tapping “Reply” on any comment bubble opens the compose bar with focus
• A “Replying to @[author]” chip appears above the text field
• The text field is pre-filled with @[author-name]
• Tapping the ✕ dismiss button on the chip clears the reply context
• Reply action is hidden for non-member users in communities (shouldAllowCreation = false)

Deletion Behavior

Level-specific deletion rules

• L0 soft delete: Comment shows a placeholder (“This comment has been deleted”) — child replies remain visible
• L1 delete: Reply bubble is removed from the UI; L0 parent’s reply count decrements
• L2 delete: Only the L2 bubble is removed; L1 parent and sibling L2 replies remain

Inline Edit

Edit replies directly within the bubble

• The bubble transforms into an editable text field with Cancel and Save buttons
• Save is disabled if text is empty or unchanged

Notification Navigation

Deep-link from notification tray to specific replies

• Tapping a reply notification navigates to the post detail page
• The screen displays the specific reply bubble with a brief highlight animation

Limitations

• UIKit supports up to Level 2 replies. All replies beyond Level 1 are always created and displayed as Level 2 — the UIKit never creates L3 or deeper comments.
• Reply threads load 5 replies per page by default. This is not configurable through UIKit.

Implementation Guide

Comment Tray Component

Comprehensive comment interface with threading and reactions

The Comment Tray Component facilitates dynamic interaction through comments and reactions, designed to foster community engagement directly within content viewing experiences.

Features

Feature	Description
View, create or edit comments	Users can view, create or edit text comments or reply comments, and add reactions to comments
Multi-level replies	Reply to any comment or reply (L0, L1, L2) with “Replying to” chip and @mention pre-fill
Expand reply threads	”View replies (n)” button to expand reply threads with paginated loading (5 per batch)
Inline edit	Edit L1/L2 replies directly within the comment bubble with Cancel/Save actions
Per-level deletion	Soft-deleted L0 shows placeholder; deleted L1/L2 replies are silently removed
Threaded conversations	Support for nested replies with a two-level display model
Real-time updates	Live synchronization of comments and reactions

Customization Options

Config ID	Type	Description
*/edit_comment_component/*	Component	You can customize theme
*/edit_comment_component/cancel_button	Element	You can customize button_text, icon and background_color
*/edit_comment_component/save_button	Element	You can customize button_text, icon and background_color
*/comment_tray_component/*	Component	You can customize close_icon

Code Examples

iOS

// If you want to load comments of a post:
//     referenceId: "<post-id>"
//     referenceType: .post
// If you want to load comments of a story:
//     referenceId: "<story-id>"
//     referenceType: .story
let commentTrayComponent = AmityCommentTrayComponent(
    referenceId: "<story-id>", 
    referenceType: .story, 
    community: nil, 
    shouldAllowInteraction: true, 
    shouldAllowCreation: true
)
let viewController = AmitySwiftUIHostingController(rootView: commentTrayComponent)

Navigation Behavior

Custom navigation behavior can be implemented to enhance or modify the interaction flow on the AmityCommentTrayComponent.

iOS

class CustomAmityCommentTrayComponentBehavior: AmityCommentTrayComponentBehavior {
    override init() {
        super.init()
    }
}

// Call this function to setup custom behaviour class in UIKit
func setCommentTrayBehaviour() {
    let customBehavior = CustomAmityCommentTrayComponentBehavior()
    AmityUIKit4Manager.behaviour.commentTrayComponentBehavior = customBehavior
}

Reaction List Component

Detailed reaction information and user engagement analytics

The Reaction List Component displays comprehensive information about users who have reacted to content and their specific reactions.

Features

Feature	Description
Reaction List	Users can view the list of users who reacted to the post with reaction details
User Interaction	Navigate to user profiles from reaction lists
Reaction Analytics	View reaction distribution and engagement metrics

Customization Options

Config ID	Type	Description
*/reaction_list/*	Theme	You can customize component theme
*/reaction_list/user_avatar_view	Element	You can hide avatar image view
*/reaction_list/user_display_name	Element	You can hide display name
*/reaction_list/reaction_image_view	Element	You can hide reaction icon

Code Examples

iOS

// Create reaction list component
let reactionListView = AmityReactionList(referenceId: "<post-id>", referenceType: .post)
let viewController = AmitySwiftUIHostingController(rootView: reactionListView)

Navigation Behavior

iOS

class CustomAmityReactionListBehavior: AmityReactionListBehavior {
    override init() {
        super.init()
    }
    
    override func goToUserProfile(context: AmityReactionListBehavior.Context) {
        // Custom implementation for navigating to User Profile
    }
}

// Call this function to setup custom behaviour class in UIKit
func setReactionListBehaviour() {
    let customBehavior = CustomAmityReactionListBehavior()
    AmityUIKit4Manager.behaviour.reactionListBehavior = customBehavior
}

Multiple Reactions

Configurable reaction systems for enhanced user expression

The UIKit supports multiple reaction types for both posts and comments, allowing you to customize different reaction sets for social features and messaging features to match your community’s engagement patterns.

Global Configuration: These reaction configurations are set at the global level in AmityUIKitConfig.json and apply across all UIKit components automatically.

Features

Feature	Description
Dual Reaction Systems	Separate reaction configurations for social posts/comments and messaging features
Custom Reaction Sets	Configure different emoji reactions for different contexts
Global Configuration	Set once at the application level for consistent experience
Cross-Platform Support	Consistent reaction experience across all supported platforms

Post/Comment Reactions Configuration

Configure reactions specifically for social posts and comments:

{
  "social_reactions": [
    {
      "name": "like",
      "image": "messageReactionLike"
    },
    {
      "name": "love",
      "image": "messageReactionHeart"
    },
    {
      "name": "fire",
      "image": "messageReactionFire"
    },
    {
      "name": "happy",
      "image": "messageReactionGrinning"
    },
    {
      "name": "sad",
      "image": "messageReactionSad"
    }
  ]
}

Message Reactions Configuration

Configure reactions specifically for direct messages and chat:

{
  "message_reactions": [
    {
      "name": "heart",
      "image": "messageReactionHeart"
    },
    {
      "name": "like",
      "image": "messageReactionLike"
    },
    {
      "name": "fire",
      "image": "messageReactionFire"
    },
    {
      "name": "grinning",
      "image": "messageReactionGrinning"
    },
    {
      "name": "sad",
      "image": "messageReactionSad"
    }
  ]
}

Configuration Benefits

Configuration Type	Use Case	Benefits
Social Reactions	Posts and Comments	Optimized for community engagement and content interaction
Message Reactions	Direct Messages and Chat	Tailored for conversational context and quick responses
Global Level	Application-wide	Consistent experience across all components and features

Best Practices

Reaction Context Design

Matching reactions to user context

Configure different reaction sets based on the interaction context. Use more expressive reactions for social posts and streamlined options for quick message responses. Consider your community’s communication patterns when selecting reaction types.

Consistency Guidelines

maintaining coherent reaction experiences

Ensure reaction images and names are consistent across platforms. Use clear, universally understood emoji representations. Test reaction visibility and accessibility across different devices and screen sizes.

Component Management Strategies

Comment System Design

Creating engaging conversation experiences

Design comment systems that encourage meaningful dialogue while maintaining community standards. Implement clear threading, easy reply mechanisms, and intuitive editing capabilities. Consider moderation needs and user reporting flows early in design.

Reaction Strategy

Optimizing reaction engagement

Choose reaction sets that match your community culture and content types. Implement clear visual feedback for user interactions and consider analytics to understand engagement patterns. Balance expressiveness with simplicity.

Best Practices

Comment System UX

Creating intuitive comment experiences

Design comment interfaces that encourage meaningful conversations while maintaining readability. Implement clear visual hierarchy for threaded discussions, provide easy access to reply and edit functions, and ensure comment moderation tools are readily available to maintain community standards.

Reaction Design

Optimizing reaction engagement

Choose reaction sets that match your community culture and content types. Implement clear visual feedback for user interactions, consider analytics to understand engagement patterns, and balance expressiveness with simplicity to avoid overwhelming users.

Related Components

Posts & Media

Explore post components that integrate with comment and reaction systems.

Social Feeds

Learn about feed components that display posts with comment and reaction previews.

Users & Profiles

Understand user profile features that showcase comment and reaction activity.

Communities

Discover community features that provide context for comments and reactions.

Implementation Strategy: Start with AmityCommentTrayComponent for comprehensive comment functionality, then add AmityReactionListComponent for detailed user engagement insights. Integrate reaction features gradually based on your community engagement goals and user feedback patterns.