React Native for Android

Contact Center AI Platform (CCAI Platform) provides integration with mobile applications using a number of methods including React. This document explains how to integrate React Native for Android.

Before following these Android-specific instructions, complete the instructions at React Native for Mobile SDK.

Integrate the SDK into Android

To integrate the SDK into Android, follow these steps:

1. Add the following code inside <application> of the AndroidManifest.xml file:

   <application>
   <activity
   android:name="co.ujet.android.activity.UjetActivity"
   android:exported="true">
   <intent-filter>
   <actionandroid:name="android.intent.action.VIEW"/>
   <categoryandroid:name="android.intent.category.DEF```AULT"/>
   <categoryandroid:name="android.intent.category.BROWSABLE"/>
   <data
   android:host="com.sampleapp"
   android:path="/smartchannel"
   android:scheme="ujet"/>
   </intent-filter>
   </activity>
   <meta-data
   android:name="co.ujet.android.companyKey"
   android:value="@string/ujet_company_key"/>
   <meta-data
   android:name="co.ujet.android.companyName"
   android:value="@string/ujet_company_name"/>
   <meta-data
   android:name="co.ujet.android.subdomain"
   android:value="@string/ujet_subdomain"/>
   <meta-data
   android:name="co.ujet.android.companyUrl"
   android:value="@string/ujet_company_url"/>
   </application>
   

2. Update android/build.gradle.

   allprojects {
    repositories {
    google()
    mavenCentral()
    maven {
    url "https://sdk.ujet.co/android/"
    }
    }
   }
   

3. Update android/app/build.gradle.

   defujetSdkVersion="x.y.z"
   implementation"co.ujet.android:ujet-android:$ujetSdkVersion"
   implementation"co.ujet.android:cobrowse:$ujetSdkVersion"
   }
   

4. Run res/values/strings.xml.

   <resources>
   <stringname="ujet_company_key">YOUR_COMPANY_KEY</string>
   <stringname="ujet_company_name">YOUR_COMPANY_NAME</string>
   <!--Ifyourtenant/portalurlendswith"ujet.co"thensetujet_subdomainstringonly(ignore
   ujet_company_url),otherwisesetujet_company_urlonly(ignoreujet_subdomain)followingbelowinstructions.-->
   <!--Togetsubdomain,extractstringcontentbetween'https://'andfirst'.'ofyourtenant/portalURL.
   Example,Ifyourtenanturlishttps://XXX.YYY.ZZZ/thensubdomainwillbeXXX-->
   <stringname="ujet_subdomain">YOUR_SUBDOMAIN</string>
   <!--Usetenanturlascompanyurlhere,itshouldbeinformatofhttps://XXX.YYY.ZZZ/api/v2
   (hereXXXshouldmatchwithyoursubdomain)-->
   <stringname="ujet_company_url">YOUR_COMPANY_URL</string>
   </resources>
   

5. Download the google-service.json file and put it inside of your project at the following location: /android/app/google-services.json

Register the module

For more information about registering modules, see Register the Module (Android Specific).

1. Open ReactApplication and update the getPackages function.

   overridefungetPackages():List<ReactPackage>{
   returnPackageList(this).packages.apply{
   add(MyAppPackage())
   }
   }
   

2. Create MyAppPackage.

   importandroid.view.View
   importcom.facebook.react.ReactPackage
   importcom.facebook.react.bridge.NativeModule
   importcom.facebook.react.bridge.ReactApplicationContext
   importcom.facebook.react.uimanager.ReactShadowNode
   importcom.facebook.react.uimanager.ViewManager
   class MyAppPackage:ReactPackage{
   overridefuncreateViewManagers(
   reactContext:ReactApplicationContext
   ):MutableList<ViewManager<View,ReactShadowNode<*>>>=mutableListOf()
   overridefuncreateNativeModules(
   reactContext:ReactApplicationContext
   ):MutableList<NativeModule>=listOf(
   UJETModule(reactContext)
   ).toMutableList()
   }
   

Implement Callback

Implement UjetRequestListener and ReactInstanceEventListener from your application.

class YourApplication:Application(),ReactApplication,UjetRequestListener,ReactInstanceEventListener{
privatevarreactContext:ReactContext?=null
overridefunonCreate(){
super.onCreate()
Ujet.init(this)
reactNativeHost.reactInstanceManager.addReactInstanceEventListener(this)
}
overridefunonReactContextInitialized(reactContext:ReactContext?){
this.reactContext=reactContext
}
overridefunonSignPayloadRequest(
payload:MutableMap<String,Any?>,
ujetPayloadType:UjetPayloadType,
callback:UjetTokenCallback
){
if(reactContext==null){
callback.onError()
return
}
when(ujetPayloadType){
UjetPayloadType.AuthToken->{
UJETModule.authTokenCallback=callback
createMapAndSendEvent("authToken",payload)
}
UjetPayloadType.CustomData->{
UJETModule.customDataCallback=callback
createMapAndSendEvent("customData",payload)
}
else->callback.onError()
}
}
overridefunonRequestPushToken():String?{
sendEvent(reactContext?:return,"onRequestAndroidPushToken",null)
}
privatefunsendEvent(reactContext:ReactContext,eventName:String,params:WritableMap?){
reactContext
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
.emit(eventName,params)
}
privatefuncreateMapAndSendEvent(typeName:String,payload:Map<String,Any?>){
valwritableMap=Arguments.createMap()
for((key,value)inpayload){
writableMap.putString(key,value.toString())
}
valparams=Arguments.createMap()
params.putString("type",typeName)
params.putMap("data",writableMap)
sendEvent(reactContext?:return,"onSignPayloadRequest",params)
}
}

Set up push notifications

To integrate push notifications natively, follow these steps:

1. Create MyFirebaseMessagingService that implements FirebaseMessagingService.

   importandroid.util.Log
   importco.ujet.android.Ujet
   importcom.google.firebase.messaging.FirebaseMessagingService
   importcom.google.firebase.messaging.RemoteMessage
   class MyFirebaseMessagingService:FirebaseMessagingService(){
   privatevarfirebaseTokenManager:FirebaseTokenManager?=null
   overridefunonCreate(){
   super.onCreate()
   firebaseTokenManager=FirebaseTokenManager(this)
   }
   overridefunonNewToken(token:String){
   firebaseTokenManager?.updateToken(token)
   }
   overridefunonMessageReceived(message:RemoteMessage){
   if(Ujet.canHandlePush(message.data)){
   Log.d("Firebase","Handle the push message by UJET")
   }else{
   // Handle your notifications
   }
   }
   }
   

2. Update AndroidManifest.xml.

   <application>
   <service
   android:name=".firebase.MyFirebaseMessagingService"
   android:exported="false">
   <intent-filter>
   <actionandroid:name="com.google.firebase.MESSAGING_EVENT"/>
   </intent-filter>
   </service>
   </application>
   

3. Create FirebaseTokenManager.

   importandroid.content.Context
   importcom.google.android.gms.tasks.Task
   importcom.google.firebase.messaging.FirebaseMessaging
   class FirebaseTokenManager(context:Context){
   privatevalsharedPreferences=context.getSharedPreferences("${context.packageName}_preferences",Context.MODE_PRIVATE)
   privatevartoken:String?=null
   fungetToken():String?{
   token=sharedPreferences.getString("firebaseToken",null)
   if(token==null){
   FirebaseMessaging.getInstance().token.addOnCompleteListener{task:Task<String?>->
   if(!task.isSuccessful||task.result==null){
   return@addOnCompleteListener
   }
   token=task.result
   updateToken(token)
   }
   }
   returntoken
   }
   funupdateToken(token:String?){
   sharedPreferences
   .edit()
   .putString("firebaseToken",token)
   .apply()
   }
   }
   

4. Update android/build.gradle.

   buildscript {
    dependencies {
    classpath("com.google.gms:google-services:4.4.1")
    }
   }
   

5. Update android/app/build.gradle.

   applyplugin:'com.google.gms.google-services'
   dependencies{
   implementationplatform("com.google.firebase:firebase-bom:32.7.3")
   implementation'com.google.firebase:firebase-messaging'
   }
   

6. Initialize Firebase in Application.onCreate.

   class YourApplication:Application(),ReactApplication{
   overridefunonCreate(){
   super.onCreate()
   firebaseTokenManager=FirebaseTokenManager(this)
   }
   }