Get Started - iOS
This section will cover a step-by-step approach to bridge your React Native project to OneTalk Live Chat iOS SDK. We will be using Xcode to configure native code in the React Native project.
Before you get started: Make sure you have created a channel in OneTalk dashboard and obtain the APP_KEY_SECRET.
Configure and Initialize TapTalk.io Omnichannel iOS SDK for React Native project
Step 1: Install TapTalk.io Omnichannel iOS SDK with CocoaPods
You can install the TapTalk.io Omnichannel iOS SDK using CocoaPods like the following. If you are new to CocoaPods, you can see more information in Cocoapods guides. First, navigate to the ios folder of your React Native project directory, and check if a file named Podfile exists. If there is no Podfile in the ios folder, we will create a new one using terminal. Open a terminal window and navigate to the ios directory of your React Native project, then create a Podfile by running the following command in the terminal:
Then Podfile will be created in your project directory. Open the Podfile and add the following lines to the Podfile.
Note: For SDK version 1.1.0 and above, removeuse_frameworks!
and add additional pod implementation with modular headers to handle some compatibility issues.
For versions below 1.1.0, please remove pod 'AFNetworking
' and pod 'JSONModel'
implementation on the code above with use_frameworks!
Note: Please make sure you implement ios version 11.0platform :ios, '11.0'
for minimum deployment target to obtain latest update of TapTalk.io SDK
Note: If you are using SDK version lower than 1.1.0 and your podfile has Flipper enabled, disable it by commenting the following lines to enable use_frameworks!
.
Next, open your terminal window and move to the ios directory of your React Native project, then install the updated pod by running this command in your terminal:
Step 2: Open React Native project's ios workspace in Xcode
After the pod has finished installing, navigate to the ios folder inside your React Native project root folder and locate a file named YourProjectName.xcworkspace, then open this file with Xcode. We will follow the next steps by configuring the project from Xcode.
Step 3: Grant permission in your application project
To make sure TapTalk.io Omnichannel iOS have all permission to access user's media, file, location, and contact, the application needs to ask for permissions. Go to your info.plist, and add the following key-value pairs.
Information Property Key
Information Property Value
Privacy - Camera Usage Description
$(PRODUCT_NAME) needs to request access to your camera to take profile picture and to send image chat.
Privacy - Contacts Usage Description
$(PRODUCT_NAME) need your permission to access your contact, we will sync your contact to our server and automatically find your friend so it is easier for you to find your friends.
Privacy - Photo Library Additions Usage Description
$(PRODUCT_NAME) needs to request access to your photo library to save photo.
Privacy - Photo Library Usage Description
$(PRODUCT_NAME) needs to request access to your photo library to take profile picture and to send image chat.
Privacy - Location When In Use Usage Description
$(PRODUCT_NAME) needs to request access to your location to send location chat.
Note: You can change Information Property Value based on your own preferences. These values will appear when the application requests permission from the user.
Step 4: Enable background modes
Background modes is required to handle background process in TapTalk.io. It is used to run some processes in the background before the app is killed. For more information about the processes, check out the background process section.
To enable background modes, go to Target -> Capabilities, then turn Background Modes toggle to ON, next select Background fetch and Remote notifications
After you turn on the Background Modes, Required background modes key will be added automatically in your Info.plist as shown below.
Step 5: Initialize TapTalk.io Omnichannel Application Delegate
To allow the iOS SDK to respond to the connection and state changes in your iOS client app, you have to implement all of our application delegate methods in your UIApplicationDelegate
methods in appDelegate file.
After you initialize the TapTalk.io Omnichannel, you have to connect and implement these methods in your UIApplicationDelegate
methods in appDelegate file to make sure TapTalk.io Omnichannel runs smoothly in your application.
TapTalk.io Omnichannel Application Delegate Method
Description
application:didFinishLaunchingWithOptions:
Tells the delegate that the launch process is almost done and the app is almost ready to run.
applicationWillResignActive:
Tells the delegate that the app is about to become inactive.
applicationDidEnterBackground:
Tells the delegate that the app is now in the background.
applicationWillEnterForeground:
Tells the delegate that the app is about to enter the foreground.
applicationDidBecomeActive:
Tells the delegate that the app has become active.
applicationWillTerminate:
Tells the delegate when the app is about to terminate.
handleException:
Tells the delegate when application throws exception.
You have to add below code NSSetUncaughtExceptionHandler(&handleExceptions);
in application:didFinishLaunchingWithOptions:
method to register uncaught exception handler and add delegate function handleExceptions
.
Note: Don't forget to register for exception handler inside application:didFinishLaunchingWithOptions:
method and implement handleExceptions
method in appDelegate class to make sure TapTalk.io Omnichannel SDK is able to handle exceptions.
Step 6: Initialize TapTalk.io Omnichannel iOS in your application class
In order to use TapTalk.io Omnichannel, you must first initialize an instance by passing the APP_KEY_SECRET
and API_BASE_URL
assigned to your application to the initWithSecretKey:
method as a parameter. Generally, initialization is implemented in the appDelegate application:didFinishLaunchingWithOptions:
method.
Parameters
APP_KEY_SECRET
: (String) application key Secret
Step 7: Create a method in AppDelegate to navigate to OneTalk Live Chat View
After the configurations above are completed, we will add a method named navigateToOneTalk
in the project's AppDelegate to navigate to OneTalk Live Chat view. Open your AppDelegate.m file and add the following:
Parameters
NAVIGATION_CONTROLLER
: (UINavigationController) your current active navigation controller
ANIMATED
: (BOOL) boolean to state if view controller transition animation is enabled
Then open your AppDelegate.h file and add the following lines to enable the previously created method to be called from another file.
Step 8: Create module file in the project folder
We will create a module file that contains a react method to open OneTalk live chat view from your React Native app. To create a new file, check the left panel on your Xcode and make sure the Project Navigator tab (folder icon) is active. Then right click on YourProjectName folder (expanded from YourProjectName.xcodeproj), and select New File.
Select Cocoa Touch Class, then press Next.
We will name this file OneTalkStarterModule. Select NSObject as the subclass and Objective-C as the language, then press Next, and press Create on the next window.
Two files named OneTalkStarterModule.h and OneTalkStarterModule.m will be generated in your project folder. First, open OneTalkStarterModule.h and update its contents with the following:
Then open the OneTalkStarterModule.m file and modify it like below:
RCT_EXPORT_MODULE exposes this module to react via a compile time macro.
RCT_EXPORT_METHOD will enable the method to be invoked from javascript of a React Native app.
Step 9. Open OneTalk Live Chat View
Once the module set up is done, you can find a place in your application where you would like to add a call to the native module’s navigateToOneTalk()
method to open OneTalk Live Chat view.
In order to access your native module from JavaScript you need to first import NativeModules
from React Native:
You can then invoke the native method navigateToOneTalk()
to open OneTalk Live Chat view. Here we will be using a button's onPress()
method as an example.
Note: You can check a more complete implementation guide in the OneTalk Live Chat for iOS section.
Last updated