Comment Tray Component

This component provide viewing comment, creating and editing, adding reaction.

The Comment Tray Component in Social Plus UIKit 4.0 facilitates a dynamic interaction layer for users to engage with stories or posts through comments and reactions. This customizable component is designed to foster community engagement and conversation directly within the content viewing experience.

Features

View, create or edit comments	User can view, create or edit text comments or reply comments, can also add reaction to comment.

Customization

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

For more details on customization, please refer to the Customization page.

Usage

iOS

For iOS applications, integrating the Comment Tray Component involves initializing it with a reference ID (such as a story or post ID) and specifying the reference type. Here's a simple example:

This snippet sets up the comment tray for a specific story, ready to be incorporated into the app’s UI through a SwiftUI hosting controller.

Android

On Android, the Comment Tray Component is utilized within a Composable function, offering customization options such as enabling or disabling interactions and comments:

This code demonstrates how to integrate the component within a Compose UI, providing flexibility in configuring interaction capabilities.

Web (React)

import React from 'react';
import { AmityStoryTabComponent } from '@amityco/ui-kit';

const CommunityStoriesTab = ({ communityId }) => {
  return (
    <AmityStoryTabComponent type={{ communityFeed: communityId }} />
  );
};

export default CommunityStoriesTab;

In this example, we define a functional component called CommunityStoriesTab that takes a communityId prop. Inside the component, we render the AmityStoryTabComponent and pass the communityId as the value for the communityFeed property within the type prop.