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
Customization
*/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
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.
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.
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.
Last updated
Was this helpful?