# Get Started - iOS {% hint style="warning" %} **Before you get started:** Make sure you have [**created a channel in OneTalk dashboard**](/onetalk-omnichannel-documentation/onetalk-channel-integration/live-chat.md#setup-live-chat-for-ios) and obtain the **`APP_KEY_SECRET.`**` ` {% endhint %} ### 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](https://cocoapods.org/) like the following. If you are new to CocoaPods, you can see more information in [Cocoapods guides](https://guides.cocoapods.org/using/getting-started.html). 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: ``` $ pod init ``` Then **Podfile** will be created in your project directory. Open the **Podfile** and add the following lines to the **Podfile**. ```ruby # Please make sure you define platform on your Podfile # Make sure to use ios 11.0 for minimum deployment target platform :ios, '11.0' target "YourProjectName" do ... pod 'TapTalkLive' pod 'JSONModel', '1.8.0', :modular_headers => true endru ``` {% hint style="warning" %} **Note**: **For SDK version 1.1.0 and above, remove****`use_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!`** {% endhint %} {% hint style="warning" %} **Note:** Please make sure you implement ios version 11.0`platform :ios, '11.0'` for minimum deployment target to obtain latest update of TapTalk.io SDK {% endhint %} {% hint style="warning" %} **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!`. {% endhint %} ``` #use_flipper! #post_install do |installer| # flipper_post_install(installer) #end ``` 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: ```bash $ pod install ``` #### 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. | {% hint style="info" %} **Note**: You can change **Information Property Value** based on your own preferences. These values will appear when the application requests permission from the user. {% endhint %} ![Adding new key in info.plist](/files/-LzpjgZSXJKtiMFJ6Edq) #### 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](/onetalk-omnichannel-documentation/onetalk-channel-integration/live-chat/onetalk-ios/background-process-in-taptalklive-ios.md). To enable **background modes**, go to **Target** -> **Capabilities**, then turn **Background Modes** toggle to **ON**, next select **Background fetch** and **Remote notifications** ![](/files/-Lzpk4nGaQ8fBhUqHqNN) After you turn on the **Background Modes**, **Required background modes** key will be added automatically in your **Info.plist** as shown below. ![](/files/-LzpkK_5kgOcDdlpGK5k) #### #### 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. | {% code title="AppDelegate.m" %} ```csharp @interface AppDelegate () @end ... - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Implement TapTalk Omnichannel didFinishLaunchingWithOptions here [[TapTalkLive sharedInstance] application:application didFinishLaunchingWithOptions:launchOptions]; // Other code ... return YES; } ``` {% endcode %} {% code title="AppDelegate.m" %} ```csharp - (void)applicationWillResignActive:(UIApplication *)application { // Implement TapTalk Omnichannel applicationWillResignActive here [[TapTalkLive sharedInstance] applicationWillResignActive:application]; // Other code ... } ``` {% endcode %} {% code title="AppDelegate.m" %} ```csharp - (void)applicationDidEnterBackground:(UIApplication *)application { // Implement TapTalk Omnichannel applicationDidEnterBackground here [[TapTalkLive sharedInstance] applicationDidEnterBackground:application]; // Other code ... } ``` {% endcode %} {% code title="AppDelegate.m" %} ```csharp - (void)applicationWillEnterForeground:(UIApplication *)application { // Implement TapTalk Omnichannel applicationWillEnterForeground here [[TapTalkLive sharedInstance] applicationWillEnterForeground:application]; // Other code ... } ``` {% endcode %} {% code title="AppDelegate.m" %} ```csharp - (void)applicationDidBecomeActive:(UIApplication *)application { // Implement TapTalk Omnichannel applicationDidBecomeActive here [[TapTalkLive sharedInstance] applicationDidBecomeActive:application]; // Other code ... } ``` {% endcode %} {% code title="AppDelegate.m" %} ```csharp - (void)applicationWillTerminate:(UIApplication *)application { // Implement TapTalk Omnichannel applicationWillTerminate here [[TapTalkLive sharedInstance] applicationWillTerminate:application]; // Other code ... } ``` {% endcode %} You have to add below code `NSSetUncaughtExceptionHandler(&handleExceptions);` in `application:didFinishLaunchingWithOptions:`method to register uncaught exception handler and add delegate function `handleExceptions`. {% code title="AppDelegate.m" %} ```csharp - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Register Uncaught Exception Handler NSSetUncaughtExceptionHandler(&handleExceptions); } // Add delegate function to handle exceptions - (void)handleExceptions:(NSException *exception) { // Implement TapTalk Omnichannel handleException method [[TapTalkLive sharedInstance] handleException:exception]; } ``` {% endcode %} {% hint style="warning" %} **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. {% endhint %} #### 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. {% code title="AppDelegate.m" %} ```csharp // Import TapTalk.io Omnichannel #import @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [[TapTalkLive sharedInstance] initWithSecretKey:APP_KEY_SECRET]; } ... @end ``` {% endcode %} {% hint style="info" %} **Parameters**\ \&#xNAN;**`APP_KEY_SECRET`**: (String) application key Secret {% endhint %} #### **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: {% code title="AppDelegate.m" %} ```csharp @interface AppDelegate () // Add a UINavigationController variable @property (strong, nonatomic) UINavigationController *navigationController; @end @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [[TapTalkLive sharedInstance] application:application didFinishLaunchingWithOptions:launchOptions]; RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"TapLiveReactNative" initialProperties:nil]; rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; _window = [[UIWindow alloc] initWithFrame:CGRectMake(0.0f, 0.0f, CGRectGetWidth([UIScreen mainScreen].bounds), CGRectGetHeight([UIScreen mainScreen].bounds))]; // Initialize navigation controller UIViewController *rootViewController = [[UIViewController alloc] init]; rootViewController.view = rootView; _navigationController = [[UINavigationController alloc] initWithRootViewController:rootViewController]; [self.navigationController setNavigationBarHidden:YES animated:YES]; self.window.rootViewController = self.navigationController; [self.window makeKeyAndVisible]; [[TapTalkLive sharedInstance] initWithSecretKey:SECRET_KEY]; NSSetUncaughtExceptionHandler(&handleExceptions); return YES; } ... // Method to open live chat view - (void)navigateToOneTalk { [[TapTalkLive sharedInstance] presentTapTalkLiveViewWithCurrentNavigationController:self.navigationController animated:ANIMATED]; } @end ``` {% endcode %} {% hint style="info" %} **Parameters**\ \&#xNAN;**`NAVIGATION_CONTROLLER`**: (UINavigationController) your current active navigation controller\ \&#xNAN;**`ANIMATED`**: (BOOL) boolean to state if view controller transition animation is enabled {% endhint %} Then open your **AppDelegate.h** file and add the following lines to enable the previously created method to be called from another file. {% code title="AppDelegate.h" %} ```csharp @interface AppDelegate : UIResponder - (void)navigateToOneTalk; ... @end ``` {% endcode %} #### **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*. ![](/files/-MQVl_r0_RWRtI1q-jAY) 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. ![](/files/-MQVlgXuM0EopSWNFdmC) 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: {% code title="OneTalkStarterModule.h" %} ```csharp #import NS_ASSUME_NONNULL_BEGIN @interface OneTalkStarterModule : NSObject @end NS_ASSUME_NONNULL_END ``` {% endcode %} Then open the *OneTalkStarterModule.m* file and modify it like below: {% code title="OneTalkStarterModule.m" %} ```csharp #import "OneTalkStarterModule.h" #import "AppDelegate.h" @implementation OneTalkStarterModule RCT_EXPORT_MODULE(OneTalkStarter); RCT_EXPORT_METHOD(navigateToOneTalk) { dispatch_async(dispatch_get_main_queue(), ^{ AppDelegate *appDelegate = (AppDelegate *) [UIApplication sharedApplication].delegate; [appDelegate navigateToOneTalk]; }); } RCT_EXPORT_METHOD(getActivityName:(RCTResponseSenderBlock) callback) { callback(@[@"OneTalkStarter (callback)"]); } @end ``` {% endcode %} {% hint style="info" %} **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. {% endhint %} #### 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: ```javascript 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. ```javascript