Setup & Authentication

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>
  );
}