UIKit Component: User components are built on top of the social.plus SDK, providing ready-to-use user profile and relationship management UI with full data management handled automatically.

Feature Overview

The User feature in social.plus UIKit v4 provides a comprehensive suite of components designed to manage user profiles, relationships, and interactions within your application. It encompasses functionalities ranging from profile display and editing to managing blocked users and follow requests, ensuring a seamless and engaging user experience.

Key Features

User Profiles & Display

Comprehensive user profile management
  • User profile page with avatar, display name, and bio
  • User feed components (general, image, video feeds)
  • User profile header with relationship controls
  • Post creation and interaction capabilities

Profile Management

Profile editing and customization
  • Edit user profile details and avatar
  • Update display name and bio information
  • Profile personalization and management
  • Privacy settings and controls

Social Relationships

Follow system and relationship management
  • Follow/unfollow user interactions
  • Followers and following lists management
  • Pending follow request handling
  • User blocking and unblocking functionality

Privacy & Safety

User safety and privacy controls
  • Blocked users management
  • Follow request approval system
  • User reporting and safety features
  • Privacy-based content access control

Implementation Guide

User profile pages and feed components for displaying user information and contentUser Profile components provide comprehensive tools for displaying user information, managing user feeds, and handling user interactions within the social platform.

User Profile Page

The user profile page displays user information, follow relationships, following and followers count, manages blocked users, enables profile editing, handles follow requests, shows created post feeds, and provides post creation actions.

Features

FeatureDescription
User InformationDisplay user name, description, following and follower count
Follow RequestUser can accept or decline follow request from other users
User FeedDisplay post, image and video feed posts created by the user
Post CreationAllow user to create a post on own timeline
Other User InformationUser can view other user profile and can follow/unfollow/block that user

Required Properties

PropertyTypeDescription
userIdStringThe user ID for the profile to display

Customization Options

Config IDTypeDescription
user_profile_page/*/*PageCustomize page theme
user_profile_page/*/back_buttonElementCustomize back button image
user_profile_page/*/menu_buttonElementCustomize menu button image
user_profile_page/*/user_feed_tab_buttonElementCustomize user feed tab image
user_profile_page/*/user_image_feed_tab_buttonElementCustomize image feed tab image
user_profile_page/*/user_video_feed_tab_buttonElementCustomize video feed tab image

Code Examples

let page = AmityUserProfilePage(userId: "user-id")
let viewController = AmitySwiftUIHostingController(rootView: page)
navigationController?.pushViewController(viewController, animated: true)

User Profile Header Component

The User Profile Header component displays user information, follow relationship, following and followers count, and handles follow request acceptance or decline.

Features

FeatureDescription
User InformationDisplay user name, description, following and follower count
Follow RequestUser can accept or decline follow request from other users

Required Properties

PropertyTypeDescription
userAmityUserThe user object for the profile header

Customization Options

Config IDTypeDescription
user_profile_page/user_profile_header/*ComponentCustomize component theme
user_profile_page/user_profile_header/follow_user_buttonElementCustomize follow button text and image
user_profile_page/user_profile_header/following_user_buttonElementCustomize following button text and image
user_profile_page/user_profile_header/unblock_user_buttonElementCustomize unblock button text and image
user_profile_page/user_profile_header/user_followingElementCustomize following count text
user_profile_page/user_profile_header/user_followerElementCustomize follower count text

Code Examples

let component = AmityUserProfileHeaderComponent(user: user)
let viewController = AmitySwiftUIHostingController(rootView: component)

User Feed Components

User feed components display different types of content created by users, including general posts, images, and videos.

User Feed Component

The User Feed Component displays a list of posts created by the user with interaction capabilities.Features:
  • Display a list of posts created by user
  • User can perform creating comment and adding reaction to post
Customization Options:
Config IDTypeDescription
user_profile_page/user_feed/*ComponentCustomize component theme
user_profile_page/user_feed/empty_user_feedElementCustomize empty state text and image
user_profile_page/user_feed/private_user_feedElementCustomize private feed text and image
user_profile_page/user_feed/blocked_user_feedElementCustomize blocked user feed text and image

User Image Feed Component

The User Image Feed Component displays a list of images from posts created by the user.Customization Options:
Config IDTypeDescription
user_profile_page/user_image_feed/*ComponentCustomize component theme
user_profile_page/user_image_feed/empty_user_image_feedElementCustomize empty state text and image
user_profile_page/user_image_feed/private_user_image_feedElementCustomize private feed text and image

User Video Feed Component

The User Video Feed Component displays a list of videos from posts created by the user.Customization Options:
Config IDTypeDescription
user_profile_page/user_video_feed/*ComponentCustomize component theme
user_profile_page/user_video_feed/empty_user_video_feedElementCustomize empty state text and image
user_profile_page/user_video_feed/private_user_video_feedElementCustomize private feed text and image

Code Examples

// User Feed Component
let userFeed = AmityUserFeedComponent(userId: "user-id")

// User Image Feed Component
let imageFeed = AmityUserImageFeedComponent(userId: "user-id")

// User Video Feed Component
let videoFeed = AmityUserVideoFeedComponent(userId: "user-id")

let viewController = AmitySwiftUIHostingController(rootView: userFeed)
// User Profile Page Navigation
class CustomUserProfilePageBehavior: AmityUserProfilePageBehavior {
    override init() {
        super.init()
    }
    
    override func goToEditUserPage(context: AmityUserProfilePageBehavior.Context) {
        // Navigate to edit profile page
    }
   
    override func goToBlockedUsersPage(context: AmityUserProfilePageBehavior.Context) {
        // Navigate to blocked users page
    }
    
    override func goToPostComposerPage(context: AmityUserProfilePageBehavior.Context) {
        // Navigate to post composer
    }
}

// User Profile Header Navigation
class CustomUserProfileHeaderComponentBehavior: AmityUserProfileHeaderComponentBehavior {
    override func goToUserRelationshipPage(context: AmityUserProfileHeaderComponentBehavior.Context) {
        // Navigate to relationship page
    }
    
    override func goToPendingFollowRequestPage(context: AmityUserProfileHeaderComponentBehavior.Context) {
        // Navigate to pending follow requests
    }
}
Implementation Strategy: Start with the User Profile Page as your central user experience hub, then implement the Edit Profile functionality for user personalization. Add social relationship features (follow/unfollow, blocking) based on your application’s social interaction requirements. Consider implementing follow request workflows for private accounts and ensure smooth navigation between user profiles, relationship management, and safety features. Focus on providing clear feedback for all social actions and maintain consistent user experience across profile viewing, editing, and relationship management workflows.