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 Social+ 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.
Pre-requisites
Before we begin, make sure you have the following:
- A React Native project set up and ready to go.
- Git installed on your system.
- Node.js and npm or yarn installed on your system.
- An Social+ Portal account
- An Social+ Console Account
- Access to Social+ UI Kits
Note: If you haven’t already registered for an Social+ account, we recommend following our comprehensive step-by-step guide in the Social+ Portal to create your new network.
Step 1: Clone the Repository
Start by cloning the Social+ 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 Social+ 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 Social+ UiKit and use it in your application as follows:
Replace “API_KEY” with your Social+ 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 Social+ 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 Social+!