Instagram clone showing posts with user reactions

Building a Feed based app with TypeScript

Italo Orihuela
Italo Orihuela
Feb 1, 2024

The use of Feeds within applications has provided engaging user interface. Today, we will guide you on how to build a Feed based app using TypeScript. For this purpose, we will rely on Amity Social Cloud UI Kit, which provides pre-built UI components, making it easier to build social media applications. It is compatible with React Native, a popular framework for building mobile apps using JavaScript and React.


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 UI Kits

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

Step 1: Clone the Repository

Start by cloning the Amity Social Cloud UI Kit 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 command:

Step 3: Install the Packages

Once you’re in the project directory, install all the necessary packages using either yarn or npm install. These packages include all the dependencies required by the Amity UIKit.

Step 4: Build the App

After installing the packages, build the app using yarn pack or npm pack. This will generate a .tgz file in the folder, which we will use 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 UI Kit. Use 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, install the required dependencies by running the following command:

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, sync your project's gradle file.

Step 9: Camera Permissions (Only for iOS)

For iOS, 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 follows:

Replace “API_KEY” with your Amity API key, and “userId” and “displayName” with your user’s ID and display name, respectively.

Feed Customisation

To customise a UI more on a feed style, focus on a clean, minimalistic design with a grid layout for the photo feed and a navigation bar at the bottom featuring home, search, post creation, activity, and user profile icons. Adopt a simple colour scheme with whites, greys, and brand-specific highlights, along with modern, sans-serif fonts. The profile page should display the user’s picture, bio, and posts in a grid format. Essential features include high-quality image and video integration, interactive elements like liking and commenting, a search function for user and tag discovery, and stories at the top of the home feed.

Final Thoughts

Building Feeds in you application will provide a much more engaging experience. It allows you to understand the intricacies of social media app development while providing a practical application of your coding skills. With the Amity Social Cloud UI Kit, you can focus more on the unique features of your app, rather than spending time on building common UI components. To start testing these features right away, just contact Amity!