Get Started - iOS
This section will cover a step-by-step approach to bridge your React Native project to PowerTalk iOS SDK. We will be using Xcode to configure native code in the React Native project.
TapTalk.io helps you to implement real-time chat with any type of your client app with speed and efficiency. Our iOS SDK provides you with various methods to initialize, configure, and build the chat from the client-side - no server-side implementation is required because our reliable infra management service is delivered with the SDK. This page presents a brief overview of the SDK’s structure and abilities, then lets you go through the preliminary steps of implementing the SDK in your own app.
2. Click New App Button, input App Name and choose Platform, and then click Create New App Button.
3. A pop-up dialog will be shown with provided App Key ID & App Key Secret
Note: Please remember to save your App Key ID & your App Key Secret because it will only be shown once and will be used in TapTalk.io initialization
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:
$ pod init
Then Podfile will be created in your project directory. Open the Podfile and add the following lines to the Podfile.
Podfile
# Please make sure you define platform on your Podfile
# Make sure to use ios 11.0 for minimum deployment target
platform :ios, '11.0'
use_modular_headers!
target "YourProjectName" do
pod 'TapTalk'
end
Note: For SDK version 1.4.1 and above,
use_frameworks! is replaced with use_modular_headers! to handle some compatibility issues.
For versions below 1.4.1, please replace
use_modular_headers! on the code above with use_frameworks!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 SDKNote: If you are using SDK version lower than 1.4.1 and your podfile has Flipper enabled, disable it by commenting the following lines to enable
use_frameworks!.#use_flipper!
#post_install do |installer|
# flipper_post_install(installer)
#end
Since TapTalk.io use uses
git-lfs (Git Large Files Storage) you will need to install GIT LFS to clone/install TapTalk.io SDK through Cocoapods.Note: Make sure to install
git-lfsbefore pod install, otherwise the pod install / pod update will be error Terminal
brew install git-lfs
git lfs install
Next, after the
git-lfs is installed, install the TapTalk.io through CocoaPods.Terminal
$ pod install
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.
To make sure TapTalk.io has all permission to access the user's media, file, location, and contact, the application needs to ask for permission. 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 words and will be appears when the application needs the permission.
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.
In order to use TapTalk.io, you must first initialize a TapTalk.io instance by passing the
APP_KEY_ID, APP_KEY_SECRET, APP_BASE_URL, and IMPLEMENTATION_TYPE assigned to your application to the initWithAppKeyID:appKeySecret:apiURLString:implementationType: method as a parameter. Generally, initialization is implemented in the appDelegate application:didFinishLaunchingWithOptions: method.Objective-C
AppDelegate.m
//import TapTalk.io
#import <TapTalk/TapTalk.h>
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
//Initialize TapTalk.io
[[TapTalk sharedInstance] initWithAppKeyID:APP_KEY_ID
appKeySecret:APP_KEY_SECRET
apiURLString:APP_BASE_URL
implementationType:IMPLEMENTATION_TYPE];
}
...
@end
Parameters
APP_KEY_ID: (String) application key ID
APP_KEY_SECRET: (String) application key Secret
APP_BASE_URL: (String) base API URL
IMPLEMENTATION_TYPE: (enum) found in TapTalkImplentationType, more detailed information below
IMPLEMENTATION_TYPE
TapTalkImplementationType consists of 3 types which are:
TapTalkImplementationTypeUI: used for implementation with only TapUI
TapTalkImplementationTypeCore: used for implementation with only TapCore
TapTalkImplementationTypeCombine: used for implementation with both of TapCore and TapUI combinedNote: In the Event Delegate page, you can find detailed information on the usages of TapTalk iOS SDK's delegates and callbacks.
You may also call
initWithAppKeyID:appKeySecret:apiURLString:implementationType:success: to obtain callback once the initialization is finished.Objective-C
AppDelegate.m
//import TapTalk.io
#import <TapTalk/TapTalk.h>
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
//Initialize TapTalk.io
[[TapTalk sharedInstance] initWithAppKeyID:APP_KEY_ID
appKeySecret:APP_KEY_SECRET
apiURLString:APP_BASE_URL
implementationType:IMPLEMENTATION_TYPE
success:^{
// Initialization finished
}];
}
...
@end
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. You can follow the instructions in Implement Application Delegate page.
In order to use the abilities of the iOS SDK in your client app, a TapTalk instance must be initiated in each client app through user authentication with TapTalk.io server. An authenticated user account allows the instance to communicate and interact with the server. To authenticate your user with the server, follow the instructions in Authentication page.
To enable location search result preview while sending location message, a Google Places API Key is required. To obtain the API key for your application, you can check the documentation provided by Google. To initialize, insert your obtained key using the
initializeGooglePlacesApiKey() method.Objective-C
#import <TapTalk/TapTalk.h>
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
//Initialize Google Places API Key
[[TapTalk sharedInstance] initializeGooglePlacesAPIKey:GOOGLE_PLACES_API_KEY];
}
Parameters
GOOGLE_PLACES_API_KEY: (String) Google Places API Key
After the configurations above are completed, we will add a method named
navigateToPowerTalk in the project's AppDelegate to navigate to PowerTalk chat view. Open your AppDelegate.m file and add the following:AppDelegate.m
@interface AppDelegate () <TapTalkLiveDelegate>
// 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:@"PowerTalkReactNative"
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];
[[TapTalk sharedInstance] initWithAppKeyID: ... ];
NSSetUncaughtExceptionHandler(&handleExceptions);
return YES;
}
...
// Method to open chat view
- (void)navigateToPowerTalk {
//Initialize TapTalk.io room list view controller here
TAPRoomListViewController *roomListViewController = [[TapUI sharedInstance] roomListViewController];
UINavigationController *roomListNavigationController = [[UINavigationController alloc] initWithRootViewController:roomListViewController];
//Present room list view
[self presentViewController:roomListViewController animated:YES completion:^{
//completion
}];
}
@end
Then open your AppDelegate.h file and add the following lines to enable the previously created method to be called from another file.
AppDelegate.h
@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
- (void)navigateToPowerTalk;
...
@end
We will name this file PowerTalkStarterModule. Select NSObject as the subclass and Objective-C as the language, then press Next, and press Create on the next window.
Two files named PowerTalkStarterModule.h and PowerTalkStarterModule.m will be generated in your project folder. First, open PowerTalkStarterModule.h and update its contents with the following:
PowerTalkStarterModule.h
#import <React/RCTBridgeModule.h>
NS_ASSUME_NONNULL_BEGIN
@interface PowerTalkStarterModule : NSObject <RCTBridgeModule>
@end
NS_ASSUME_NONNULL_END
Then open the PowerTalkStarterModule.m file and modify it like below:
PowerTalkStarterModule.m
#import "PowerTalkStarterModule.h"
#import "AppDelegate.h"
@implementation PowerTalkStarterModule
RCT_EXPORT_MODULE(PowerTalkStarter);
RCT_EXPORT_METHOD(navigateToPowerTalk)
{
dispatch_async(dispatch_get_main_queue(), ^{
AppDelegate *appDelegate = (AppDelegate *) [UIApplication sharedApplication].delegate;
[appDelegate navigateToPowerTalk];
});
}
RCT_EXPORT_METHOD(getActivityName:(RCTResponseSenderBlock) callback)
{
callback(@[@"PowerTalkStarter (callback)"]);
}
@end
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.
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
navigateToPowerTalk() method to open PowerTalk chat view. In order to access your native module from JavaScript you need to first import
NativeModules from React Native:import { NativeModules } from 'react-native';
You can then invoke the native method
navigateToPowerTalk() to open PowerTalk chat view. Here we will be using a button's onPress() method as an example.<Button
onPress={() => NativeModules.PowerTalkStarter.navigateToPowerTalk()}
title='Launch PowerTalk'
/>
Last modified 9mo ago