React Native

Website Guide & Tutorial Blog Book a Demo
Search…
React Native
AcquireIO Support SDK
There are 2 variants for this SDK
1) AcquireIO support (Core) for real-time chat and audio/video calls. 
2) AcquireIO support (Lite) for real-time chat.
Note: Lite version supports only chat feature. To use audio/video calls, Core version is available.
This guide describes the process of implementing AcquireIOSupport SDK into your React-Native app.
You can refer react-native-doc to use Native components.
We recommend using CocoaPods as the most advanced way of managing iOS project dependencies.
Installation
AcquireIOSupport SDK is the same as any other third-party native library.
To connect AcquireIOSupport SDK to your app just add it into your Podfile:
Step 1. Create a Podfile in your project's root directory, if it doesn't exist yet.
Step 2. Add below lines at top of your podfile
1
require_relative '../node_modules/react-native/scripts/react_native_pods'
2
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
Copied!
Step 3.
AcquireIOSupport-Core : Podname to add Core SDK to your project
AcquireIOSupport-Lite : Podname to add Lite SDK to your project
Add podname to Podfile as per requirement under your desired target. It must look like below:
1
  target 'YourTargetName' do
2
  config = use_native_modules!
3
​
4
  # NOTE: For AcquireIOSupport-Core require dynamic frameworks
5
  use_frameworks!
6
  pod 'AcquireIOSupport-Core'
7
​
8
  use_react_native!(
9
     :path => config[:reactNativePath],
10
     # to enable hermes on iOS, change `false` to `true` and then install pods
11
     :hermes_enabled => false
12
   )
13
​
14
  end
Copied!
Note: use_frameworks! is required to import any dynamic framework.
Step 4. The AcquireIOSupport SDK supports module stability and therefore all its dependencies must be built-in with the "Build Libraries for Distribution" setting enabled, however this is not currently supported in Cocoapods. Running the below command will ensure Xcode builds the dependencies with the correct settings. Once Cocoapods supports module stability, this workaround can be removed.
Add the following at the end of your Podfile:
1
 post_install do |installer|
2
    react_native_post_install(installer)
3
​
4
     installer.pods_project.targets.each do |target|
5
       target.build_configurations.each do |config|
6
         config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
7
         config.build_settings['ENABLE_BITCODE'] = 'NO'
8
       end
9
​
10
     if (target.name&.eql?('FBReactNativeSpec'))
11
       target.build_phases.each do |build_phase|
12
         if (build_phase.respond_to?(:name) && build_phase.name.eql?('[CP-User] Generate Specs'))
13
           target.build_phases.move(build_phase, 0)
14
         end
15
       end
16
     end
17
   end
18
 end
Copied!
4) Run the below command to install the SDK to your project
1
      $ pod install --repo-update
Copied!
5) Open your project using the generated *.xcworkspace file.
Note: If you are new to CocoaPods, go to CocoaPods to learn how to install it.
Make sure to always open the Xcode workspace instead of the project file when building your project:
1
open YourTargetName.xcworkspace
Copied!
Setup Info.plist
Since iOS 10, it's mandatory to add before you access privacy-sensitive data like Camera, Microphone, and so on, you must ask for the authorization, or your app will crash when you access them.
Open the file in your project named info.plist, right-click it, opening as Source Code, paste the below code to it. Or you can open info.plist as Property List by default, click the add button, Xcode will give you the suggested completions while typing Privacy - with the help of keyboard and
Remember to write your description of why you ask for this authorization, between <string> and </string>, or your app will be rejected by Apple:
1
<!-- Camera -->
2
<key>NSCameraUsageDescription</key>
3
<string>$(PRODUCT_NAME) uses camera for video chat</string>
4
​
5
<!-- Microphone -->
6
<key>NSMicrophoneUsageDescription</key>
7
<string>$(PRODUCT_NAME) uses microphone for voice chat</string>
8
​
9
<!-- Photo Library -->
10
<key>NSPhotoLibraryUsageDescription</key>
11
<string>$(PRODUCT_NAME) send photo/video to agent</string>
Copied!
Also, The AcquireIOSupport SDK uses a background mode Audio when you are video/voice call to agent/visitor. If you have not enabled it, the background voice will not work. When the UIBackgroundModes key contains the audio value, the system’s media frameworks automatically prevent the corresponding app from being suspended when it moves to the background
To allow your AcquireIOSupport SDK to play audio in the background, Enable it using the below steps 1) Select your project file in the Navigator of Xcode. 2) From the Capabilities section, switch on the Background Modes subsection 3) Switch ON the Background Modes subsection. After background modes are listed, tick on the Audio, Airplay & picture in the picture
Background Mode
Setup and installation
To import SDK to your project, add the below lines to your App.js
1
//Native modules
2
import {NativeModules} from 'react-native';
3
//Destructuring AcquireIO Setup from NativeModules
4
const {AcquireIOSetup} = NativeModules;
Copied!
And to use in your FILENAME.m file, add
1
#import <AcquireIOSupport/AcquireIOSupport.h>
Copied!
To initialize SDK, call
1
    AcquireIOSetup.initAcquireIO()
Copied!
Your FILENAME.m should look like:
1
#import "AcquireIOSetup.h"
2
#import <React/RCTLog.h>
3
​
4
@implementation AcquireIOSetup
5
​
6
RCT_EXPORT_MODULE(); // Use "AcquireIOSetup" as module's name
7
​
8
​
9
RCT_EXPORT_METHOD(initAcquireIO) {
10
​
11
  RCTLogInfo(@"Init AcquireIO");
12
​
13
  dispatch_async(dispatch_get_main_queue(), ^{
14
​
15
    //Config option
16
    NSDictionary *option = @{
17
                             @"ShowChatButton": @YES,
18
                             @"SessionConnectAndStartAuto":@YES  //@NO for manually start socket connection
19
                           };
20
​
21
    AcquireIOConfig *config = [AcquireIOConfig config];
22
    [config setDict:option];
23
​
24
    #warning(@"TODO: Add your ACCOUNT_ID (for example, xo3t0x)")
25
    [[AcquireIO support] setAccount:@"ACCOUNT_ID" withOptions:config];
26
​
27
    //[[AcquireIO support] startSession]; for manually start socket connection
28
​
29
  });
30
​
31
}
32
​
33
@end
Copied!
To know more about customization of AcquireIOSupport chat theme, Go to Theme Customization.
To know more about initialization methods, click here.
For AcquireIOSupport delegate methods, Go to Delegate Methods.
Demo App
Check out our React-native demo app here.
Contact us
We're only a message away!. Feel free to contact us on AcquireIO Support for any queries you may have.
Widget customization
Next - SDK
Android
Last modified 9mo ago
Copy link
Contents
AcquireIO Support SDK
Setup and installation
Demo App