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

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

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.

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

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.

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.

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

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?