Installation

Choose your platform and installation method to get started with social.plus UIKit. We support both package installation for quick setup and GitHub forking for complete customization.

Two Installation Approaches: Use package installation for quick integration, or fork from GitHub for complete control and customization.

Installation Methods

Package Installation

Quick Setup (Recommended)

Managed dependencies
Easy updates
Minimal configuration
Perfect for most use cases

GitHub Fork

Complete Customization

Full source code access
Custom modifications
Advanced integrations
Maximum flexibility

Package Installation

Install UIKit through package managers for quick integration:

iOS
Android
Web (React)
React Native

Prerequisites

iOS 15.0 or later
Xcode 26.0 or later
Swift 6.0 or later

Installation Steps

Swift Package Manager (Recommended)

Add Package Dependency in Xcode:

Open your project in Xcode
Go to File → Add Package Dependencies
Enter the repository URL:

https://github.com/AmityCo/Amity-Social-Cloud-UIKit-iOS-SwiftPM

Select dependency rule (Up to Next Major for stable releases)

**Please specify the required version of the UIKit using Exact Version Dependency Rule as shown in the image below.For Example: Exact Version 4.6.0

Choose the latest version and add to your target

Import in your code:

import AmityUIKit

Initialize UIKit

// In your AppDelegate or SceneDelegate
import AmityUIKit

AmityUIKitManager.setup(
    apiKey: "YOUR_API_KEY",
    endpoint: .US  // .US, .EU, or .SG
)

// Register user and present social home
AmityUIKitManager.registerDevice(
    withUserId: "user123",
    displayName: "John Doe"
) { success, error in
    if success {
        AmityUIKitManager.presentSocialHome()
    }
}

Required Permissions (Info.plist)

<key>NSCameraUsageDescription</key>
<string>Access camera to take photos and videos</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Access photo library to select images</string>
<key>NSMicrophoneUsageDescription</key>
<string>Access microphone for video recording</string>

Prerequisites

Android 5.0 (API Level 21) or higher
Kotlin support enabled
Data binding enabled

Gradle Configuration

Project-level build.gradle:

allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url 'https://jitpack.io' }
    }
}

App-level build.gradle:

android {
    compileSdk 34

    defaultConfig {
        minSdk 21
        targetSdk 34
    }

    buildFeatures {
        dataBinding = true
    }

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = JavaVersion.VERSION_1_8
    }

    packagingOptions {
        exclude 'META-INF/INDEX.LIST'
        exclude 'META-INF/io.netty.versions.properties'
    }
}

dependencies {
    implementation 'com.github.AmityCo.Amity-Social-Cloud-UIKit-Android:amity-uikit:x.y.z'
}

Initialize UIKit

// In your Application class
class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()

    AmityUIKit4Manager.setup(
            apiKey = "YOUR_API_KEY",
            endpoint =  AmityEndpoint.EU
        )
    }
}

Prerequisites

React 18 or later (hooks support required)
Node.js 16 or later
TypeScript support (recommended)
Modern browser with ES6+ support

pnpm i @amityco/ui-kit

Setup AmityUIKitProvider

import React from 'react';
import { AmityUIKitProvider } from '@amityco/ui-kit-react';
import '@amityco/ui-kit-react/dist/index.css';

function App() {
  return (
    <AmityUIKitProvider
      apiKey="YOUR_API_KEY"
      apiRegion="us"  // "us", "eu", or "sg"
      userId="user123"
      displayName="John Doe"
    >
      <YourAppComponents />
    </AmityUIKitProvider>
  );
}

export default App;

Our UIKit includes user interfaces to enable fast integration of standard Social features into new or existing applications. The React Native UIKit supports integration with React Native CLI, providing you with a flexible experience to seamlessly integrate social features into your existing React Native application.

React Native UIKit v4 is generally available and published on npm as @amityco/react-native-social-uikit.

Important: If you’d like to use React Native Expo, please visit the Expo repository instead.

Minimum Requirements

Requirement	Version
React	19
React Native	0.82.1
Node.js	≥ 20
Yarn	≥ 1.22.15
JDK	≥ 17.0.10
Kotlin	2.1.20
iOS deployment target	15.1
Android	`minSdkVersion` 24, `compileSdkVersion` 36, `targetSdkVersion` 36, `buildToolsVersion` 36.0.0

React Native CLI is required (not Expo).

Install the UIKit

# Install the UIKit
yarn add @amityco/react-native-social-uikit

# Install required peer dependencies
yarn add @amityco/ts-sdk-react-native@^7.28.0 react-native-fs@2.20.0 react-native-reanimated@~4.3.4 react-native-worklets@~0.8.3 @livekit/react-native @livekit/react-native-webrtc livekit-client @react-native-firebase/app @react-native-firebase/messaging @react-native-async-storage/async-storage @react-native-camera-roll/camera-roll @react-native-clipboard/clipboard @react-native-community/datetimepicker "@react-native-community/netinfo@>=11.5.0" @react-navigation/native @react-navigation/native-stack @react-navigation/stack react-native-compressor react-native-gesture-handler react-native-get-random-values react-native-haptic-feedback react-native-image-picker react-native-linear-gradient react-native-safe-area-context react-native-screens react-native-svg react-native-video react-native-video-controls react-native-vision-camera @babel/plugin-transform-export-namespace-from

# Build-time only
yarn add -D @react-native/babel-preset @react-native/metro-config

react-native-fs is pinned to 2.20.0, and react-native-reanimated (~4.3.4) and react-native-worklets (~0.8.3) are pinned to a patch range. Installing versions outside these is unsupported. @amityco/ts-sdk-react-native must be 7.28.0 or later.

Upgrading from 4.2.x: v4.3.0 adds react-native-reanimated, react-native-worklets, and @react-native-camera-roll/camera-roll as peer dependencies, and raises @react-native-community/netinfo to >=11.5.0. The react-native-netinfo package is no longer required — remove it if your app only installed it for the UIKit. Then complete the Babel and save-to-gallery permission steps below.

Configure Babel

Register both Babel plugins in your app’s babel.config.js, or the build fails. react-native-worklets/plugin must be the last entry in plugins:

babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    '@babel/plugin-transform-export-namespace-from',
    // Must be the last plugin in the list.
    'react-native-worklets/plugin',
  ],
};

metro-react-native-babel-preset is obsolete. If your app still uses it, replace it with module:@react-native/babel-preset.

To customize the UIKit source, see the React Native tab under GitHub Fork Installation.

Platform Configuration

iOS Configuration (ios/Podfile):

platform :ios, '15.1'  # Minimum iOS 15.1

target 'YourApp' do
 config = use_native_modules!

  # Required for UIKit functionality
  pod 'SPTPersistentCache', :modular_headers => true
  pod 'DVAssetLoaderDelegate', :modular_headers => true
  $RNVideoUseVideoCaching = true

  # Your other dependencies...
end

iOS Deployment Target:

In Xcode, set Minimum Deployments to at least iOS 15.1

Install iOS dependencies:

npx pod-install

Android Configuration (android/build.gradle):

buildscript {
    ext {
        kotlinVersion = "2.1.20"
        minSdkVersion = 24
        compileSdkVersion = 36
        targetSdkVersion = 36
        buildToolsVersion = "36.0.0"
        // ... other configurations
    }
}

Required Permissions

iOS Permissions (ios/YourApp/Info.plist):

<key>NSCameraUsageDescription</key>
<string>App needs access to the camera to take photos</string>
<key>NSMicrophoneUsageDescription</key>
<string>App needs access to the microphone to record audio</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>App needs access to the gallery to select photos</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>App needs access to save photos and videos to your gallery</string>

Android Permissions (android/app/src/main/AndroidManifest.xml):

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission
  android:name="android.permission.WRITE_EXTERNAL_STORAGE"
  android:maxSdkVersion="28" />

Required from v4.3.0. Chat lets users save photos and videos to the device gallery.

iOS: without NSPhotoLibraryAddUsageDescription, iOS terminates the app the first time a user saves media.
Android: Android 9 (API 28) and below need WRITE_EXTERNAL_STORAGE to save to the gallery. Without it, saving always fails with a permission error. Keep android:maxSdkVersion="28": Android 10 and above don’t need the permission.

Basic Usage

Simple Integration:AmityUiKitSocial mounts the full social experience. To mount chat instead, render AmityUiKitChat — see Add Chat below.

import React from 'react';
import {
  AmityUiKitSocial,
  AmityUiKitProvider,
} from '@amityco/react-native-social-uikit';

export default function App() {
  return (
    <AmityUiKitProvider
      apiKey="YOUR_API_KEY"
      apiRegion="us"  // "us", "eu", or "sg"
      userId="user123"
      displayName="John Doe"
      apiEndpoint="https://api.us.amity.co"  // Optional if using default endpoints
    >
      <AmityUiKitSocial />
    </AmityUiKitProvider>
  );
}

Add Chat

From v4.3.0, the same package includes Chat UIKit. Render AmityUiKitChat inside AmityUiKitProvider to mount the chat experience, starting at the chat list. It needs no extra package and uses the same provider props as AmityUiKitSocial.From v4.3.1, each chat page can also be rendered on its own inside AmityPageRenderer — see Chat Components.

import React from 'react';
import {
  AmityUiKitChat,
  AmityUiKitProvider,
} from '@amityco/react-native-social-uikit';

export default function ChatScreen() {
  return (
    <AmityUiKitProvider
      apiKey="YOUR_API_KEY"
      apiRegion="us"
      userId="user123"
      displayName="John Doe"
    >
      <AmityUiKitChat />
    </AmityUiKitProvider>
  );
}

Individual Screen Components

Instead of mounting the whole UIKit, you can render a single page or component inside AmityPageRenderer, which sets up the navigation the UIKit screens need.

import React from 'react';
import {
  AmityUiKitProvider,
  AmityPageRenderer,  // Required for individual screens
  CommunityProfilePage,
} from '@amityco/react-native-social-uikit';

export default function App() {
  return (
    <AmityUiKitProvider
      apiKey="YOUR_API_KEY"
      apiRegion="us"
      userId="user123"
      displayName="John Doe"
    >
      <AmityPageRenderer>
        <CommunityProfilePage defaultCommunityId="community123" />
      </AmityPageRenderer>
    </AmityUiKitProvider>
  );
}

For the pages and components you can render this way, see the React Native examples in Social Components and, from v4.3.1, Chat Components.

Note: AmityPageRenderer is only required when using individual screen components. It’s not needed for AmityUiKitSocial or AmityUiKitChat.

If you’re upgrading to React Navigation v7, follow these steps:1. Upgrade Dependencies: Update these packages to match UIKit’s exact versions in package.json:

@react-navigation/native
@react-navigation/native-stack
@react-navigation/stack
react-native-screens

2. Replace independent={true} with NavigationIndependentTree:Before:

<NavigationContainer independent={true}>
  {/* Your navigators */}
</NavigationContainer>

After:

import { NavigationIndependentTree } from '@react-navigation/native';

<NavigationIndependentTree>
  <NavigationContainer>
    {/* Your navigators */}
  </NavigationContainer>
</NavigationIndependentTree>

GitHub Fork Installation

For complete customization and control over the UIKit source code:

Note: The Flutter UIKit is only available through GitHub forking, not package installation. React Native is available both ways: install from npm under Package Installation, or fork it here to customize the source.

iOS
Android
Web (React)
Flutter
React Native

Fork Repository

Fork the iOS UIKit repository
Clone your forked repository:

git clone https://github.com/YOUR_USERNAME/ASC-UIKit-iOS-OpenSource.git

Open-source Installation

With open-source, developers have more flexibility and greater customization options, allowing you to have complete control over the visual style. Open sourcing allows for more transparency and visibility and enables contributions from a greater developer community in terms of good design, implementation, code improvement, and fixes, translating into a better product and typical development.

Migration from Existing Project

Remove Existing Dependencies (If Applicable)

If you’ve never used UI Kit, you may skip this step and proceed to the next step. If you’re integrating the UI Kit with an existing project, you’ll need to remove and unlink the managed UIKit from your project before proceeding with the integration.

Migrate to iOS UIKit Open Source

There are several ways for you to migrate the open-source iOS UIKit into your projects, depending on your workflow. One way that we recommend is via Git Submodule. This instruction assumes that the app project is already set up with a Git repository.1. Add the git submodule of social.plus UIKit open source into your git repository:

git submodule add https://github.com/AmityCo/ASC-UIKit-iOS-OpenSource

2. Create an Xcode Workspace, and then add both MyApp.xcodeproj and AmityUIKit.xcodeproj together under the same workspace.

iOS Open Source Project Directory Structure

3. AmityUIKit links with other dependencies such as AmitySDK through SharedFrameworks which is a Swift Package.

3.1 Reset the Package Cache of your Application Target i.e YourApp.xcodeproj. [If you are installing AmityUIKit for the first time, you can skip this step] Select App Target In Xcode Project → Select File Menu for Xcode→ Packages → Reset Package Cache
3.2 Link SharedFrameworks & AmityUIKit.framework to YourApp.xcodeproj target as shown below.

4. On MyApp.xcodeproj, let’s try importing social.plus UIKit / social.plus SDK and call some APIs. You should be able to compile and run the app.

Modify iOS Open Source UIKit

You can modify the iOS open-source UIKit to customize behaviors to fit your needs. To modify the code, simply copy and paste it into your local machine.We recommend that you first fork the repository before starting any customization work so that it will be easier to merge the code with the next version update that we provide from the main repository.References on forking: https://docs.github.com/en/get-started/quickstart/fork-a-repo

Get Latest iOS Open Source UIKit Updates

To update to the latest version of the UIKit, you can pull the latest commit of the git submodule.

cd https://github.com/AmityCo/ASC-UIKit-iOS-OpenSource
git pull origin master
git checkout tags/4.0.0-beta01
cd ..
git add .
git commit -m "Update ios uikit opensource submodule"
git push origin master

Required Setup

Info.plist Permissions:

<key>NSCameraUsageDescription</key>
<string>Access camera to take photos and videos</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Access photo library to select images</string>
<key>NSMicrophoneUsageDescription</key>
<string>Access microphone for video recording</string>

Initialize in AppDelegate:

import AmityUIKit

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    AmityUIKitManager.setup(
        apiKey: "YOUR_API_KEY",
        endpoint: .US  // .US, .EU, or .SG
    )
    return true
}

Customization Benefits

Complete UI Control: Modify view controllers, storyboards, XIB files, and Swift UI components
Custom Theming: Change colors, fonts, images, and styling throughout the app
Business Logic: Add custom validation, analytics, user flows, and integrations
Advanced Features: Implement custom post types, moderation rules, and push notifications
Native Performance: Direct access to native iOS optimizations and latest features
Version Control: Track changes and manage updates through your own repository

Fork Repository

Fork the Android UIKit repository
Clone your forked repository:

git clone https://github.com/YOUR_USERNAME/Amity-Social-Cloud-UIKit-Android-OpenSource.git

Integration Methods

Android Studio Import (Recommended)

Step 1: Download/Clone Source Code

Clone or download the source code from the open-source GitHub repository
Extract the downloaded ZIP file if applicable

Step 2: Import Module in Android Studio

Navigate to your current application in Android Studio
In the top navigation bar, go to File → New → Import Module…
Choose the source directory where you downloaded/cloned the UIKit source code
Select the modules to import

Step 3: Select Required Modules Import these essential modules:

:chat - Chat functionality
:common - Common utilities and components
:social - Social features
:amity-uikit - Main UIKit module

Optional: The :sample module contains examples of UIKit Fragments and Activities for reference but is not required for your implementation.

Step 4: Configure settings.gradle Navigate to your root project’s settings.gradle file and verify the module paths:

include ':amity-uikit'
include ':chat'
include ':common'
include ':social'

// Verify paths are correct (Android Studio may auto-generate these)
project(':amity-uikit').projectDir = new File('../Amity-Social-Cloud-UIKit-Android-OpenSource/amity-uikit')
project(':chat').projectDir = new File('../Amity-Social-Cloud-UIKit-Android-OpenSource/chat')
project(':common').projectDir = new File('../Amity-Social-Cloud-UIKit-Android-OpenSource/common')
project(':social').projectDir = new File('../Amity-Social-Cloud-UIKit-Android-OpenSource/social')

Step 5: Configure Repository in settings.gradle Add the JitPack repository to dependencyResolutionManagement:

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven { url 'https://jitpack.io' }
        maven { url 'https://sdk.amity.co/artifactory/amity-release' }
    }
}

Step 6: Add Dependencies to App Module In your app-level build.gradle, add the UIKit dependency:

dependencies {
    implementation project(path: ':amity-uikit')

    // Required dependencies will be included automatically
    // through the UIKit module's dependencies
}

Step 7: Configure Packaging Options Add packaging exclusions in your app-level build.gradle:

android {
    // ... other configurations

    packagingOptions {
        exclude 'META-INF/INDEX.LIST'
        exclude 'META-INF/io.netty.versions.properties'
    }
}

Step 8: Apply Dependencies Configuration In your project-level build.gradle, apply the dependencies configuration:

apply from: "../Amity-Social-Cloud-UIKit-Android-OpenSource/buildsystem/dependencies.gradle"

Step 9: Configure gradle.properties Ensure this setting is in your gradle.properties file:

android.nonTransitiveRClass=false

Required Configuration

Project-level build.gradle:

allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url 'https://jitpack.io' }
        maven { url 'https://sdk.amity.co/artifactory/amity-release' }
    }
}

App-level build.gradle configuration:

android {
    compileSdk 34

    defaultConfig {
        minSdk 21
        targetSdk 34
        multiDexEnabled true
    }

    buildFeatures {
        dataBinding = true
        viewBinding = true
    }

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = JavaVersion.VERSION_1_8
    }

    packagingOptions {
        exclude 'META-INF/INDEX.LIST'
        exclude 'META-INF/io.netty.versions.properties'
    }
}

Initialize in Application class:

class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()

        AmityUIKit4Manager.setup(
             apiKey = "YOUR_API_KEY",
             endpoint =  AmityEndpoint.EU
            )
    }
}

Permissions (AndroidManifest.xml)

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

Troubleshooting

Common Issues:

Module paths not found: Double-check the paths in settings.gradle match your actual directory structure
Build errors: Ensure all required modules (:chat, :common, :social, :amity-uikit) are imported
Dependency conflicts: Make sure android.nonTransitiveRClass=false is set in gradle.properties
Repository access: Verify JitPack and Amity repositories are correctly configured

Clean and Rebuild:

./gradlew clean
./gradlew build

Customization Benefits

Complete Layout Control: Modify XML layouts, fragments, activities, and view components
Custom Styling: Change themes, colors, typography, and dimensions using Android resources
Data Binding: Implement custom data binding adapters, view models, and observers
Navigation Control: Customize fragment transactions, navigation flows, and deep linking
Build Configurations: Control ProGuard rules, build variants, flavors, and dependencies
Resource Management: Override drawables, strings, colors, and other resources
Architecture Integration: Integrate with MVVM, MVP, or other architectural patterns

Fork Repository

Fork the Web UIKit repository
Clone your forked repository:

git clone https://github.com/YOUR_USERNAME/Amity-Social-Cloud-UIKit-Web-OpenSource.git

Prerequisites

Install PNPM (Optional but Recommended):

corepack enable pnpm

Reference: PNPM Installation Guide

Setup Methods

Storybook Development (Optional)
Project Integration
Direct Source Integration

Running Storybook for Component Development:Storybook allows you to view and develop UI components in isolation, which is helpful for customization and testing.Step 1: Clone Repository

git clone https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git
cd Amity-Social-Cloud-UIKit-Web-OpenSource

Step 2: Install Dependencies

pnpm install

Step 3: Configure Environment Create a .env file at the root of the project:

STORYBOOK_API_REGION=<API_REGION>
STORYBOOK_API_KEY=<API_KEY>

Replace <API_REGION> (us/eu/sg) and <API_KEY> with your actual credentials.Step 4: Run Storybook

pnpm run storybook

Step 5: View Components Open your browser and navigate to http://localhost:6006 to view the Storybook interface.

Installing UIKit with Your Application:Step 1: Clone Repository

git clone https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git
cd Amity-Social-Cloud-UIKit-Web-OpenSource

Step 2: Install Dependencies

pnpm install

Step 3: Build the Project

pnpm run build

Step 4: Navigate to Your Application

cd <path-to-your-app>

Step 5: Link UIKit to Your Application Choose your preferred package manager:NPM:

npm link file:<path-to-amity-ui-kit-repository> --save

Yarn (Classic):

yarn add file:<path-to-amity-ui-kit-repository>

PNPM:

pnpm i file:<path-to-amity-ui-kit-repository>

Alternative: Git Dependency Add to your package.json:

{
  "dependencies": {
    "@amityco/ui-kit-react": "git+https://github.com/YOUR_USERNAME/Amity-Social-Cloud-UIKit-Web-OpenSource.git#main"
  }
}

Copy Source Files Method:For maximum customization, copy the source files directly into your project:Step 1: Copy Source Files

# Copy the src folder to your project
cp -r Amity-Social-Cloud-UIKit-Web-OpenSource/src YourProject/src/amity-uikit

Step 2: Install Peer Dependencies

npm install react react-dom typescript
npm install @types/react @types/react-dom

Step 3: Configure Build Tools Update your TypeScript, Webpack, or Vite configuration to handle the new source files.Step 4: Import Components

import { AmityUIKitProvider } from './amity-uikit/components';

Required Dependencies

Ensure these peer dependencies are installed in your project:

{
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "typescript": "^4.9.0"
  }
}

Updating to Latest Version

For Forked Repository:

# Sync your fork with upstream
git remote add upstream https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git
git fetch upstream
git checkout main
git merge upstream/main
git push origin main

# Rebuild after updates
pnpm install
pnpm run build

For Local Development:

cd Amity-Social-Cloud-UIKit-Web-OpenSource
git pull origin main
pnpm install
pnpm run build

# Re-link to your project if needed
cd YourProject
pnpm i file:<path-to-amity-ui-kit-repository>

Troubleshooting

Common Issues:

Build errors: Ensure all peer dependencies are correctly installed
Module resolution: Check your bundler configuration and alias settings
TypeScript errors: Verify TypeScript configuration includes UIKit source paths
Style conflicts: Import UIKit styles after your application styles

Reset and Clean Installation:

# In UIKit directory
rm -rf node_modules package-lock.json
pnpm install
pnpm run build

# In your project
rm -rf node_modules package-lock.json
npm install

Customization Benefits

Complete Component Control: Edit React components, hooks, and utilities directly
Advanced Styling: Customize CSS-in-JS, SCSS, CSS modules, and theme configurations
State Management: Implement custom Redux, Zustand, or Context patterns
Routing Integration: Customize React Router or Next.js routing flows
Bundle Optimization: Control webpack/Vite configuration, code splitting, and tree shaking
Development Experience: Use Storybook for isolated component development and testing
API Integration: Modify API calls, data fetching, and caching strategies

Fork Repository

Fork the Flutter UIKit repository
Clone your forked repository:

git clone https://github.com/AmityCo/Amity-Social-UIKit-Flutter-Opensource.git

Integration Methods

Local Path Dependency
Git Dependency
Git Submodule

Add to pubspec.yaml:

dependencies:
  amity_uikit_beta_service:
    path: ./Amity-Social-UIKit-Flutter-Opensource

Project structure:

YourFlutterProject/
├── lib/
├── pubspec.yaml
└── Amity-Social-UIKit-Flutter-Opensource/
    ├── lib/
    └── pubspec.yaml

Add to pubspec.yaml:

dependencies:
  amity_uikit_beta_service:
    git:
      url: https://github.com/YOUR_USERNAME/Amity-Social-UIKit-Flutter-Opensource.git
      ref: main  # or specific branch/tag

Add as submodule:

cd YourFlutterProject
git submodule add https://github.com/YOUR_USERNAME/Amity-Social-UIKit-Flutter-Opensource.git packages/amity_uikit
git submodule update --init --recursive

Update pubspec.yaml:

dependencies:
  amity_uikit_beta_service:
    path: packages/amity_uikit

Initialization

import 'package:flutter/material.dart';
import 'package:amity_uikit_beta_service/amity_uikit.dart';
import 'package:amity_uikit_beta_service/v4/utils/config_provider_widget.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // Initialize UIKit
  await AmityUIKit().setup(
    apikey: 'YOUR_API_KEY',
    region: AmityEndpointRegion.eu,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AmityUIKitProvider(
      child: SocialHomePageConfigProviderWidget(),
    );
  }
}

Customization Benefits

Widget Modification: Edit Flutter widgets, screens, and navigation flows
Theme Customization: Modify Material/Cupertino themes and custom styling
State Management: Implement custom Provider, Bloc, or Riverpod patterns
Platform Channels: Add custom platform-specific functionality
Build Configuration: Control pubspec dependencies and build settings

Fork the React Native UIKit when you need to change the UIKit itself, such as its components, screens, or navigation flows. If you only need the published UIKit, use the React Native tab under Package Installation instead.

Fork Repository

Fork the React Native UIKit repository.
Clone your fork:

git clone https://github.com/YOUR_USERNAME/Amity-Social-UIKit-React-Native-CLI-OpenSource.git

Build and Install a Local Package

Build a package from your fork and install it into your app in place of the npm package:

cd Amity-Social-UIKit-React-Native-CLI-OpenSource
yarn install
npm pack        # builds the UIKit and produces amityco-react-native-social-uikit-x.x.x.tgz

# from your app
yarn add ../path/to/amityco-react-native-social-uikit-x.x.x.tgz

Imports stay the same (@amityco/react-native-social-uikit). Rebuild and reinstall the package each time you change the UIKit source.

Complete the App Setup

A local build needs the same app setup as the npm package. Follow these steps in the React Native tab under Package Installation:

Install the peer dependencies (skip yarn add @amityco/react-native-social-uikit)
Configure Babel
Platform configuration
Required permissions

Try Sample App

The repository includes a built-in sample app for testing:1. Setup Sample App:

cd example
yarn install

2. Configure Firebase (for push notifications):

Set up Firebase project at https://console.firebase.google.com/
Download google-services.json and GoogleService-Info.plist
Copy to /example/android/app/ and /example/ios/ respectively

3. Configure App Settings: Edit /example/src/App.tsx with your credentials:

apiKey
apiRegion
apiEndpoint
userId
displayName
fcmToken

4. Run Sample App:

# From root directory
yarn install

# Run iOS
yarn example ios

# Run Android
yarn example android

Customization Benefits

Complete Component Control: Modify React Native components, screens, and navigation flows
Advanced Styling: Override StyleSheet styles and implement custom theme configurations
Individual Screen Usage: Import and use specific screens for granular control
Native Module Integration: Add custom native modules and third-party libraries
Navigation Flexibility: Customize React Navigation flows and screen transitions
State Management: Implement custom Redux/Context state management patterns
Push Notifications: Full control over Firebase configuration and notification handling

Next Steps

After installation, continue with:

Authentication Setup

Configure user authentication and API credentials

First Component

Add your first UIKit component to your app

Customization

Customize themes, colors, and styling

Installation Complete? Head to Authentication Setup to configure your API credentials and start building!

​Installation Methods

Package Installation

GitHub Fork

​Package Installation

​Prerequisites

​Installation Steps

​Initialize UIKit

​Required Permissions (Info.plist)

​Prerequisites

​Gradle Configuration

​Initialize UIKit

​Prerequisites

​Installation

​Setup AmityUIKitProvider

​Minimum Requirements

​Install the UIKit

​Configure Babel

​Platform Configuration

​Required Permissions

​Basic Usage

​Add Chat

​Individual Screen Components

​React Navigation v7 Migration

​GitHub Fork Installation

​Fork Repository

​Open-source Installation

​Migration from Existing Project

​Remove Existing Dependencies (If Applicable)

​Migrate to iOS UIKit Open Source

​Modify iOS Open Source UIKit

​Get Latest iOS Open Source UIKit Updates

​Required Setup

​Customization Benefits

​Fork Repository

​Integration Methods

​Required Configuration

​Permissions (AndroidManifest.xml)

​Troubleshooting

​Customization Benefits

​Fork Repository

​Prerequisites

​Setup Methods

​Required Dependencies

​Updating to Latest Version

​Troubleshooting

​Customization Benefits

​Fork Repository

​Integration Methods

​Initialization

​Customization Benefits

​Fork Repository

​Build and Install a Local Package

​Complete the App Setup

​Try Sample App

​Customization Benefits

​Next Steps

Authentication Setup

First Component

Customization

Installation Methods

Package Installation

Prerequisites

Installation Steps

Initialize UIKit

Required Permissions (Info.plist)

Prerequisites

Gradle Configuration

Initialize UIKit

Prerequisites

Installation

Setup AmityUIKitProvider

Minimum Requirements

Install the UIKit

Configure Babel

Platform Configuration

Required Permissions

Basic Usage

Add Chat

Individual Screen Components

React Navigation v7 Migration

GitHub Fork Installation

Fork Repository

Open-source Installation

Migration from Existing Project

Remove Existing Dependencies (If Applicable)

Migrate to iOS UIKit Open Source

Modify iOS Open Source UIKit

Get Latest iOS Open Source UIKit Updates

Required Setup

Customization Benefits

Fork Repository

Integration Methods

Required Configuration

Permissions (AndroidManifest.xml)

Troubleshooting

Customization Benefits

Fork Repository

Prerequisites

Setup Methods

Required Dependencies

Updating to Latest Version

Troubleshooting

Customization Benefits

Fork Repository

Integration Methods

Initialization

Customization Benefits

Fork Repository

Build and Install a Local Package

Complete the App Setup

Try Sample App

Customization Benefits

Next Steps