UIKit Component: Community management components are built on top of the social.plus SDK, providing ready-to-use administrative and moderation UI with full data management handled automatically.
Feature Overview
Community Management UIKit components provide comprehensive administrative tools for community oversight, settings management, and content moderation. These components enable moderators and administrators to configure community settings, manage notifications, review pending content, and control permissions—all through ready-to-use interfaces built on top of the social.plus SDK.Key Features
Community Settings
Comprehensive community configuration
- Community profile editing and management
- Member management and role assignment
- Privacy and visibility controls
- Community closure and leave functionality
Notification Management
Fine-grained notification controls
- Community-wide notification settings
- Post, comment, and story notification preferences
- Individual notification type management
- User notification preference controls
Content Moderation
Pending posts and content oversight
- Pending post review and approval
- Community post moderation tools
- Join request management
- Content acceptance and decline workflows
Permission Control
Post and story permission management
- Post creation permission settings
- Story comment permission controls
- Role-based access management
- Community-specific permission configurations
Implementation Guide
- Community Settings
- Notification Settings
- Content Moderation
- Permission Management
Core community settings and configurationCommunity Settings components provide comprehensive administrative controls for community management, including profile editing, member management, and core community configuration options.
Community Setting Page
The Community Settings Page is the gateway for changing various settings within the community and updating its profile information. Users can leave the community or close the entire community from this page.Features
| Feature | Description |
|---|---|
| Editing Profile | Community profile can be updated through this setting |
| Updating Members | Adding new members or removing existing members can be done from this setting. It also has the functionality to change role of users within the community |
| Notification Setting | All notification settings related to a community can be changed here |
| Post Permissions | Post related permissions can be changed here |
| Story Comments | Story comment permissions can be changed here |
| Leave Community | User can leave the community |
| Close Community | Moderator user can close the entire community |
Customization Options
| Config ID | Type | Description |
|---|---|---|
community_setting_page/*/* | Page | You can customize page theme |
community_setting_page/*/edit_profile | Element | You can customize text |
community_setting_page/*/members | Element | You can customize text |
community_setting_page/*/notifications | Element | You can customize text |
community_setting_page/*/post_permission | Element | You can customize text |
community_setting_page/*/story_setting | Element | You can customize text |
community_setting_page/*/leave_community | Element | You can customize text |
community_setting_page/*/close_community | Element | You can customize text |
community_setting_page/*/close_community_description | Element | You can customize text |
Code Examples
let page = AmityCommunitySettingPage(community: community)
let viewController = AmitySwiftUIHostingController(rootView: page)
@Composable
fun composeCommunitySettingPage(community: AmityCommunity) {
AmityCommunitySettingPage(
community = community,
)
}
import React from 'react';
import { AmityUiKitProvider, AmityCommunitySettingPage } from '@amityco/ui-kit';
const SampleAmityCommunitySettingPage = () => {
return (
<AmityUiKitProvider
apiKey="API_KEY"
apiRegion="API_REGION"
userId="userId"
displayName="displayName"
configs={{}}
pageBehavior={{
AmityCommunitySettingPageBehavior: {
goToEditCommunityPage: (context) => {},
goToMembershipPage: (context) => {},
goToPostPermissionPage: (context) => {},
goToStorySettingPage: (context) => {},
goToSocialHomePage: () => {},
},
}}
>
<AmityCommunitySettingPage community={{}} />
</AmityUiKitProvider>
);
};
Widget communitySettingPage(AmityCommunity community) {
return AmityCommunitySettingPage(community: community);
}
Community Story Setting Page
The Community Story Setting Page is the page where users can update the setting whether new comments will be allowed in the story in a community.Features
| Feature | Description |
|---|---|
| Allow Comments | This setting will allow users to create new comments in the community stories |
Customization Options
| Config ID | Type | Description |
|---|---|---|
community_story_setting_page/*/* | Page | You can customize page theme |
Code Examples
let page = AmityCommunityStorySettingPage(community: community)
let viewController = AmitySwiftUIHostingController(rootView: page)
@Composable
fun composeStorySettingPage(community: AmityCommunity) {
AmityCommunityStorySettingPage(
community = community,
)
}
import React from 'react';
import { AmityUiKitProvider, AmityCommunityStorySettingPage } from '@amityco/ui-kit';
const SampleAmityCommunityStorySettingPage = () => {
return (
<AmityUiKitProvider
apiKey="API_KEY"
apiRegion="API_REGION"
userId="userId"
displayName="displayName"
configs={{}}
>
<AmityCommunityStorySettingPage community={{}} />
</AmityUiKitProvider>
);
};
Widget communityStorySettingPage(AmityCommunity community) {
return AmityCommunityStorySettingPage(community: community);
}
Navigation Behavior
The Community Settings Page will navigate to each page related to the setting. You can override these behaviors to navigate to your own pages.class CustomAmityCommunitySettingPageBehavior: AmityCommunitySettingPageBehavior {
override init() {
super.init()
}
override func goToEditCommunityPage(_ context: AmityCommunitySettingPageBehavior.Context) {
// override behavior
}
override func goToMembershipPage(_ context: AmityCommunitySettingPageBehavior.Context) {
// override behavior
}
override func goToNotificationPage(_ context: AmityCommunitySettingPageBehavior.Context) {
// override behavior
}
override func goToPostPermissionPage(_ context: AmityCommunitySettingPageBehavior.Context) {
// override behavior
}
override func goToStorySettingPage(_ context: AmityCommunitySettingPageBehavior.Context) {
// override behavior
}
}
// Call this function to setup custom behaviour class in UIKit
func setCommunitySettingPageBehavior() {
let customBehavior = CustomAmityCommunitySettingPageBehavior()
AmityUIKit4Manager.behaviour.communitySettingPageBehavior = customBehavior
}
class CustomCommunitySettingPageBehavior : AmityCommunitySettingPageBehavior() {
// Override navigation methods as needed
}
// Call this function in AmityUIKit4Manager class to setup custom behaviour class in UIKit
fun setCustomBehavior() {
val customBehaviour = CustomCommunitySettingPageBehavior()
AmityUIKit4Manager.behavior.communitySettingPageBehavior = customBehaviour
}
const SampleCommunitySettingWithBehavior = () => {
return (
<AmityUiKitProvider
pageBehavior={{
AmityCommunitySettingPageBehavior: {
goToEditCommunityPage: (context) => {
// Custom edit community page navigation
},
goToMembershipPage: (context) => {
// Custom membership page navigation
},
goToPostPermissionPage: (context) => {
// Custom post permission page navigation
},
},
}}
>
<AmityCommunitySettingPage community={{}} />
</AmityUiKitProvider>
);
};
Community notification configuration and managementNotification Settings components provide granular control over community notifications, allowing users to customize their notification preferences for posts, comments, stories, and other community activities.
Community Notification Setting Page
The Community Notification Setting Page is the main page to change the notification settings within the community.Features
| Feature | Description |
|---|---|
| Allow Notification | User can turn the community notification on and off |
Customization Options
| Config ID | Type | Description |
|---|---|---|
community_notification_page/*/* | Page | You can customize page theme |
Code Examples
let page = AmityCommunityNotificationSettingPage(community: community)
let viewController = AmitySwiftUIHostingController(rootView: page)
@Composable
fun composeCommunityNotificationSettingPage(community: AmityCommunity) {
AmityCommunityNotificationSettingPage(
community = community,
)
}
import React from 'react';
import { AmityUiKitProvider, AmityCommunityNotificationSettingPage } from '@amityco/ui-kit';
const SampleNotificationSettings = () => {
return (
<AmityUiKitProvider
apiKey="API_KEY"
apiRegion="API_REGION"
userId="userId"
displayName="displayName"
configs={{}}
>
<AmityCommunityNotificationSettingPage community={{}} />
</AmityUiKitProvider>
);
};
Widget communityNotificationSettingPage(AmityCommunity community) {
return AmityCommunityNotificationSettingPage(community: community);
}
Community Posts Notification Page
The Community Posts Notification Page is the page to change post-related notification settings in a community.Features
| Feature | Description |
|---|---|
| React Posts | Update notification setting of post reactions |
| New Posts | Update notification setting of post creation |
Customization Options
| Config ID | Type | Description |
|---|---|---|
community_posts_notification_page/*/* | Page | You can customize page theme |
Code Examples
let page = AmityCommunityPostsNotificationSettingPage(community: community)
let viewController = AmitySwiftUIHostingController(rootView: page)
@Composable
fun composeCommunityPostsNotificationSettingPage(community: AmityCommunity) {
AmityCommunityPostsNotificationSettingPage(
community = community,
)
}
import React from 'react';
import { AmityUiKitProvider, AmityCommunityPostsNotificationSettingPage } from '@amityco/ui-kit';
const SamplePostsNotificationSettings = () => {
return (
<AmityUiKitProvider
apiKey="API_KEY"
apiRegion="API_REGION"
userId="userId"
displayName="displayName"
configs={{}}
>
<AmityCommunityPostsNotificationSettingPage community={{}} />
</AmityUiKitProvider>
);
};
Widget communityPostsNotificationSettingPage(AmityCommunity community) {
return AmityCommunityPostsNotificationSettingPage(community: community);
}
Community Comments Notification Page
The Community Comments Notification Page is the page to change comment-related notification settings in a community.Features
| Feature | Description |
|---|---|
| React Comments | Update notification setting of comment reactions |
| New Comments | Update notification setting of comment creations |
| Replies | Update notification setting of reply comment creations |
Customization Options
| Config ID | Type | Description |
|---|---|---|
community_comments_notification_page/*/* | Page | You can customize page theme |
Code Examples
let page = AmityCommunityCommentsNotificationSettingPage(community: community)
let viewController = AmitySwiftUIHostingController(rootView: page)
@Composable
fun composeCommunityCommentsNotificationSettingPage(community: AmityCommunity) {
AmityCommunityCommentsNotificationSettingPage(
community = community,
)
}
import React from 'react';
import { AmityUiKitProvider, AmityCommunityCommentsNotificationSettingPage } from '@amityco/ui-kit';
const SampleCommentsNotificationSettings = () => {
return (
<AmityUiKitProvider
apiKey="API_KEY"
apiRegion="API_REGION"
userId="userId"
displayName="displayName"
configs={{}}
>
<AmityCommunityCommentsNotificationSettingPage community={{}} />
</AmityUiKitProvider>
);
};
Widget communityCommentsNotificationSettingPage(AmityCommunity community) {
return AmityCommunityCommentsNotificationSettingPage(community: community);
}
Community Stories Notification Page
The Community Stories Notification Page is the page to change story-related notification settings in a community.Features
| Feature | Description |
|---|---|
| New Stories | Update notification setting of story creations |
| Story Reactions | Update notification setting of story reactions |
| Story Comments | Update notification setting of story comment creations |
Customization Options
| Config ID | Type | Description |
|---|---|---|
community_stories_notification_page/*/* | Page | You can customize page theme |
Code Examples
let page = AmityCommunityStoriesNotificationSettingPage(community: community)
let viewController = AmitySwiftUIHostingController(rootView: page)
@Composable
fun composeCommunityStoriesNotificationSettingPage(community: AmityCommunity) {
AmityCommunityStoriesNotificationSettingPage(
community = community,
)
}
import React from 'react';
import { AmityUiKitProvider, AmityCommunityStoriesNotificationSettingPage } from '@amityco/ui-kit';
const SampleStoriesNotificationSettings = () => {
return (
<AmityUiKitProvider
apiKey="API_KEY"
apiRegion="API_REGION"
userId="userId"
displayName="displayName"
configs={{}}
>
<AmityCommunityStoriesNotificationSettingPage community={{}} />
</AmityUiKitProvider>
);
};
Widget communityStoriesNotificationSettingPage(AmityCommunity community) {
return AmityCommunityStoriesNotificationSettingPage(community: community);
}
Navigation Behavior
This page will navigate to dedicated notification setting pages of posts, comments, and stories. You can override the behaviors to navigate to your own pages.class CustomAmityCommunityNotificationSettingPageBehavior: AmityCommunityNotificationSettingPageBehavior {
override init() {
super.init()
}
override func goToPostsNotificationSettingPage(_ context: AmityCommunityNotificationSettingPageBehavior.Context) {
// override behavior
}
override func goToCommentsNotificationSettingPage(_ context: AmityCommunityNotificationSettingPageBehavior.Context) {
// override behavior
}
override func goToStoriesNotificationSettingPage(_ context: AmityCommunityNotificationSettingPageBehavior.Context) {
// override behavior
}
}
// Call this function to setup custom behaviour class in UIKit
func setNotificationSettingPageBehaviour() {
let customBehavior = CustomAmityCommunityNotificationSettingPageBehavior()
AmityUIKit4Manager.behaviour.communityNotificationSettingPageBehavior = customBehavior
}
class CustomCommunityNotificationSettingPageBehavior :
AmityCommunityNotificationSettingPageBehavior() {
// Override navigation methods as needed
}
// Call this function in AmityUIKit4Manager class to setup custom behaviour class in UIKit
fun setCustomBehavior() {
val customBehaviour = CustomCommunityNotificationSettingPageBehavior()
AmityUIKit4Manager.behavior.communityNotificationSettingPageBehavior = customBehaviour
}
const SampleNotificationWithBehavior = () => {
return (
<AmityUiKitProvider
pageBehavior={{
AmityCommunityNotificationSettingPageBehavior: {
goToPostsNotificationSettingPage: (context) => {
// Custom posts notification navigation
},
goToCommentsNotificationSettingPage: (context) => {
// Custom comments notification navigation
},
goToStoriesNotificationSettingPage: (context) => {
// Custom stories notification navigation
},
},
}}
>
<AmityCommunityNotificationSettingPage community={{}} />
</AmityUiKitProvider>
);
};
Pending posts and content moderation toolsContent Moderation components provide comprehensive tools for reviewing and managing pending content, including posts and join requests that require moderator approval.
Pending Request Page
The pending request page is a unified interface that handles two types of moderation: Pending Posts (content moderation) and Join Requests (membership management). This page provides a centralized location for moderators to review both content and membership requests.Content vs Membership: While this page handles both types of pending items, the Join Request functionality is primarily a membership management feature. For detailed join request workflows and implementation, see Community Membership - Join Request Management.
Only moderators can approve or decline posts or join requests in a community. Normal users will only see their own posts that are pending approval from moderators.
Features
| Feature | Type | Description |
|---|---|---|
| Pending Posts | Content Moderation | Moderator can review pending posts to accept or decline. Non-moderators see only their own pending posts |
| Join Requests | Membership Management | Moderator can review requests from users wanting to join the community. See Community Membership for detailed implementation |
Customization Options
| Config ID | Type | Description |
|---|---|---|
pending_request_page/*/* | Page | Customize overall page theme and layout |
pending_request_page/*/back_button | Element | Customize back button appearance |
pending_request_page/*/title | Element | Customize page title text |
pending_request_page/*/pending_posts_section | Component | Customize pending posts section styling |
pending_request_page/*/join_requests_section | Component | Customize join requests section styling |
Code Examples
let page = AmityPendingRequestPage(community: community)
let viewController = AmitySwiftUIHostingController(rootView: page)
@Composable
fun composePendingRequestPage(community: AmityCommunity) {
AmityPendingRequestPage(
community = community,
)
}
import React from 'react';
import { AmityUiKitProvider, AmityPendingRequestPage } from '@amityco/ui-kit';
const ModerationPendingRequestPage = () => {
return (
<AmityUiKitProvider
apiKey="API_KEY"
apiRegion="API_REGION"
userId="userId"
displayName="displayName"
configs={{}}
>
<AmityPendingRequestPage
community={{}}
// This page handles both pending posts (content moderation)
// and join requests (membership management)
onPostAction={(action, post) => {
// Handle post moderation actions
}}
onJoinRequestAction={(action, request) => {
// Handle join request actions
// For detailed implementation, see Community Membership docs
}}
/>
</AmityUiKitProvider>
);
};
Widget pendingRequestPage(AmityCommunity community) {
return AmityPendingRequestPage(community: community);
}
Pending Post Content Component
The pending post content component will display a post needed to be reviewed. Moderator of the community can review the pending post and can accept or decline.Features
| Feature | Description |
|---|---|
| Pending Posts | Moderator can review the pending post to accept or decline. If the user is not a moderator, the list will be the user’s own posts needed to be reviewed |
Customization Options
| Config ID | Type | Description |
|---|---|---|
pending_posts_page/pending_post_content/* | Component | You can customize component theme |
pending_posts_page/pending_post_content/post_accept_button | Element | You can customize text |
pending_posts_page/pending_post_content/post_decline_button | Element | You can customize text |
Code Examples
let component = AmityPendingPostContentComponent(post: post)
let viewController = AmitySwiftUIHostingController(rootView: component)
@Composable
fun composePendingPostComponent(post: AmityPost) {
AmityPendingPostContentComponent(
post = post,
onAcceptAction = {
// Handle accept action
},
onDeclineAction = {
// Handle decline action
}
)
}
import React from 'react';
import { AmityUiKitProvider, AmityPendingPostContentComponent } from '@amityco/ui-kit';
const SampleAmityPendingPostContentComponent = () => {
return (
<AmityUiKitProvider
apiKey="API_KEY"
apiRegion="API_REGION"
userId="userId"
displayName="displayName"
configs={{}}
>
<AmityPendingPostContentComponent
post={{}}
refresh={() => {}}
canReviewCommunityPosts={true}
/>
</AmityUiKitProvider>
);
};
Widget pendingPostContentComponent(AmityPost post) {
return AmityPendingPostContentComponent(post: post);
}
Pending Post List Component
The pending post list component will have the list of posts needed to be reviewed. Moderator of the community can review the pending posts.Features
| Feature | Description |
|---|---|
| Pending Posts | Moderator can review the pending posts to accept or decline. If the user is not a moderator, the list will be the user’s own posts needed to be reviewed |
Customization Options
| Config ID | Type | Description |
|---|---|---|
pending_request_page/pending_post_list/* | Component | You can customize component theme |
pending_request_page/pending_post_list/post_accept_button | Element | You can customize text |
pending_request_page/pending_post_list/post_decline_button | Element | You can customize text |
Code Examples
let page = AmityPendingPostListComponent(community: community)
let viewController = AmitySwiftUIHostingController(rootView: page)
@Composable
fun composePendingPostListComponent(post: AmityPost) {
AmityPendingPostContentComponent(
post = post,
onAcceptAction = {
// Handle accept action
},
onDeclineAction = {
// Handle decline action
}
)
}
import React from 'react';
import { AmityUiKitProvider, AmityPendingPostListComponent } from '@amityco/ui-kit';
const SampleAmityPendingPostListComponent = () => {
return (
<AmityUiKitProvider
apiKey="API_KEY"
apiRegion="API_REGION"
userId="userId"
displayName="displayName"
configs={{}}
>
<AmityPendingPostListComponent
pageId={'*'}
reviewingPosts={[]}
canReviewCommunityPosts={false}
refresh={() => {}}
/>
</AmityUiKitProvider>
);
};
Widget pendingPostListComponent(AmityCommunity community) {
return AmityPendingPostListComponent(
community: community,
pageId: 'pendingRequestPage',
);
}
Join Request Management: Join request approval and management functionality is documented in the Community Membership section, as it focuses on member management workflows rather than content moderation.
Navigation Behavior
Content moderation components integrate with the main community management navigation behavior for seamless moderation workflows.// Moderation components inherit navigation behavior from Community Profile Page
// Use the Community Profile Page behavior customization for navigation control
class CustomAmityCommunityProfilePageBehavior: AmityCommunityProfilePageBehavior {
override func goToPendingPostPage(context: AmityCommunityProfilePageBehavior.Context) {
// Custom pending post page navigation
}
}
// Moderation components work within the Community Profile Page context
// Navigation behavior is handled through the Community Profile Page behavior
class AmityCustomCommunityProfilePageBehavior : AmityCommunityProfilePageBehavior() {
override fun goToPendingPostPage(context: Context) {
// Custom pending post page navigation
}
}
// Moderation components integrate with Community Profile Page navigation
const SampleModerationWithNavigation = () => {
return (
<AmityUiKitProvider
pageBehavior={{
AmityCommunityProfilePageBehavior: {
goToPendingPostPage: (context) => {
// Custom navigation for pending posts
},
},
}}
>
<AmityPendingRequestPage community={{}} />
</AmityUiKitProvider>
);
};
Post and content permission controlsPermission Management components provide administrative controls for managing community permissions, including post creation permissions and content-related access controls.
Community Post Permissions Page
The Community Post Permissions Page allows administrators to configure who can create posts and manage post-related permissions within the community.Features
| Feature | Description |
|---|---|
| Post Creation Permissions | Configure which community members can create posts |
| Content Access Control | Manage permissions for different types of content creation |
| Role-Based Permissions | Set permissions based on user roles within the community |
Customization Options
| Config ID | Type | Description |
|---|---|---|
community_post_permission_page/*/* | Page | You can customize page theme |
community_post_permission_page/*/permission_settings | Element | You can customize permission setting elements |
Code Examples
let page = AmityCommunityPostPermissionPage(community: community)
let viewController = AmitySwiftUIHostingController(rootView: page)
@Composable
fun composeCommunityPostPermissionPage(community: AmityCommunity) {
AmityCommunityPostPermissionPage(
community = community,
)
}
import React from 'react';
import { AmityUiKitProvider, AmityCommunityPostPermissionPage } from '@amityco/ui-kit';
const SamplePostPermissionPage = () => {
return (
<AmityUiKitProvider
apiKey="API_KEY"
apiRegion="API_REGION"
userId="userId"
displayName="displayName"
configs={{}}
>
<AmityCommunityPostPermissionPage community={{}} />
</AmityUiKitProvider>
);
};
Widget communityPostPermissionPage(AmityCommunity community) {
return AmityCommunityPostPermissionPage(community: community);
}
Navigation Behavior
Permission management components integrate with the community settings navigation flow for seamless administrative control.// Permission management is typically accessed through Community Settings Page
class CustomAmityCommunitySettingPageBehavior: AmityCommunitySettingPageBehavior {
override func goToPostPermissionPage(_ context: AmityCommunitySettingPageBehavior.Context) {
// Custom post permission page navigation
}
}
// Call this function to setup custom behaviour class in UIKit
func setCommunitySettingPageBehavior() {
let customBehavior = CustomAmityCommunitySettingPageBehavior()
AmityUIKit4Manager.behaviour.communitySettingPageBehavior = customBehavior
}
// Permission management navigation through Community Settings
class CustomCommunitySettingPageBehavior : AmityCommunitySettingPageBehavior() {
override fun goToPostPermissionPage(context: Context) {
// Custom post permission page navigation
}
}
fun setCustomBehavior() {
val customBehaviour = CustomCommunitySettingPageBehavior()
AmityUIKit4Manager.behavior.communitySettingPageBehavior = customBehaviour
}
const SamplePermissionWithNavigation = () => {
return (
<AmityUiKitProvider
pageBehavior={{
AmityCommunitySettingPageBehavior: {
goToPostPermissionPage: (context) => {
// Custom post permission navigation
},
},
}}
>
<AmityCommunityPostPermissionPage community={{}} />
</AmityUiKitProvider>
);
};
Related Components
Communities
Core Community Features
Community setup, profiles, and content feeds
Community Membership
Member Management
Member administration, invitations, and join requests
Content Moderation
General Moderation
Platform-wide content moderation tools
Posts & Media
Post Components
Post creation and management features
Users & Profiles
User Management
User profiles and administrative controls
Social Feeds
Feed Components
Social feed display and management
Implementation Strategy: Start with the AmityCommunitySettingPage as the central administrative hub, then integrate specialized pages for notifications, content moderation, and permissions based on your community’s needs. Use AmityPendingRequestPage primarily for pending post moderation workflows, and leverage the Community Membership components for join request management. Configure notification settings to match your engagement strategy and implement custom navigation behaviors early to ensure smooth administrative workflows between different management interfaces.