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.

build.gradle (project)

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:

build.gradle (:app)

dependencies {
    implementation 'com.github.taptalk-io:taptalk.io-omnichannel-android:2.4.1'
}

You can check a more updated version release notes of the SDK here.

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

build.gradle (:app)

android {
    
    ...

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

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.

build.gradle (:app)

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.

OneTalkWrapperActivity.java

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();
    }
}

openTapTalkLiveView will return true if opening the view is successful, and will return false if it fails due to incomplete initialization. TapTalkLive initialization might not be completed if the device is not connected to internet or an incorrect APP_KEY_SECRET parameter was provided.

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.

Java

OneTalkStarterModule.java

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);
    }
}

A class inheriting ReactContextBaseJavaModule requires that a function calledgetName() is always implemented.

FLAG_ACTIVITY_NEW_TASK is required to be added to the intent's flags if we are to open a new activity from a non-activity context (In this case, React Application Context).

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.

Java

OneTalkStarterPackage.java

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.

Java

MainApplication.java

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().

Java

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();
                }
            }
        );
    }
    
    ...
    
}

Parameters

CONTEXT (Context) application context APP_KEY_SECRET: (String) application key Secret CLIENT_APP_ICON: (int) drawable resource ID of your application's icon CLIENT_APP_NAME: (String) your application name tapTalkLiveListener: (TapTalkLiveListener) an interface to detect TapTalkLive Android SDK's delegates and callbacks

You may configure what your app will do when the user closes the chat view's Create Case Form page or Case List page from TapTalkLiveListener's onCloseButtonInCreateCaseFormTapped() and onCloseButtonInCaseListTapped() respectively.

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'
/>

Note: You can check a more complete implementation guide in the OneTalk Live Chat for Android section.