TapTalk.io Documentation
  • Introduction
  • OneTalk Omnichannel Documentation
    • Getting Started with OneTalk
      • Team Members
      • Add Topic
      • Assign Agent to Topic
      • Paid Proactive Chat
    • Channel Integration
      • Telegram Integration
      • WhatsApp SME Integration
      • Instagram DM Integration
      • Facebook Messenger Integration
      • Live Chat Integration (iOS, Android, Web)
        • OneTalk Live Chat for Android
          • Get Started
          • Event Listener
          • Authentication
          • Case & Topic
          • Navigate Live Chat UI
          • Customize UI Appearance
        • OneTalk Live Chat for iOS
          • Get Started
          • Background Process in TapTalk.io Omnichannel iOS
          • Event Delegate
          • Authentication
          • Case & Topic
          • Navigate Live Chat UI
          • Customize UI Appearance
        • OneTalk Live Chat for Web
          • Get Started
          • Callback
          • Method
        • OneTalk Live Chat for React Native
          • Get Started - Android
          • Authentication - Android
          • Get Started - iOS
          • Authentication - iOS
        • OneTalk Live Chat for Flutter
          • Get Started - Android
          • Get Started - iOS
      • Google Business Messages Integration
      • Google Business Profile Integration
      • Tokopedia Integration
    • Integration API
      • Inbox API
      • User/Contact API
    • Live Chat Widget Callback Function
    • Social Channel Button
    • Custom Chatbot Integration
      • Get Started
      • Edit or Delete Chatbot
      • Development
    • QnA via API
    • Webhook
  • PowerTalk Chat SDK Documentation
    • Getting Started with PowerTalk
    • PowerTalk Android
      • Get Started
      • Enable Chat Features
      • Authentication
      • TapUI and TapCore
      • Background Process in TapTalk.io
      • Connection
      • Event Listener
      • Push Notification
      • General
      • User
      • Room List
        • Room List - TapUI
        • Room List - TapCore
      • Chat Room and Messages
        • Chat Room and Messages - TapUI
        • Chat Room and Messages - TapCore
      • Contact
      • Message Type
      • Customize UI Appearance
      • Customize Chat Features
      • Customize Chat Message Bubble
      • Customize Navigation Bar
      • Deep Linking
      • Error Codes
    • PowerTalk iOS
      • Get Started
      • TapUI and TapCore
      • Background Process in TapTalk.io
      • Implement Application Delegate
      • Authentication
      • Connection
      • Event Delegate
      • Push Notification
      • General
      • User
      • Room List
        • Room List - TapUI
        • Room List - TapCore
      • Chat Room and Messages
        • Chat Room and Messages - TapUI
        • Chat Room and Messages - TapCore
      • Contact
      • Message Type
      • Customize UI Appearance
      • Customize Chat Features
      • Customize Chat Message Bubble
      • Customize Navigation Bar
      • Deep Linking
      • Error Codes
    • PowerTalk React Native
      • Get Started - Android
      • Get Started - iOS
    • PowerTalk Flutter
      • Get Started - Android
      • Get Started - iOS
    • Javascript SDK
      • Get Started
      • Authentication
      • Connection
      • General
      • Event Listener
      • User
      • Room List
      • Chat Room
      • Messages
      • Contact
      • Message Type
    • Server API
      • Get Started
      • Base URL
      • Authentication
      • User
      • Contact
      • Message
      • Room
    • Webhook
      • Get Started
      • Webhook Payload
  • MeetTalk SDK Documentation
    • Getting Started with MeetTalk
    • MeetTalk Android
      • Get Started
      • Event Listener
    • MeetTalk iOS
      • Get Started
      • Implement Application Delegate
      • Event Delegate
  • SendTalk API Documentation
    • Introduction
    • Whatsapp Verification
Powered by GitBook
On this page

Was this helpful?

  1. OneTalk Omnichannel Documentation
  2. Channel Integration
  3. Live Chat Integration (iOS, Android, Web)
  4. OneTalk Live Chat for React Native

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.

PreviousOneTalk Live Chat for React NativeNextAuthentication - Android

Last updated 28 days ago

Was this helpful?

Before you get started: Make sure you have 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.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

build.gradle (:app)
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.

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.

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.

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

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

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

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

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

Please follow the steps in page to enable TapTalk.io's chat features, such as contact sync and sending media, document, and location messages.

Note: You can check a more complete implementation guide in the section.

here
Enable Chat Features
OneTalk Live Chat for Android
created a channel in OneTalk dashboard