React Native (Beta)

Minimum Requirement

• iOS

  • Minimum iOS Target >= 13.4

• Android

  • buildToolVersion >= "34.0.0"

  • kotlinVersion >= 1.7.0

  • minSdkVersion >= 24

  • compileSdkVersion >= 34

  • ndkVersion >= "25.1.8937393"

• ENV

  • React >= v16

  • NodeJS >= v18

  • NPM >= v6

  • yarn >= v1.22.15

  • JDK >= 17.0.10

  • ruby >= 3.2.0

  • XCode >= 15

Installation

Open-source Installation

With open-source, developers have more flexibility and greater customization options, allowing you to have complete control over the visual style. Open sourcing allows for more transparency and visibility and enables contributions from a greater developer community in terms of good design, implementation, code improvement, and fixes, translating into a better product and typical development.

1. Clone the social.plus UI Kit open-source repository from GitHub:

   git clone https://github.com/AmityCo/Amity-Social-UIKit-React-Native-CLI-OpenSource.git

2. Navigate to the cloned repository directory:

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

3. Install the dependencies:

   yarn install

4. Build the UI Kit:

   npm run prepack
   npm pack

Package Installation

This step will build the app and return amity-react-native-social-ui-kit-x.x.x.tgz file in inside the folder

1. Copy tgz file to your project folder where you need to use ui-kit:

2. Install built UI Kit tgz file: The command to install the ui-kit package depends on the package manager used in your project.

   • Yarn

     yarn add ./amity-react-native-social-ui-kit-x.x.x.tgz

   • NPM

     npm install./amity-react-native-social-ui-kit-x.x.x.tgz

   • PNPM

     pnpm install ./amity-react-native-social-ui-kit-x.x.x.tgz

3. Install peer dependencies: The command to install the ui-kit package depends on the package manager used in your project.

   • Yarn

     yarn add \
     react-native-safe-area-context@^4.7.2 \
     react-native-image-picker@^7.0.0 \
     @react-native-async-storage/async-storage@^1.19.3 \
     react-native-svg@^14.1.0 \
     react-native-gesture-handler@^2.15.0 \
     react-native-screens@^3.25.0 \
     [email protected] \
     react-native-create-thumbnail@^2.0.0 \
     @react-native-community/netinfo@^11.3.1 \
     @react-navigation/native@^6.1.17 \
     @react-navigation/native-stack@^6.9.26 \
     @react-navigation/stack@^6.3.29 \
     react-native-vision-camera@^3.9.2 \
     react-native-push-notification^8.1.1 \
     @api.video/[email protected] \
     react-native-get-random-values@^1.11.0 \
     react-native-rsa-native@^2.0.5 \
     react-native-vlc-media-player@^1.0.67 \
     [email protected] \

   • NPM

     npm install \
     react-native-safe-area-context@^4.7.2 \
     react-native-image-picker@^7.0.0 \
     @react-native-async-storage/async-storage@^1.19.3 \
     react-native-svg@^14.1.0 \
     react-native-gesture-handler@^2.15.0 \
     react-native-screens@^3.25.0 \
     [email protected] \
     react-native-create-thumbnail@^2.0.0 \
     @react-native-community/netinfo@^11.3.1 \
     @react-navigation/native@^6.1.17 \
     @react-navigation/native-stack@^6.9.26 \
     @react-navigation/stack@^6.3.29 \
     react-native-vision-camera@^3.9.2 \
     react-native-push-notification^8.1.1 \
     @api.video/[email protected] \
     react-native-get-random-values@^1.11.0 \
     react-native-rsa-native@^2.0.5 \
     react-native-vlc-media-player@^1.0.67 \
     [email protected] \

   • PNPM

     pnpm install \
     react-native-safe-area-context@^4.7.2 \
     react-native-image-picker@^7.0.0 \
     @react-native-async-storage/async-storage@^1.19.3 \
     react-native-svg@^14.1.0 \
     react-native-gesture-handler@^2.15.0 \
     react-native-screens@^3.25.0 \
     [email protected] \
     react-native-create-thumbnail@^2.0.0 \
     @react-native-community/netinfo@^11.3.1 \
     @react-navigation/native@^6.1.17 \
     @react-navigation/native-stack@^6.9.26 \
     @react-navigation/stack@^6.3.29 \
     react-native-vision-camera@^3.9.2 \
     react-native-push-notification^8.1.1 \
     @api.video/[email protected] \
     react-native-get-random-values@^1.11.0 \
     react-native-rsa-native@^2.0.5 \
     react-native-vlc-media-player@^1.0.67 \
     [email protected] \

iOS Configuration

In Pod file, add these lines under your target,

  pod 'SPTPersistentCache', :modular_headers => true
  pod 'DVAssetLoaderDelegate', :modular_headers => true
  $RNVideoUseVideoCaching = true



In XCode,

Set Minimum Deployments at least iOS 12.0

cd ios
pod install

iOS Permissions

Add following permissions to info.plist file (ios/{YourAppName}/Info.plist)

 <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>NSPhotoLibraryUsageDescription</key>
 <string>App needs access to the gallery to select photos.</string>

iOS Setup Background downloading

Add this method in AppDelegate.mm file (ios/{YourAppName}/AppDelegate.mm)

```
#import <RNFSManager.h>
...
- (void)application:(UIApplication *)application handleEventsForBackgroundURLSession:(NSString *)identifier completionHandler:(void (^)())completionHandler
{
  [RNFSManager setCompletionHandlerForIdentifier:identifier completionHandler:completionHandler];
}
```

Android Configuration

Build project gradle with your Android Studio

In android/build.gradle, add below in in buildscript > ext

kotlinVersion = 1.7.0 and above, compileSdkVersion = 34, buildToolsVersion = "34.0.0"

Android Permissions

Add the following permissions to AndroidManifest.xml file (android/app/src/main/AndroidManifest.xml)

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

Usage

import * as React from 'react';

import {
  AmityUiKitSocial,
  AmityUiKitProvider,
} from 'amity-react-native-social-ui-kit';

export default function App() {
  return (
    <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      apiEndpoint="https://api.{API_REGION}.amity.co"
    >
      <AmityUiKitSocial />
    </AmityUiKitProvider>
  );
}

Customization

Our UIKit v4 supports customization in a single place by modifying a uikit.config.json file in related UIKit repository. This configuration file includes all the necessary data to customize the appearance of each pages, components, and elements that we allow to do customization. Note: uikit.config.json file should be in your project. Please kindly check the example project.

import * as React from 'react';
import {
  AmityUiKitSocial,
  AmityUiKitProvider,
} from 'amity-react-native-social-ui-kit';
import config from './uikit.config.json';

export default function App() {
  return (
    <AmityUiKitProvider
      configs={config} //put your customized config json object
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      apiEndpoint="https://api.{API_REGION}.amity.co"
    >
      <AmityUiKitSocial />
    </AmityUiKitProvider>
  );
}

Using Theme

Using the default theme

social.plus UIKit uses the default theme as part of the design language.

Theme customization

Without customization, the UIKit already looks good. However, if you wish to customize the theme, you can declare changes to color variables by passing your own color codes to our uikit.config.json. Here is the code usage of how to customize the theme.

"preferred_theme": "default",
  "theme": {
    "light": {
      "primary_color": "#1054DE",
      "secondary_color": "#292B32",
      "base_color": "#292b32",
      "base_shade1_color": "#636878",
      "base_shade2_color": "#898e9e",
      "base_shade3_color": "#a5a9b5",
      "base_shade4_color": "#ebecef",
      "alert_color": "#FA4D30",
      "background_color": "#FFFFFF",
      "background_shade1_color": "#f6f7f8"
    },
    "dark": {
      "primary_color": "#1054DE",
      "secondary_color": "#292B32",
      "base_color": "#ebecef",
      "base_shade1_color": "#a5a9b5",
      "base_shade2_color": "#6e7487",
      "base_shade3_color": "#40434e",
      "base_shade4_color": "#292b32",
      "alert_color": "#FA4D30",
      "background_color": "#191919",
      "background_shade1_color": "#40434e"
    }
  },

Dark Mode

The Dark Mode feature in our UIKit enhances user experience by providing an alternative visual style that is particularly beneficial in low-light environments. It's designed to reduce eye strain, improve readability, and offer a more visually comfortable interface. You can enable dark mode by just changing preferred_theme: "default" to the preferred_theme: "dark" in uikit.config.json

"preferred_theme": "dark" // change it to dark || light || default,

Push Notification

Since v4.0.0-beta.7, UIKit supports push notifications by registering fcm token for android and apn token for ios. To enable push notifications in UIKit, please follow the instructions on the React Native Push Notifications Initialization page.