The Channel Talk React Native SDK is a plugin facilitating the installation of real-time customer chat into React Native applications. If you intend to install it into a web view or a mobile web, please refer to the JavaScript SDK Installation Guide.

Installation

Execute the following command in the shell to install the SDK.

react-native install react-native-channel-plugin

If you prefer to manually install the package, execute the following two commands in order.

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

Installing on iOS

You can install the SDK through CocoaPods, Carthage.

CocoaPods

You can use CocoaPods to install Channel Talk iOS SDK. The minimum requirements for installation are as follows:

Xcode 12 or later
CocoaPods 1.10.0 or later

Add ChannelIOSDK to the Podfile of the project as follows:

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, modify "latest" in the script to your desired version in the middle of the script. 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
...
}

Run the pod install command in the directory where Podfile is located to install the package.
open Project_Name.xcworkspace.

Carthage

You can utilize Carthage to install Channel Talk iOS 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, modify the script accordingly.

// 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

Execute the carthage update command in the directory where Cartfile is located to install the package. For Example:

carthage update -platform iOS --use-xcframeworks

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

Additional Settings

Several additional settings are required.

1. Specify the Swift version

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

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

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

2. Add the permission and description used by the SDK

The following permissions are required to use the SDK. Add the key value and description below 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 simultaneously. Commenting out or removing Flipper. The example below demonstrates the use of Flipper by commenting it out.

Modify Podfile

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

Modify 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 the modifications, 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 image below.

Initialization

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 shown 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

MultiDex

We recommend configuring themultidex settings to use SDK. Add the following configuration to the android/app/build.gradle file.

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

Linking the Package & Initialization

Link the Channel Talk package and initialize it.

Refer to the example below and 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 Channel Talk

Step 1. Import the Framework

import the SDK wherever you intent to use it.

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

Step 2. Boot

Boot is the preparation process for using the SDK.

You may require 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 a memberId. The following is an example of Boot with an anonymous user and how to receive the Boot result value.

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 property. If the user can be identified independently, such as when signed in to your service, you can boot as a member user by providing a memberId. 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 a user ID or email, an unauthorized third party might acquire your user’s memberId. This unauthorized access might allow the malicious third party to obtain your user’s sensitive information, including their mobile number and chat logs, which could lead to a security breach. Enable member hash for your channel to improve the security level.

The following 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) => {
})

Displaying the Channel Button

The 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 it once more.

ChannelIO.shutdown();