Installation
SDK Latest Version
To use ChannelIO
in react native, we recommend to run the following command:
react-native install react-native-channel-plugin
If you want to install manually, then run following two commands:
npm install react-native-channel-plugin
react-native link react-native-channel-plugin
This guide is created based on the most recent react-native (0.60.5). Some configuration might be different for prior versions
iOS
Cocoapods
Requirements
- Xcode 12
- CocoaPods >= 1.10.0.rc.1
CocoaPods version on Xcode12
Please make sure you have a CocoaPods version >=1.10.0.rc.1 installed.
You can check your version of CocoaPods with pod --version
Dependencies installation
If you are using Cocoapods
to handle react-native dependencies, make sure you adjust your Podfile
as shown below (you can skip this step if you already set up react-native for pods). Notice that react-native install
command will automatically insert RNChannelIO
and ChannelIOSDK
into your Podfile
.
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
platform :ios, '11.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
use_modular_headers!
target 'YourApplicationName' do
# Pods for examples
pod 'React', :path => '../node_modules/react-native/', :modular_headers => false
pod 'React-Core', :path => '../node_modules/react-native/React', :modular_headers => false
pod 'React-DevSupport', :path => '../node_modules/react-native/React', :modular_headers => false
pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS', :modular_headers => false
pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation', :modular_headers => false
pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob', :modular_headers => false
pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image', :modular_headers => false
pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS', :modular_headers => false
pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network', :modular_headers => false
pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings', :modular_headers => false
pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text', :modular_headers => false
pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration', :modular_headers => false
pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket', :modular_headers => false
pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact', :modular_headers => false
pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi', :modular_headers => false, :modular_headers => false
pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor', :modular_headers => false
pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector', :modular_headers => false
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga', :modular_headers => false
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec', :modular_headers => false
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec', :modular_headers => false
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec', :modular_headers => false
pod 'RNChannelIO', :path => '../node_modules/react-native-channel-plugin', :modular_headers => true
pod 'RNCPushNotificationIOS', :path => '../node_modules/@react-native-community/push-notification-ios', :modular_headers => false
target 'YourApplicationNameTests' do
inherit! :search_paths
# Pods for testing
end
use_native_modules!
end
Using react-native-channel-io 0.7.0 to 0.7.2
If you are using 0.7.0 to 0.7.3, you should use ChannelIOSDK 10.0.0 to 10.0.1 via the method in the link.
then run
pod install
This command will install all pods into your workspace.
Configure settings
React-native ios project is a pure objective-c project. So you will need to do some configuration in your target's build settings:
- Add
User-Defined Setting
: key asSWIFT_VERSION
and value as5.0
RN 0.63 or higher
- Add empty
.swift
file and bridge header file This is due to the dependency ChannelIO uses is not ready for swift 5 yet.
RN 0.62 or lower
- Option 1. Add empty
.swift
file and bridge header file This is due to the dependency ChannelIO uses is not ready for swift 5 yet. Once it becomes available, you can choose option 2 and remove dummy swift file and bridge header file.)
file. - Option 2. if RN 0.62 or lower, Add
$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)
to the Library search paths. Additionally, add/usr/lib/swift
to the Runpath search path and place it first
Carthage
Make sure you execute either react-native install react-native-channel-plugin
. You can confirm this by locating RNChannelIO.xcodeproj
at your project navigation.
Mixing with Cocoapods and Carthage
If you happen to install ChannelIO with carthage and other dependencies with cocoapods,
react-native install react-native-channel-plugin
won't automatically insert sub-project intoLibraries
folder in your project. In that case, you need to manually drag and dropRNChannelIO.xcodeproj
fromyour_project/node_modules/react-native-channel-plugin/ios


Dependencies installation
Add binary "https://mobile-static.channel.io/ios/latest/channeliosdk-ios.json"
in your Cartfile
and running carthage update --platform iOS --no-use-binaries
will download and build necessary frameworks for ChannelIO
.
Drag the binaries from Carthage/Build/ into your application’s Xcode project.
Add permissions
ChannelIO
requires the following permissions to provide rich user experiences. Please insert the following items into info.plist
of your application.
Key | Value |
---|---|
Privacy - Camera Usage Description | Accessing to camera in order to provide better user experience |
Privacy - Photo Library Usage Description | Accessing to photo library in order to provide 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 |
Initialize in native code
Finally, one last step requires to make ChannelIO
work properly. Go to AppDelegate
file and add the code below
Package has changed.
The package has changed in ChannelIO 9.1.0.
If react-native-channel-io is 0.6.5 or higher, update the channel-io version and refer to the code below.
#import <ChannelIOFront/ChannelIOFront-swift.h>
@interface AppDelegate ()
@end
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[ChannelIO initialize:application];
return YES;
}
@import ChannelIO;
@interface AppDelegate ()
@end
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[ChannelIO initialize:application];
return YES;
}
Initialization On SceneDelegate
Initialization(On SceneDelegate)
After initialization on AppDelegate,
If you use SceneDelegate, you must call 'initialzeWindow' method on willConnectTo of SceneDelegate with 'strong variable'.
(support ChannelIO version >= 7.0.8)
// 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
Remove Flipper
Currently, Flipper and ChannelIO are crashing.
We are solving the problem, please use without Flipper until the problem is solved.
# use_flipper!
# post_install do |installer|
# flipper_post_install(installer)
# end
// 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
...
}
Project
-Build Settings
- SearchLibrary Search Paths
and double click - Delete'$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)'
- If it is not in the Build Settings of the project, check it in the Build Setting of the target and delete it.
Android
MultiDex
ChannelIO
requires you to set up multidex
setting on your application. Add the following to android/app/build.gradle
(you can skip this step if you already set up multidex
)
Please check the Google guide for details.
android {
...
defaultConfig {
multiDexEnabled true
}
...
}
Link package & Initialize
You should also link the package and initialize ChannelIO
. Add the following to android/app/src/main/java/**/MainApplication.java
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
First of all, you need to obtain a pluingKey
from Channel Desk. If you still do not have a pluginKey
, please read this. With this key, you can start to use ChannelIO in your application immediately by using boot:
method. You can either start ChannelIO with anonymous user or registered user.
Import framework
First of all, import ChannelIO
into a file where you want to use.
import { ChannelIO } from 'react-native-channel-plugin';
Start with an anonymous user
In order to boot with an anonymous user, you need to create a ChannelPluginSettings
object and set its pluginKey
property with the pluginKey
you obtain from Channel Desk. That's it! If you follow steps correctly, you will see the ChannelIO launcher button on your application.
let settings = {
"pluginKey": YOUR_PLUGIN_KEY
}
ChannelIO.boot(settings).then((result) => {
})
Start with a registered user
Starting with a registered user isn't much different than an anonymous user. The difference is you only need to provide a memberId
in ChannelPluginSettings
object.
Please set
memberId
when you are integrating for registered users.We distinguish anonymous users and registered users based on
memberId
property in ChannelPluginSettings.
Conversation from an anonymous user to a registered user will not be interlinked
Anonymous user conversations and registered use conversations are not interlinked because they are difficult to logically combine. Please contact the development team if you need to have interworking.
You can pass any other information about the user into Profile
object if you want (please refer Profile)
let settings = {
"pluginKey": YOUR_PLUGIN_KEY
"memberId": memberId
"profile": {
"name": USER_NAME,
"mobileNumber": "01012345678"
}
}
ChannelIO.boot(settings).then((result) => {
})
Channel button visibility
We provide the default launcher and its visibility can be controlled by calling showChannelButton, hideChannelButton methods. You have to configure its visibility based on your view if you only want to display it on certain views.
ChannelIO.showChannelButton();
ChannelIO.hideChannelButton();
Shutdown
To terminate ChannelIO
(typically when a user logout from your application), simply call
ChannelIO.shutdown();
Updated 1 day ago