REVE Chat’s iOS SDK can be seamlessly integrated with your mobile apps and enable your team deliver in-app messaging to your app users for better engagement and customer support.
This documentation shows you how to embed REVE Chat iOS SDK in an React Native application and get started in a few minutes.
Necessary or minimum requirements:
Xcode 7 or above
iOS 8 or above
React-native environment setup
To integrate React Native iOS SDK with your iOS mobile app, please follow the below mentioned steps:
Go to your projects iOS folder. There you have to update podfile as bellow.
dynamic_frameworks = ['ReveChatSDK','SocketRocket','AFNetworking','GoogleWebRTC']
pre_install do |installer|
installer.pod_targets.each do |pod|
if !dynamic_frameworks.include?(pod.name)
puts "Overriding the static_framework? method for #{pod.name}"
def pod.static_framework?;
true
end
def pod.build_type;
Pod::BuildType.static_library
end
end
end
end
So, an example of your Podfile would eventually look like bellow.
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
platform :ios, min_ios_version_supported
prepare_react_native_project!
use_frameworks!
flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled
target 'AwesomeProject2' do
config = use_native_modules!
flags = get_default_flags()
use_react_native!(
:path => config[:reactNativePath],
:hermes_enabled => flags[:hermes_enabled],
:fabric_enabled => flags[:fabric_enabled],
:flipper_configuration => flipper_config,
:app_path => "#{Pod::Config.instance.installation_root}/.."
)
pod 'ReveChatSDK'
end
dynamic_frameworks = ['ReveChatSDK','SocketRocket','AFNetworking','GoogleWebRTC']
pre_install do |installer|
installer.pod_targets.each do |pod|
if !dynamic_frameworks.include?(pod.name)
puts "Overriding the static_framework? method for #{pod.name}"
def pod.static_framework?;
true
end
def pod.build_type;
Pod::BuildType.static_library
end
end
end
end
The iOS SDK uses the camera and photo library in iOS.
If your app does not already request permissions for these features, you should update your info.plist file with a usage description for NSPhotoLibraryUsageDescription and NSCameraUsageDescription.
*/* You can do this by adding the following lines in your plist source code */*
<key>NSPhotoLibraryUsageDescription</key>
<string><description to use photo library></string>
<key>NSCameraUsageDescription</key>
<string><description to use camera></string>
<key>NSAppTransportSecurity</key> <dict>
<key>NSAllowsArbitraryLoads</key>
<true/></dict>
<key>NSMicrophoneUsageDescription</key>
<string><Add your description here></string>
You have to add this two function definition in Appdelegate.h
- (void) setInitialViewController;
- (void) goToReveChatSDK:(NSString *)accountId userName:(NSString *)userName userEmail:(NSString*)userEmail phone:(NSString*)phone;
- (void) setInitialViewController {
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
self.window.rootViewController = [[UIViewController alloc] init];
[self.window makeKeyAndVisible];
}
- (void) goToReveChatSDK:(NSString *)accountId userName:(NSString *)userName userEmail:(NSString*)userEmail phone:(NSString*)phone {
UIViewController* uvc = [[UIViewController alloc]init];
uvc.view.backgroundColor = [UIColor whiteColor];
UINavigationController* navVC = [[UINavigationController alloc]initWithRootViewController:uvc];
[self.window.rootViewController presentViewController:navVC animated:false completion:NULL];
[[ReveChatManager sharedManager] setupAccountWith:accountId];
[[ReveChatManager sharedManager]
initiateReveChatWith:userName
visitorEmail:userEmail
visitorMobile:phone
onNavigationViewController:navVC];
}
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[self setInitialViewController];
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
Create REVEChatSDKModule.h file and write bellow code:
#import <React/RCTBridgeModule.h>
@interface REVEChatSDKModule : NSObject <RCTBridgeModule>
@end
Create REVEChatSDKModule.m and write bellow code:
#import "REVEChatSDKModule.h"
#import <React/RCTLog.h>
#import "AppDelegate.h"
@implementation REVEChatSDKModule
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(startChat:(NSString *)accountId :(NSString *)userName :(NSString*)userEmail :(NSString*)phone)
{
RCTLogInfo(@"accountId %@, userName %@, userEmail %@, phone %@",accountId, userName, userEmail,phone);
AppDelegate *appDelegate = (AppDelegate *)[UIApplication sharedApplication].delegate;
dispatch_async(dispatch_get_main_queue(), ^{
[appDelegate goToReveChatSDK:accountId userName:userName userEmail:userEmail phone:phone];
});
}
@end
Add following lines from where you want to start the chat (App.tsx file). In this line REVEChatSDKModule.startChat(‘account_id’, ‘user_name’, ‘user@email’, ‘user_phone_number’); change account_id, user_name, user@email and ‘user_phone_number’ to your preferred one.
import React from 'react';
import {
NativeModules
} from 'react-native';
const {REVEChatSDKModule} = NativeModules;
<Button
title="Chat With Us"
onPress={() => {
REVEChatSDKModule.startChat('account_id', 'user_name', 'user@email', 'user_phone_number');
}
} />
export default App;
* Objective c
#import < ReveChatSDK/ReveChatSDK.h>
* swift
import ReveChatSDK
* Objective c
[[ReveChatManager sharedManager]
setupAccountWith:<your account id>];
* swift
/* declare object for reve chat manager class*/
let reveChatManager = ReveChatManager()
reveChatManager.setupAccount(with: <your account id as string> )
* Obj c
[[ReveChatManager sharedManager]
initiateReveChatWith:<visitor name>
visitorEmail:<visitor email>
visitorMobile:<visitor mobile>
onNavigationViewController:<your navigation
controller>];
* Swift
/* initiate the class with name, email , mobile and parent controller of the sdk as parameters*/
reveChatManager.initiateReveChat(with: <visitor name>,
visitorEmail: <visitor email>,
visitorMobile: <visitor mobile>,
onNavigationViewController: <UINavigationController on which you want it to load>)
*To initiate video call.The audio parameter should be false
You can enable the notification when the app is in background mode. Use the below code:
* Objective-c
// In Scenedelegate.h add the following property:
@property (nonatomic,assign) UIBackgroundTaskIdentifier backgroundUpdateTask;
// In Scenedelegate.m add the following function:
-(void) endBackgroundUpdateTask {
[UIApplication.sharedApplication endBackgroundTask:self.backgroundUpdateTask];
self.backgroundUpdateTask = UIBackgroundTaskInvalid;
}
// In Scenedelegate.m’s willConnectToSession function add the bellow line:
self.backgroundUpdateTask = UIBackgroundTaskInvalid;
// In Scenedelegate.m’s sceneDidBecomeActive function add the bellow line:
[self endBackgroundUpdateTask];
// In Scenedelegate.m’s sceneWillResignActive function add the bellow line:
self.backgroundUpdateTask = [UIApplication.sharedApplication beginBackgroundTaskWithExpirationHandler:^{
[self endBackgroundUpdateTask];
}];
// In Scenedelegate.m’s sceneWillEnterForeground function add the bellow line:
[UIApplication sharedApplication].applicationIconBadgeNumber = 0;
* Swift
var backgroundUpdateTask: UIBackgroundTaskIdentifier = UIBackgroundTaskIdentifier(rawValue: 0)
Method name : “sceneDidBecomeActive” or “applicationDidBecomeActive”
self.endBackgroundUpdateTask()
Method name “sceneWillResignActive” or “applicationWillResignActive”
self.backgroundUpdateTask = UIApplication.shared.beginBackgroundTask(expirationHandler: {
self.endBackgroundUpdateTask()
})
func endBackgroundUpdateTask() {
UIApplication.shared.endBackgroundTask(self.backgroundUpdateTask)
self.backgroundUpdateTask = UIBackgroundTaskIdentifier.invalid
}
// In applicationDidBecomeActive function
application.applicationIconBadgeNumber = 0
* Objective c
/* for title while chatting */
[ReveChatManager sharedManager].title = @"me talking";
/* for theme color while chatting */
[ReveChatManager sharedManager].themeColor = [UIColor blueColor];
/* for background color */
[ReveChatManager sharedManager].backgroundColor = [UIColor yellowColor];
/* for navigation bar color */
[ReveChatManager sharedManager].navBarColor = [UIColor orangeColor];
/* for tint color of navigation bar while chatting */
[ReveChatManager sharedManager].headerTintColor = [UIColor whiteColor];
/* for title color while chatting */
[ReveChatManager sharedManager].headerTextColor = [UIColor whiteColor];
/* for incoming chat bubble color */
[ReveChatManager sharedManager].incomingBubbleColor = [UIColor blueColor];
/* for outgoing chat bubble color */
[ReveChatManager sharedManager].outgoingBubbleColor = [UIColor blueColor];
* Swift
/* for title while chatting */
reveChatManager.setChatTitle("Lets chat")
/* for theme color while chatting*/
reveChatManager.themeColor = UIColor.blue
/* for background color*/
reveChatManager.backgroundColor = UIColor.yellow
/* for navigation bar color*/
reveChatManager.navBarColor = UIColor.gray
/* for tint color of header */
reveChatManager.headerTintColor = UIColor.red
/* for title color while chatting*/
reveChatManager.headerTextColor = UIColor.black
/* for incoming chat bubble color*/
reveChatManager.incomingBubbleColor = UIColor.blue
/* for outgoing chat bubble color*/
reveChatManager.outgoingBubbleColor = UIColor.yellow