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

FeatureiOSAndroidReactReact NativeFlutter
Create / Edit Comment
View Comments
Report Comment
Mention in Comments
Comment Tray
Brand User Comment
Comment Ads
Post / Comment / Story Reactions
View Reactions
Legend: ✅ Full Support | ❌ Not Available

Component Features

Implementation Guide

Comprehensive comment interface with threading and reactionsThe Comment Tray Component facilitates dynamic interaction through comments and reactions, designed to foster community engagement directly within content viewing experiences.

Features

FeatureDescription
View, create or edit commentsUsers can view, create or edit text comments or reply comments, and add reactions to comments
Threaded conversationsSupport for nested replies with configurable depth limits
Real-time updatesLive synchronization of comments and reactions

Customization Options

Config IDTypeDescription
*/edit_comment_component/*ComponentYou can customize theme
*/edit_comment_component/cancel_buttonElementYou can customize button_text, icon and background_color
*/edit_comment_component/save_buttonElementYou can customize button_text, icon and background_color
*/comment_tray_component/*ComponentYou can customize close_icon

Code Examples

// 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)
Custom navigation behavior can be implemented to enhance or modify the interaction flow on the AmityCommentTrayComponent.
class CustomAmityCommentTrayBehavior: AmityCommentTrayBehavior {
    override init() {
        super.init()
    }
}

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

Component Management Strategies

Best Practices

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.