Installation

Suggest Edits

SDK Latest Version

NPMNPM

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

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 as SWIFT_VERSION and value as 5.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 into Libraries folder in your project. In that case, you need to manually drag and drop RNChannelIO.xcodeproj from your_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.

KeyValue
Privacy - Camera Usage DescriptionAccessing to camera in order to provide better user experience
Privacy - Photo Library Usage DescriptionAccessing to photo library in order to provide better user experience
Privacy - Photo Library Additions Usage DescriptionAccessing to photo library in order to save photos
Privacy - Microphone Usage DescriptionAccessing 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 - Search Library 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)

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 about 1 month ago