> ## Documentation Index
> Fetch the complete documentation index at: https://learn.social.plus/llms.txt
> Use this file to discover all available pages before exploring further.
# Community Membership
> Member management, invitations, join requests, and membership administration
**UIKit Component**: Community membership components are built on top of the social.plus SDK, providing ready-to-use member management UI with full data management handled automatically.
## Feature Overview
Community Membership UIKit components provide comprehensive tools for managing community members, handling join requests, processing invitations, and tracking membership analytics. These components enable community administrators to effectively manage their member base through intuitive interfaces that handle invitations, approval workflows, member roles, and membership insights—all built on top of the social.plus SDK.
### Key Features
**Comprehensive member management**
* Member list display and management
* Role assignment and permission control
* Member profile access and interactions
* Member removal and ban functionality
**Member invitation workflows**
* Send invitations to new members
* Track invitation status and responses
* Manage pending invitation lists
* Configure invitation permissions and limits
**Join request handling and approval**
* Review and approve join requests
* Decline inappropriate requests
* Automated approval workflow options
* Join request notification management
**Membership insights and tracking**
* Member growth and activity metrics
* Invitation success rate tracking
* Join request approval statistics
* Member engagement analytics
## Implementation Guide
**Core member management and administration**
Member Administration components provide comprehensive tools for managing community members, including member lists, role assignments, and member profile management. These components enable administrators to effectively oversee their community membership.
### Member Management Page
The member management page provides a comprehensive view of all community members with tools for administration and role management.
#### Features
| Feature | Description |
| ------------------- | -------------------------------------------------- |
| Member List Display | View all community members with profiles and roles |
| Role Assignment | Assign and modify member roles and permissions |
| Member Search | Search and filter members by various criteria |
| Member Actions | Remove, ban, or promote members |
#### Required Properties
| Property | Type | Description |
| ------------- | ---------------- | ------------------------------------------ |
| `community` | `AmityCommunity` | The community object for member management |
| `currentUser` | `AmityUser` | The current user for permission validation |
#### Customization Options
| Config ID | Type | Description |
| ------------------------------------------- | --------- | --------------------------------------- |
| `member_management_page/*/*` | Page | Customize overall page theme and layout |
| `member_management_page/*/member_list_item` | Component | Member list item styling |
| `member_management_page/*/role_badge` | Element | Member role badge appearance |
| `member_management_page/*/action_buttons` | Element | Member action button styling |
| `member_management_page/*/search_bar` | Element | Member search interface styling |
| `member_management_page/*/member_avatar` | Element | Member profile picture display |
#### Code Examples
```swift iOS theme={null}
let memberPage = AmityMemberManagementPage(community: community)
let viewController = AmitySwiftUIHostingController(rootView: memberPage)
navigationController?.pushViewController(viewController, animated: true)
```
```kotlin Android theme={null}
@Composable
fun composeMemberManagementPage(community: AmityCommunity) {
AmityMemberManagementPage(
community = community,
onMemberSelected = { member ->
// Handle member profile navigation
},
onMemberAction = { action, member ->
// Handle member actions (promote, remove, etc.)
}
)
}
```
```typescript React theme={null}
import React from 'react';
import { AmityUiKitProvider, AmityMemberManagementPage } from '@amityco/ui-kit';
const MemberManagement = ({ community }) => {
return (
{
// Handle member actions
}}
/>
);
};
```
```dart Flutter theme={null}
Widget memberManagementPage(AmityCommunity community) {
return AmityCommunityMembershipPage(
community: community,
);
}
```
### Navigation Behavior
```swift iOS theme={null}
// Navigate to member profile
func navigateToMemberProfile(member: AmityUser) {
let profilePage = AmityUserProfilePage(user: member)
let viewController = AmitySwiftUIHostingController(rootView: profilePage)
navigationController?.pushViewController(viewController, animated: true)
}
// Handle member actions
func handleMemberAction(action: MemberAction, member: AmityUser) {
switch action {
case .promote:
// Promote member to moderator
break
case .remove:
// Remove member from community
break
case .ban:
// Ban member from community
break
}
}
```
```kotlin Android theme={null}
// Navigate to member profile
fun navigateToMemberProfile(member: AmityUser) {
val profilePage = AmityUserProfilePage(user = member)
// Navigate to profile page
}
// Handle member actions
fun handleMemberAction(action: MemberAction, member: AmityUser) {
when (action) {
MemberAction.PROMOTE -> {
// Promote member to moderator
}
MemberAction.REMOVE -> {
// Remove member from community
}
MemberAction.BAN -> {
// Ban member from community
}
}
}
```
```typescript React theme={null}
// Handle member navigation
const handleMemberNavigation = (member) => {
// Navigate to member profile
navigate(`/profile/${member.userId}`);
};
// Handle member actions
const handleMemberAction = (action, member) => {
switch (action) {
case 'promote':
// Promote member to moderator
break;
case 'remove':
// Remove member from community
break;
case 'ban':
// Ban member from community
break;
}
};
```
```dart Flutter theme={null}
// Navigate to member profile
void navigateToMemberProfile(AmityUser member) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AmityUserProfilePage(userId: member.userId!),
),
);
}
// Handle member actions
void handleMemberAction(MemberAction action, AmityUser member) {
switch (action) {
case MemberAction.promote:
// Promote member to moderator
break;
case MemberAction.remove:
// Remove member from community
break;
case MemberAction.ban:
// Ban member from community
break;
}
}
```
**Member invitation workflows and invitation tracking**
Invitation Management components provide tools for inviting new members to communities, tracking invitation status, and managing invitation permissions.
### Community Invitation Page
The community invitation page enables administrators to send invitations to new members and track invitation responses.
#### Features
| Feature | Description |
| ----------------- | ---------------------------------------------- |
| Send Invitations | Invite users by username, email, or user ID |
| Invitation Status | Track sent, pending, and accepted invitations |
| Bulk Invitations | Send multiple invitations simultaneously |
| Invitation Limits | Respect community invitation limits and quotas |
#### Required Properties
| Property | Type | Description |
| ----------------- | ---------------- | ---------------------------------------------- |
| `community` | `AmityCommunity` | The community object for invitation management |
| `invitationLimit` | `Int` | Maximum number of invitations allowed |
#### Customization Options
| Config ID | Type | Description |
| -------------------------------------------- | --------- | ----------------------------------- |
| `invitation_page/*/*` | Page | Invitation page theme and layout |
| `invitation_page/*/send_button` | Element | Invitation send button styling |
| `invitation_page/*/user_search` | Component | User search interface customization |
| `invitation_page/*/invitation_status` | Component | Invitation status display styling |
| `invitation_page/*/bulk_invite_section` | Component | Bulk invitation interface styling |
| `invitation_page/*/invitation_limit_display` | Element | Invitation quota display styling |
#### Code Examples
```swift iOS theme={null}
let invitationPage = AmityCommunityInvitationPage(community: community)
let viewController = AmitySwiftUIHostingController(rootView: invitationPage)
navigationController?.pushViewController(viewController, animated: true)
```
```kotlin Android theme={null}
@Composable
fun composeInvitationPage(community: AmityCommunity) {
AmityCommunityInvitationPage(
community = community,
onInvitationSent = { users ->
// Handle successful invitations
},
onInvitationError = { error ->
// Handle invitation errors
}
)
}
```
```typescript React theme={null}
import React from 'react';
import { AmityUiKitProvider, AmityCommunityInvitationPage } from '@amityco/ui-kit';
const InvitationManagement = ({ community }) => {
return (
{
// Handle successful invitations
}}
onInvitationError={(error) => {
// Handle invitation errors
}}
/>
);
};
```
```dart Flutter theme={null}
// The Flutter UIKit exposes member addition through AmityCommunityAddMemberPage.
Widget addMemberPage(List selectedUsers) {
return AmityCommunityAddMemberPage(
users: selectedUsers,
onAddedAction: (users) {
// Handle the selected users to add to the community
},
);
}
```
### Navigation Behavior
```swift iOS theme={null}
// Handle invitation success
func handleInvitationSuccess(users: [AmityUser]) {
// Show success message
let alert = UIAlertController(
title: "Invitations Sent",
message: "Successfully invited \(users.count) users",
preferredStyle: .alert
)
alert.addAction(UIAlertAction(title: "OK", style: .default))
present(alert, animated: true)
}
// Navigate to invitation status
func showInvitationStatus() {
let statusPage = AmityInvitationStatusPage(community: community)
let viewController = AmitySwiftUIHostingController(rootView: statusPage)
navigationController?.pushViewController(viewController, animated: true)
}
```
```kotlin Android theme={null}
// Handle invitation success
fun handleInvitationSuccess(users: List) {
// Show success message
Toast.makeText(
context,
"Successfully invited ${users.size} users",
Toast.LENGTH_SHORT
).show()
}
// Navigate to invitation status
fun showInvitationStatus() {
val statusPage = AmityInvitationStatusPage(community = community)
// Navigate to status page
}
```
```typescript React theme={null}
// Handle invitation workflows
const handleInvitationWorkflow = {
onSuccess: (users) => {
// Show success notification
showNotification(`Successfully invited ${users.length} users`);
},
onError: (error) => {
// Handle invitation error
showError(`Failed to send invitations: ${error.message}`);
},
showStatus: () => {
// Navigate to invitation status page
navigate('/community/invitations/status');
}
};
```
```dart Flutter theme={null}
// Handle invitation success
void handleInvitationSuccess(List users) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Successfully invited ${users.length} users'),
),
);
}
// Navigate to the community membership page to review members
void showMembership(AmityCommunity community) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AmityCommunityMembershipPage(community: community),
),
);
}
```
**Join request handling, approval, and rejection workflows**
Join Request Management components provide tools for reviewing and processing requests from users who want to join private or restricted communities.
### Pending Request Page (Join Requests)
The pending request page handles join requests from users wanting to join the community. This is part of a larger component that also handles pending posts (documented in [Community Management](/uikit/components/social/community-management)).
The Pending Request Page contains both **Join Requests** (membership-related) and **Pending Posts** (moderation-related). This section focuses on the join request functionality. For pending post moderation, see [Community Management](/uikit/components/social/community-management).
#### Features
| Feature | Description |
| ------------------- | ----------------------------------------------- |
| Join Request List | View all pending requests to join the community |
| Request Approval | Approve legitimate join requests |
| Request Rejection | Decline inappropriate or spam requests |
| User Profile Access | View requesting user profiles for review |
#### Required Properties
| Property | Type | Description |
| ---------------------- | ---------------- | ------------------------------------------------ |
| `community` | `AmityCommunity` | The community object for join request management |
| `moderatorPermissions` | `Boolean` | Whether current user has moderator permissions |
#### 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/*/join_requests_section` | Component | Customize join requests section styling |
| `pending_request_page/*/request_list` | Component | Join request list display styling |
#### Code Examples
```swift iOS theme={null}
// Focus on join request functionality of pending request page
let page = AmityPendingRequestPage(community: community)
let viewController = AmitySwiftUIHostingController(rootView: page)
navigationController?.pushViewController(viewController, animated: true)
```
```kotlin Android theme={null}
@Composable
fun composeJoinRequestManagement(community: AmityCommunity) {
AmityPendingRequestPage(
community = community,
onJoinRequestAction = { action, request ->
// Handle join request approval/rejection
when (action) {
is JoinRequestAction.Approve -> {
// Approve join request
}
is JoinRequestAction.Reject -> {
// Reject join request
}
}
}
)
}
```
```typescript React theme={null}
import React from 'react';
import { AmityUiKitProvider, AmityPendingRequestPage } from '@amityco/ui-kit';
const JoinRequestManagement = ({ community }) => {
return (
{
// Handle join request actions
if (action === 'approve') {
// Approve join request
} else if (action === 'reject') {
// Reject join request
}
}}
/>
);
};
```
```dart Flutter theme={null}
Widget joinRequestManagement(AmityCommunity community) {
return AmityPendingRequestPage(
community: community,
);
}
```
### Join Request Content Component
The join request content component displays individual join requests with user information and approval controls.
#### Features
| Feature | Description |
| ---------------- | ------------------------------------------- |
| User Information | Display requesting user profile and details |
| Request Actions | Approve or decline join requests |
| Request History | View previous requests from the same user |
| Bulk Actions | Process multiple requests simultaneously |
#### Customization Options
| Config ID | Type | Description |
| --------------------------------------------------------------- | --------- | ----------------------------- |
| `pending_request_page/join_request_content/*` | Component | Customize component theme |
| `pending_request_page/join_request_content/join_accept_button` | Element | Customize accept button text |
| `pending_request_page/join_request_content/join_decline_button` | Element | Customize decline button text |
#### Code Examples
```swift iOS theme={null}
let component = AmityJoinRequestContentComponent(community: community)
let viewController = AmitySwiftUIHostingController(rootView: component)
```
```kotlin Android theme={null}
@Composable
fun composeJoinRequestComponent(joinRequest: AmityJoinRequest) {
AmityJoinRequestContentComponent(
joinRequest = joinRequest,
onAcceptAction = {
// Handle accept action
},
onDeclineAction = {
// Handle decline action
}
)
}
```
```typescript React theme={null}
import React from 'react';
import { AmityUiKitProvider, AmityJoinRequestContentComponent } from '@amityco/ui-kit';
const JoinRequestComponent = () => {
return (
);
};
```
```dart Flutter theme={null}
// The Flutter UIKit does not expose a standalone join request content widget.
// Join request content is rendered inside AmityPendingRequestPage.
Widget joinRequestComponent(AmityCommunity community) {
return AmityPendingRequestPage(
community: community,
);
}
```
### Navigation Behavior
```swift iOS theme={null}
// Handle join request approval
func approveJoinRequest(request: AmityJoinRequest) {
// Approve the request
request.approve { [weak self] result in
DispatchQueue.main.async {
switch result {
case .success:
// Show success message
self?.showSuccessAlert("Join request approved")
case .failure(let error):
// Handle error
self?.showErrorAlert("Failed to approve request: \(error.localizedDescription)")
}
}
}
}
// Navigate to user profile
func showRequestingUserProfile(user: AmityUser) {
let profilePage = AmityUserProfilePage(user: user)
let viewController = AmitySwiftUIHostingController(rootView: profilePage)
navigationController?.pushViewController(viewController, animated: true)
}
```
```kotlin Android theme={null}
// Handle join request actions
fun handleJoinRequestAction(action: JoinRequestAction, request: AmityJoinRequest) {
when (action) {
is JoinRequestAction.Approve -> {
// Approve join request
request.approve()
.subscribe(
{
// Show success message
showSuccessToast("Join request approved")
},
{ error ->
// Handle error
showErrorToast("Failed to approve request: ${error.message}")
}
)
}
is JoinRequestAction.Reject -> {
// Reject join request
request.reject()
}
}
}
// Navigate to user profile
fun showRequestingUserProfile(user: AmityUser) {
val profilePage = AmityUserProfilePage(user = user)
// Navigate to profile page
}
```
```typescript React theme={null}
// Handle join request workflows
const handleJoinRequestWorkflow = {
approve: async (request) => {
try {
await request.approve();
showNotification('Join request approved successfully');
// Refresh the request list
refreshRequests();
} catch (error) {
showError(`Failed to approve request: ${error.message}`);
}
},
reject: async (request) => {
try {
await request.reject();
showNotification('Join request rejected');
refreshRequests();
} catch (error) {
showError(`Failed to reject request: ${error.message}`);
}
},
viewProfile: (user) => {
// Navigate to user profile
navigate(`/profile/${user.userId}`);
}
};
```
```dart Flutter theme={null}
// Handle join request approval
Future approveJoinRequest(AmityJoinRequest request) async {
try {
await request.approve();
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Join request approved')),
);
// Refresh the request list
refreshRequests();
} catch (error) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Failed to approve request: $error')),
);
}
}
// Navigate to user profile
void showRequestingUserProfile(AmityUser user) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AmityUserProfilePage(userId: user.userId!),
),
);
}
```
## Related Components
**Core Community Features**
Community setup, profiles, and content feeds
**Settings & Administration**
Community settings, permissions, and moderation tools
**User Management**
User profiles and social interactions
**Moderation Tools**
Content and user moderation features
**Feed Components**
Community content display and interaction
**Post Components**
Community post creation and management
**Implementation Strategy**: Start with the Member Management Page as your central hub for community administration, then implement invitation workflows to grow your community organically. Use the Pending Request Page to handle join requests efficiently, and configure approval processes based on your community's privacy and moderation requirements. Consider implementing automated invitation tracking and join request notifications to streamline membership management workflows. Focus on providing clear feedback for all membership actions and ensure smooth navigation between member profiles, invitation status, and approval interfaces.