Welcome to the beta version of our open-source UIKit for React Native! This UIKit is specifically designed to enhance your React Native application by integrating the robust Amity Social features effortlessly with our TypeScript SDK.

What is Amity React Native UIKit?

Amity UIKit for React Native is a comprehensive collection of user interfaces that accelerates the integration of standard Amity Social features into new or existing applications. This UIKit is uniquely tailored to provide developers with the essential building blocks to construct a socially engaging application, thereby facilitating a quick and smooth development process.

As it is still in its beta version, the repository is updated frequently as we fine-tune and add more features to meet your development needs. We encourage you to stay connected to get the most out of our evolving UIKit here!

Key Features

The Amity UI-Kit for React Native offers:

• User Interface Components: A library of reusable UI components designed to incorporate Amity Social features with ease.

• Integration Flexibility: It supports integration with both Expo and React Native CLI, thus offering a versatile development experience.

Support and Documentation

For more detailed information on implementing our SDK, please visit our comprehensive documentation. Our dedicated team is always ready to assist you, so if you need further support, feel free to contact a UIKit representative at clientsolutions@amity.co. We are committed to helping you build amazing social experiences with our tools. Happy coding!

Jump to

The best way to familiarize yourself with the Amity UIKit is by exploring our built-in sample app. This application serves as a live demonstration of the toolkit's capabilities and can be used to test your code while customizing it. Feel free to deep-dive into the features and the extendibility of our UIKit using this application!

Follow these easy steps:

1. Install Packages: Use yarn to install all the necessary packages by running the command

yarn

1. Configuration: Configure your apiKey, apiRegion, userId, displayName in the /example/src/App.tsx file before launching the sample app.

1. Run the Sample App: Choose between iOS or Android using

yarn example ios

or

yarn example android

To integrate the Amity UIKit with another React Native project, follow these steps:

1. Clone the Repository: Use the command

git clone git@github.com:AmityCo/Amity-Social-Cloud-UIKit-React-Native-OpenSource.git

1. Navigate to the Folder: Move to the cloned folder using

cd Amity-Social-Cloud-UIKit-React-Native-OpenSource

1. Install the Packages: Install all the necessary packages using yarn or npm install

2. Build the App: Use yarn pack or npm pack to build the app. This will generate a .tgz file in the folder.

After that, in your React Native project:

1. Copy the .tgz File: Move the .tgz file to your application folder where you need to use the UIKit with the command yarn add ./asc-react-native-ui-kit/amityco-asc-react-native-ui-kit-0.1.0.tgz.

2. Install Required Dependencies: Run yarn add react-native-safe-area-context \react-native-image-picker \@react-native-async-storage/async-storage \react-native-svg@13.4.0 \react-native-screens.

3. Install Expo Modules: Run npx install-expo-modules@latest.

Configurations

iOS Configuration: Run npx pod-install.

Android Configuration: Make sure to sync your project's gradle file.

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:

<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>NSCameraUsageDescription</key>
 <string>App needs access to the camera to take photos.</string>

Authentication

After installation and configuration, import Amity UiKit and use it in your application as follows:

import * as React from 'react';

import {
  AmityUiKitSocial,
  AmityUiKitProvider,
} from '@amityco/asc-react-native-ui-kit';

export default function App() {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="sg"
      userId="userId"
      displayName="displayName"
    >
      <AmityUiKitSocial />
    </AmityUiKitProvider>
  );
}