React Native social network UI kit

Supercharge Your App with a Social UI for React Native

Italo Orihuela
Italo Orihuela
Nov 21, 2023

Creating a social interface from scratch can be a daunting task, so having options for easily implementing UIs can save you a lot of time. This blog post will guide you through the process of integrating a UIKit into your React Native project. This powerful toolkit allows you to easily implement a social UI, complete with features like camera access and safe area context.

We’ll walk you through the setup and authentication process, and provide detailed instructions for both iOS and Android configurations. By the end of this tutorial, you’ll be able to enhance your app with a fully functional social interface, all thanks to the Amity Social Cloud React Native UI Kit. So, let’s dive in and start supercharging your app!


Before we begin, make sure you have the following:

  1. A React Native project set up and ready to go.
  2. Git installed on your system.
  3. Node.js and npm or yarn installed on your system.
  4. An Amity Social Cloud Portal account
  5. An Amity Social Cloud Console Account
  6. Access to Amity Social Cloud React Native UI Kit

Note: If you haven’t already registered for an Amity account, we recommend following our comprehensive step-by-step guide in the Amity Portal to create your new network.

Step 1: Clone the Repository

The first step is to clone the Amity UIKit repository from GitHub. Open your terminal and run the following command:

This command will create a copy of the repository on your local machine.

Step 2: Navigate to the Folder

Next, navigate to the cloned folder using the following command:

You are now in the root directory of the cloned repository.

Step 3: Install the Packages

Now, it’s time to install all the necessary packages. You can do this using either yarn or npm install. This step ensures that all the dependencies required by the Amity UIKit are installed in your project.

Step 4: Build the App

Once the packages are installed, you can build the app using yarn pack or npm pack. This will generate a .tgz file in the folder, which you will need in the next steps.

Step 5: Copy the .tgz File

Now, move the .tgz file to your application folder where you need to use the UIKit. You can do this with the command yarn add ./asc-react-native-ui-kit/amityco-asc-react-native-ui-kit-0.1.0.tgz.

Step 6: Install Required Dependencies

Next, run the following command to install the required dependencies:

Step 7: Install Expo Modules

To ensure compatibility with Expo, run npx install-expo-modules@latest.

Step 8: Configuration

For iOS, run npx pod-install to install the necessary pods. For Android, make sure to sync your project's gradle file.

Step 9: Camera Permissions (Only for iOS)

For iOS, remember to add the following permissions to the info.plist file (ios/{YourAppName}/Info.plist) for camera access.

Step 10: Authentication

Finally, import Amity UiKit and use it in your application as shown in the context information.

Final Thoughts

Integrating the Amity Social Cloud UI Kit into your React Native project is a straightforward process that can significantly enhance your app’s social interface. By following these steps, you can easily implement a fully functional social network user interface, complete with features like camera access and safe area context!