This document describes the installation process of ChannelIO React Native SDK (hereafter SDK).

Installation

Enter the following command in the shell to install SDK.

react-native install react-native-channel-plugin

If you want to install the package manually, enter below two commands orderly.

npm install react-native-channel-plugin
react-native link react-native-channel-plugin

Installing on iOS

This section describes how to install the SDK on iOS.
You can install the SDK through CocoaPods, Carthage.

CocoaPods

You can use CocoaPods to install ChannelIO SDK. The minimum conditions for installation are the following:

Xcode 12 or later
CocoaPods 1.10.0 or later

Add ChannelIOSDK to the Podfile of the project as below.

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '11.0'

target 'testProject10' do
  config = use_native_modules!

  use_react_native!(:path => config["reactNativePath"])

  pod 'ChannelIOSDK', podspec: 'https://mobile-static.channel.io/ios/latest/xcframework.podspec'
  pod 'RNChannelIO', :path => '../node_modules/react-native-channel-plugin'

  target 'YourApplicationName' do
    inherit! :complete
    # Pods for testing
  end

  # Comment out Flipper.
  # Because there is a conflict now
  # use_flipper!
  # post_install do |installer|
  #   flipper_post_install(installer)
  # end
end

target 'YourApplicationName-tvOS' do
  # Pods for testProject10-tvOS

  target 'YourApplicationName-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end
end

If you need to install a specific package version, change the latest in the middle of the script to a particular version. For example:

...
pod 'ChannelIOSDK', podspec: 'https://mobile-static.channel.io/ios/10.0.7/xcframework.podspec'
...

// AppDelegate.m

// Comment out Flipper.
...
//#import <FlipperKit/FlipperClient.h>
//#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
//#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
//#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
//#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
//#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>
...

//static void InitializeFlipper(UIApplication *application) {
//  FlipperClient *client = [FlipperClient sharedClient];
//  SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
//  [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
//  [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
//  [client addPlugin:[FlipperKitReactPlugin new]];
//  [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
//  [client start];
//}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
//#ifdef FB_SONARKIT_ENABLED
//  InitializeFlipper(application);
//#endif
...
}

In the directory where Podfile is located, run the pod install command to install the package.
open Project_Name.xcworkspace.

Carthage

You can use Carthage to install ChannelIO SDK.

Add ChannelIOSDK to the Cartfile of the project as below.

binary "https://mobile-static.channel.io/ios/latest/channeliosdk-ios.json"

If you need to install a specific package version, change the script as below.

// Compatible version
binary "https://mobile-static.channel.io/ios/latest/channeliosdk-ios.json" ~> 8.0.0
// Specific version
binary "https://mobile-static.channel.io/ios/latest/channeliosdk-ios.json" == 8.0.0

In the directory where Cartfile is located, run the cartharge update command to install the package. For example:

carthage update -platform iOS --use-xcframeworks

The ChannelIO package is built inside the PROJECT_DIR/Carthage/build directory. Drag this package to Xcode to add it.

Additional Settings

Some additional settings are required.

1. Specify the Swift version

It is necessary since React native is a pure Objective-C project.

Go to Xcode > Target > Build Setting.
Click + > Add User-Defined Setting in the upper left corner to add a setting.

Set the key name to SWIFT_VERSION and the value to 5.0.

2. Add the permission and description used by SDK.

The following permissions are required to use the SDK. Add the following key value and description to the project's info.plist.

Key	Value
Privacy - Camera Usage Description	Accessing the camera in order to provide a better user experience
Privacy - Photo Library Usage Description	Accessing to photo library in order to provide a better user experience
Privacy - Photo Library Additions Usage Description	Accessing to photo library in order to save photos
Privacy - Microphone Usage Description	Accessing to microphone to record voice for video

3. Removing Flipper

Currently, you cannot use Flipper and Channel SDK at the same time. Use it by commenting out or removing Flipper. Below is an example of using Flipper by commenting it out.

Modifying Podfile

# use_flipper!
# post_install do |installer|
#   flipper_post_install(installer)
# end

Modifying AppDelegate.m

// AppDelegate.m

// Comment out Flipper.
...
//#import <FlipperKit/FlipperClient.h>
//#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
//#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
//#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
//#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
//#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>
...

//static void InitializeFlipper(UIApplication *application) {
//  FlipperClient *client = [FlipperClient sharedClient];
//  SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
//  [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
//  [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
//  [client addPlugin:[FlipperKitReactPlugin new]];
//  [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
//  [client start];
//}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
//#ifdef FB_SONARKIT_ENABLED
//  InitializeFlipper(application);
//#endif
...
}

After modifying, run the pod install command.

go to Build Setting on iOS Xcode project, the path is Project > Build Settings.

Then, search Library Search Paths and delete $(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME) . Refer to the photo below.

Initialize

Initialize the SDK to prepare for use. Go to AppDelegate.m and add the initialize method below.

#import <ChannelIOFront/ChannelIOFront-swift.h>

@interface AppDelegate ()
@end

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [ChannelIO initialize:application];
  return YES;
}

If you manage window instance on SceneDelegate.m, You should add initializeWindow as below.

//  SceneDelegate.m

@interface SceneDelegate ()
@property (strong, nonatomic) UIWindow * channelWindow;
@end

@implementation SceneDelegate


- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {
  _channelWindow = [ChannelIO initializeWindowWith:(UIWindowScene *)scene];
}
@end

Installing on Android

This section describes how to install ChannelIO SDK on Android.

MultiDex

We recommend setting multidex settings in order to use SDK. add the below configuration to android/app/build.gradle file.

android {
   ...
    defaultConfig {
        multiDexEnabled true
    }
    ...
}

Link package & initialize

Link the ChannelIO package, and initialize.

Referring to the example below, add the new RNChannelIOPackage() and ChannelIO.intialize(this) methods to the android/app/src/main/java/**/MainApplication.java file.

import android.support.multidex.MultiDexApplication;

import com.zoyi.channel.plugin.android.ChannelIO;
import com.zoyi.channel.rn.RNChannelIOPackage;

public class MainApplication extends MultiDexApplication implements ReactApplication {
  @Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
       new MainReactPackage(),
       new RNChannelIOPackage() // Add ChannelIO Package
    );
  }
  
  @Override
  public void onCreate() {
    super.onCreate();

    ChannelIO.initialize(this); // Initialize ChannelIO
  }
}

Using ChannelIO

Step 1. import Framework

import the SDK where you need to use it.

import { ChannelIO } from 'react-native-channel-plugin';

Step 2. Boot

Boot is the preparation process for using the SDK.

You may need your channel’s plugin key. See how to get a plugin key.
There are two types of Boot: Boot as an anonymous user or Boot as a member user.

For a detailed description of the user, see Member User.

2 - 1. Boot as an anonymous user

An anonymous user is a user without memberId. Below is an example of Boot with an anonymous user and receiving the result value of Boot.

let settings = {
  "pluginKey": YOUR_PLUGIN_KEY
}

ChannelIO.boot(settings).then((result) => {

})

2 - 2 Boot as a member user

A member user is a user with a memberId. If the user can be identified by itself, such as when signed in to your service, You can boot as a member user by giving memberId. The Channel distinguishes a user by the memberId field.

❗️
Use member hash to protect sensitive information of your users
If you set the memberId using predictable values such as user ID or email, an unauthorized third party might acquire your user’s memberId. The unauthorized access might allow the malicious third party to gain your user’s sensitive information, including mobile number and chat logs which can lead to a security breach. Enable member hash for your channel to improve the security level.

Below is an example of boot a member user with a specific memberId .

let settings = {
  "pluginKey": YOUR_PLUGIN_KEY
  "memberId": memberId
  "profile": {
    "name": USER_NAME,
    "mobileNumber": "01012345678"
  }
}

ChannelIO.boot(settings).then((result) => {
})

Showing the Channel button

SDK provides a default Channel button to launch messengers. You can call showChannelButton and hideChannelButton to show or hide Channel buttons.

If you want to change the button’s appearance, see how to customize the Channel button.

ChannelIO.showChannelButton();
ChannelIO.hideChannelButton();

Shutdown

Terminates all features of the SDK. If you want to use the feature of SDK again, you need to Boot again.

ChannelIO.shutdown();

Quickstart

Installation

Installing on iOS

CocoaPods

Carthage

Additional Settings

1. Specify the Swift version

2. Add the permission and description used by SDK.

3. Removing Flipper

Initialize

Installing on Android

MultiDex

Link package & initialize

Using ChannelIO

Step 1. import Framework

Step 2. Boot

2 - 1. Boot as an anonymous user

2 - 2 Boot as a member user

❗️
Use member hash to protect sensitive information of your users

Showing the Channel button

Shutdown

Installation

Installing on iOS

CocoaPods

Carthage

Additional Settings

1. Specify the Swift version

2. Add the permission and description used by SDK.

3. Removing Flipper

Initialize

Installing on Android

MultiDex

Link package & initialize

Using ChannelIO

Step 1. import Framework

Step 2. Boot

2 - 1. Boot as an anonymous user

2 - 2 Boot as a member user

❗️Use member hash to protect sensitive information of your users

Showing the Channel button

Shutdown

❗️
Use member hash to protect sensitive information of your users