Quick Start Guide

Overview

This quick start guide will help you implement your first social.plus UIKit features in your application. Follow these steps to get from installation to a working social experience.

Customization path at a glance: 1) Theming Basics (global brand tokens) → 2) Component Styling (page/component/element overrides) → 3) Dynamic UI (remote + conditional layouts) → 4) Fork & Extend (full source). Start at the lowest level that solves your need. Links appear inline below.

Prerequisites: Review your platform guide (iOS, Android, Web, React Native, Flutter) and complete authentication setup.

Choose Your First Feature

Select the social feature you want to implement first:

Social Feed

News feed with posts, comments, and reactions

Chat System

Real-time messaging and conversations

User Profiles

User profiles and social connections

Communities

Group discussions and community spaces

Basic Feed Setup

iOS (Swift)
Android (Kotlin)
React
React Native
Flutter

import AmityUIKit

class SocialViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        setupSocialFeed()
    }
    
    private func setupSocialFeed() {
        let socialFeedVC = AmitySocialFeedViewController()
        addChild(socialFeedVC)
        view.addSubview(socialFeedVC.view)
        socialFeedVC.didMove(toParent: self)
        
        // Configure constraints
        socialFeedVC.view.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            socialFeedVC.view.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            socialFeedVC.view.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            socialFeedVC.view.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            socialFeedVC.view.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
    }
}

import com.amity.socialcloud.uikit.AmityUIKit

class SocialActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_social)
        
        setupSocialFeed()
    }
    
    private fun setupSocialFeed() {
        // Launch social feed
        AmityUIKit.openSocialHome(this)
    }
}

// Or use fragments
class SocialFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return AmityUIKit.getSocialFeedFragment(requireContext())
    }
}

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

function SocialFeedPage() {
  return (
    <div className="social-feed-container" style={{ height: '100vh' }}>
      <AmityUiKitSocial />
    </div>
  );
}

export default SocialFeedPage;

import React from 'react';
import { View } from 'react-native';
import { AmityUiKitSocial } from 'amity-react-native-social-ui-kit';

function SocialFeedScreen() {
  return (
    <View style={{ flex: 1 }}>
      <AmityUiKitSocial />
    </View>
  );
}

export default SocialFeedScreen;

import 'package:flutter/material.dart';
import 'package:amity_uikit_beta_service/amity_uikit_beta_service.dart';

class SocialFeedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Social Feed'),
      ),
      body: AmitySocialHomePage(),
    );
  }
}

Need brand colors only? Jump to Theming Basics. Want to tweak a specific feed button/icon? Use Component Styling. Conditional layouts (e.g., hide creation for viewers) → Dynamic UI. Completely new feed UX → Fork & Extend.

Feed Features

Your social feed now includes:

Post Creation

Text posts with rich formatting
Image and video attachments
Poll creation and voting
Location tagging

Engagement

Like and reaction system
Commenting and replies
Share functionality
Real-time updates

Content Management

Report inappropriate content
Delete and edit posts
Privacy controls
Content moderation

Chat System Implementation

Basic Chat Setup

iOS (Swift)
Android (Kotlin)
React
React Native
Flutter

import AmityUIKit

class ChatViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        setupChatInterface()
    }
    
    private func setupChatInterface() {
        let chatHomeVC = AmityChatHomeViewController()
        addChild(chatHomeVC)
        view.addSubview(chatHomeVC.view)
        chatHomeVC.didMove(toParent: self)
        
        // Configure constraints
        chatHomeVC.view.frame = view.bounds
    }
    
    // Open specific chat room
    private func openChatRoom(channelId: String) {
        let chatRoomVC = AmityChatRoomViewController(channelId: channelId)
        navigationController?.pushViewController(chatRoomVC, animated: true)
    }
}

import com.amity.socialcloud.uikit.AmityUIKit

class ChatActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_chat)
        
        setupChatInterface()
    }
    
    private fun setupChatInterface() {
        // Launch chat home
        AmityUIKit.openChatHome(this)
    }
    
    // Open specific chat room
    private fun openChatRoom(channelId: String) {
        AmityUIKit.openChatRoom(this, channelId)
    }
}

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

function ChatPage() {
  return (
    <div className="chat-container" style={{ height: '100vh' }}>
      <AmityUiKitChat />
    </div>
  );
}

// Specific chat room
function ChatRoomPage({ channelId }: { channelId: string }) {
  return (
    <div className="chat-room-container" style={{ height: '100vh' }}>
      <AmityUiKitChatRoom channelId={channelId} />
    </div>
  );
}

import React from 'react';
import { View } from 'react-native';
import { AmityUiKitChat } from 'amity-react-native-social-ui-kit';

function ChatScreen() {
  return (
    <View style={{ flex: 1 }}>
      <AmityUiKitChat />
    </View>
  );
}

import 'package:flutter/material.dart';
import 'package:amity_uikit_beta_service/amity_uikit_beta_service.dart';

class ChatHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat'),
      ),
      body: AmityChatHomePage(),
    );
  }
}

Chat styling escalation: theme tokens first → component styling for input / bubble tweaks → dynamic UI for role-based feature toggles (e.g., reactions off for guests) → fork only for novel messaging paradigms.

Chat Features

Your chat system includes:

Messaging

Real-time text messaging
Image and file sharing
Voice messages
Message reactions and replies

Conversation Management

Create group chats
Add/remove participants
Chat settings and preferences
Message history and search

Advanced Features

Online presence indicators
Message read receipts
Push notifications
Typing indicators

User Profiles Implementation

Basic Profile Setup

iOS (Swift)
Android (Kotlin)
React
React Native
Flutter

// Show current user profile
let userProfileVC = AmityUserProfileViewController(userId: currentUserId)
navigationController?.pushViewController(userProfileVC, animated: true)

// Show another user's profile
let otherUserProfileVC = AmityUserProfileViewController(userId: "other_user_id")
present(otherUserProfileVC, animated: true)

// Open user profile
AmityUIKit.openUserProfile(this, userId = "user_id")

// Open current user profile (settings)
AmityUIKit.openUserSettings(this)

import { AmityUiKitProfile } from '@amityco/ui-kit';

function UserProfilePage({ userId }: { userId: string }) {
  return (
    <div className="profile-container">
      <AmityUiKitProfile userId={userId} />
    </div>
  );
}

import { AmityUiKitProfile } from 'amity-react-native-social-ui-kit';

function UserProfileScreen({ userId }: { userId: string }) {
  return (
    <View style={{ flex: 1 }}>
      <AmityUiKitProfile userId={userId} />
    </View>
  );
}

class UserProfilePage extends StatelessWidget {
  final String userId;
  
  const UserProfilePage({Key? key, required this.userId}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Profile')),
      body: AmityUserProfilePage(userId: userId),
    );
  }
}

Profile adjustments like color/avatar ring styling = Component Styling. Conditional fields by role (e.g., hide email) = Dynamic UI. Rebuilding profile layout entirely = Fork & Extend.

Communities Implementation

Basic Community Setup

iOS (Swift)
Android (Kotlin)
React
React Native
Flutter

// Show community list
let communityListVC = AmityCommunityListViewController()
navigationController?.pushViewController(communityListVC, animated: true)

// Show specific community
let communityVC = AmityCommunityViewController(communityId: "community_id")
navigationController?.pushViewController(communityVC, animated: true)

// Open community list
AmityUIKit.openCommunityList(this)

// Open specific community
AmityUIKit.openCommunity(this, communityId = "community_id")

import { AmityUiKitCommunity } from '@amityco/ui-kit';

function CommunityPage({ communityId }: { communityId: string }) {
  return (
    <div className="community-container">
      <AmityUiKitCommunity communityId={communityId} />
    </div>
  );
}

import { AmityUiKitCommunity } from 'amity-react-native-social-ui-kit';

function CommunityScreen({ communityId }: { communityId: string }) {
  return (
    <View style={{ flex: 1 }}>
      <AmityUiKitCommunity communityId={communityId} />
    </View>
  );
}

class CommunityPage extends StatelessWidget {
  final String communityId;
  
  const CommunityPage({Key? key, required this.communityId}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Community')),
      body: AmityCommunityPage(communityId: communityId),
    );
  }
}

Community visibility/layout differences per user tier? Evaluate Dynamic UI early rather than scattering conditionals in app code.

Testing Your Implementation

Verify Basic Functionality

Authentication

Verify user registration and login
Check that user sessions persist across app restarts
Test with different user accounts

Social Features

Create a test post with text and images
Like and comment on posts
Test real-time updates with multiple users

Chat Features

Send messages between different users
Test group chat creation and management
Verify real-time message delivery

User Interactions

View and edit user profiles
Test follow/unfollow functionality
Verify privacy settings

Test with Multiple Users

Create multiple test user accounts to properly test social interactions like messaging, following, and community participation.

Customization Basics

Quick Theme Changes

Apply basic branding to match your app:

iOS
Android
React

// Configure theme colors
AmityUIKit.configure { config in
    config.primaryColor = UIColor.systemBlue
    config.secondaryColor = UIColor.systemGray
    config.backgroundColor = UIColor.systemBackground
}

<!-- In colors.xml -->
<color name="amity_primary">#1E88E5</color>
<color name="amity_secondary">#757575</color>
<color name="amity_background">#FFFFFF</color>

{
  "global_theme": {
    "light_theme": {
      "primary_color": "#1E88E5",
      "secondary_color": "#757575",
      "background_color": "#FFFFFF"
    }
  }
}

Next Steps

Congratulations! You now have a working social.plus UIKit implementation. Here’s what to explore next:

Advanced Customization

Deep dive into theming, styling, and component customization

Component Reference

Explore all available components and their features

Real-world Examples

See complete implementation examples and best practices

API Integration

Learn how to integrate with social.plus APIs for custom features

Need Help?

Common Issues

Components not rendering: Ensure proper authentication and provider setupStyling conflicts: Check for CSS conflicts and proper theme configurationPerformance issues: Implement proper error handling and loading states

Best Practices

Always handle authentication errors gracefully
Implement proper loading states for better UX
Test with multiple user accounts
Follow platform-specific UI guidelines

Getting Support

Review the relevant platform guide for platform-specific tips
- Visit our community forum
- Review example implementations

Powered by

Getting Started

Customization

Components

Release Notes

Support

Overview

Choose Your First Feature

Social Feed

Chat System

User Profiles

Communities

Basic Feed Setup

Feed Features

Chat System Implementation

Basic Chat Setup

Chat Features

User Profiles Implementation

Basic Profile Setup

Communities Implementation

Basic Community Setup

Testing Your Implementation

Verify Basic Functionality

Test with Multiple Users

Customization Basics

Quick Theme Changes

Next Steps

Advanced Customization

Component Reference

Real-world Examples

API Integration

Need Help?

Powered by

Getting Started

Customization

Components

Release Notes

Support

Documentation Index

​Overview

​Choose Your First Feature

Social Feed

Chat System

User Profiles

Communities

​Social Feed Implementation

​Basic Feed Setup

​Feed Features

​Chat System Implementation

​Basic Chat Setup

​Chat Features

​User Profiles Implementation

​Basic Profile Setup

​Communities Implementation

​Basic Community Setup

​Testing Your Implementation

​Verify Basic Functionality

​Test with Multiple Users

​Customization Basics

​Quick Theme Changes

​Next Steps

Advanced Customization

Component Reference

Real-world Examples

API Integration

​Need Help?

Overview

Choose Your First Feature

Social Feed Implementation

Basic Feed Setup

Feed Features

Chat System Implementation

Basic Chat Setup

Chat Features

User Profiles Implementation

Basic Profile Setup

Communities Implementation

Basic Community Setup

Testing Your Implementation

Verify Basic Functionality

Test with Multiple Users

Customization Basics

Quick Theme Changes

Next Steps

Need Help?