Quickstart
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 thepod 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 thecartharge 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 to5.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’smemberId
. 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();
Updated 4 months ago