Get Started - Android
This section will cover a step-by-step approach to bridge your React Native project to OneTalk Live Chat Android SDK. We will be using Android Studio to configure native code in 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 Android SDK for React Native project
Step 1: Open React Native project's android folder in Android Studio
To begin, open the android folder inside your React Native project root folder as a project using Android Studio. Once all gradle dependencies are downloaded, we will follow the first step of OneTalk Android Live Chat implementation by installing the omnichannel SDK for the android project.
Step 2: Install TapTalk.io Omnichannel SDK
To start, open your Android project and add the following repositories to your top-level build.gradle file.
allprojects {
repositories {
google()
jcenter()
maven { url 'https://jitpack.io' }
maven { url "https://s3.amazonaws.com/repo.commonsware.com" }
}
}Then add the following dependency to your app-level build.gradle:
dependencies {
implementation 'com.github.taptalk-io:taptalk.io-omnichannel-android:2.4.2'
}Note: In the app build.gradle file, make sure that your project is using supported Java 8 language features under the android tag like below
android {
...
compileOptions {
sourceCompatibility JavaVersion.VERSION_17
targetCompatibility JavaVersion.VERSION_17
}
}Note: If you are getting a dex error when building the project (e.g. Cannot fit requested classes in a single dex file), try to enable multidex in the app build.gradle file.
android {
...
defaultConfig {
...
multiDexEnabled true
}
}After adding the required dependency, sync your project and begin the next step by creating an activity class to bridge React Native app to OneTalk live chat view.
Step 3: Create OneTalkWrapper Activity in React Native project folder
Create a new Blank Activity in the android project folder (android/app/src/main/java/com/yourprojectname/) and name it as OneTalkWrapperActivity.java. We will use this activity's context to help the app open OneTalk live chat view, then close the activity afterwards. The activity will look like the code below.
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import io.taptalk.taptalklive.TapTalkLive;
public class OneTalkWrapperActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_one_talk_wrapper);
TapTalkLive.openTapTalkLiveView(OneTalkWrapperActivity.this);
finish();
}
}Once the activity is added, we will create a java module file that contains a react method to open OneTalk live chat view from your React Native app.
Step 4: Create Java Module file in React Native project folder
Create a new Java class inside the android project folder (android/app/src/main/java/com/yourprojectname/) . We will name this file OneTalkStarterModule.java. This class will inherit ReactContextBaseJavaModule.
In this class, create a react method named navigateToOneTalk() to open OneTalk Live Chat view from the previously created activity. Annotating this method with @ReactMethod will enable the method to be invoked from JavaScript of a React Native app.
import android.content.Intent;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import org.jetbrains.annotations.NotNull;
class OneTalkStarterModule extends ReactContextBaseJavaModule {
OneTalkStarterModule(ReactApplicationContext reactContext) {
super(reactContext);
}
@NotNull
@Override
public String getName() {
return "OneTalkStarter";
}
@ReactMethod
void navigateToOneTalk() {
Intent intent = new Intent(getReactApplicationContext(), OneTalkWrapperActivity.class);
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
getReactApplicationContext().startActivity(intent);
}
}Step 5: Register the module
Next step is to register the module we just created. To continue, create another Java class in the android project folder that inherits ReactPackage. We will name this file OneTalkStarterPackage.
Override the createNativeModules() function and add the OneTalkStarterModule object to modules array.
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import org.jetbrains.annotations.NotNull;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class OneTalkStarterPackage implements ReactPackage {
@NotNull
@Override
public List<ViewManager> createViewManagers(@NotNull ReactApplicationContext reactContext) {
return Collections.emptyList();
}
@NotNull
@Override
public List<NativeModule> createNativeModules(@NotNull ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new OneTalkStarterModule(reactContext));
return modules;
}
}Step 6: Provide the package in MainApplication.java
We will need to provide the OneTalkStarterPackage in the getPackages() method of the MainApplication.java file.
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost =
new ReactNativeHost(this) {
...
b
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
...
// Add package
packages.add(new OneTalkStarterPackage());
return packages;
}
};
...
}Step 7. Initialize OneTalk Live Chat SDK
Still in the MainApplication.java file, we will initialize OneTalk Live Chat SDK on the application's onCreate() method by calling TapTalkLive.init().
import io.taptalk.taptalklive.TapTalkLive;
import io.taptalk.taptalklive.Listener.TapTalkLiveListener
public class MainApplication extends Application implements ReactApplication {
...
@Override
public void onCreate() {
super.onCreate();
...
TapTalkLive.init(
CONTEXT,
APP_KEY_SECRET,
CLIENT_APP_ICON,
CLIENT_APP_NAME,
new TapTalkLiveListener() {
@Override
public void onInitializationCompleted() {
super.onInitializationCompleted();
}
@Override
public void onCloseButtonInCreateCaseFormTapped() {
super.onCloseButtonInCreateCaseFormTapped();
}
@Override
public void onCloseButtonInCaseListTapped() {
super.onCloseButtonInCaseListTapped();
}
}
);
}
...
}Step 8: Enable Chat Features
Please follow the steps in Enable Chat Features page to enable TapTalk.io's chat features, such as contact sync and sending media, document, and location messages.
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:
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.
<Button
onPress={() => NativeModules.OneTalkStarter.navigateToOneTalk()}
title='Launch OneTalk'
/>Last updated
Was this helpful?