Get Started - Android

This section will cover a step-by-step approach to bridge your React Native project to PowerTalk Android SDK. We will be using Android Studio to configure native code in React Native project.

Quick Start

TapTalk.io helps you to implement real-time chat with any type of your client app with speed and efficiency. Our Android SDK provides you with various methods to initialize, configure, and build the chat from the client-side - no server-side implementation is required because our reliable infra management service is delivered with the SDK. This page presents a brief overview of the SDK’s structure and abilities, then lets you go through the preliminary steps of implementing the SDK in your own app.

Configure and Initialize TapTalk.io Android SDK

Step 1: Create a new application from your dashboard

1. Login to TapTalk.io Dashboard, then choose Development -> Apps

2. Click New App Button, input App Name and choose Platform, and then click Create New App Button.

3. A pop-up dialog will be shown with provided App Key ID & App Key Secret

Note: Please remember to save your App Key ID & your App Key Secret because it will only be shown once and will be used in TapTalk.io initialization

Step 2: Install TapTalk.io SDK

To start, open your Android project and add the following repositories to your top-level build.gradle file.Project build.gradle

build.gradle (project)

allprojects {
   repositories {
      ...
      maven { url "https://jitpack.io" }
      maven { url "https://s3.amazonaws.com/repo.commonsware.com" }
      jcenter()
   }
}

Then add the following dependency to your app-level build.gradle:

build.gradle (:app)

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

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

In the app build.gradle file, make sure that your project is using the supported Java version like below.

build.gradle (:app)

android {
    
    ...

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_17
        targetCompatibility JavaVersion.VERSION_17
    }
}

Step 3: Initialize TapTalk.io in your Application class.

In order to use TapTalk.io, you must first initialize a TapTalk instance by passing the APP_ID, APP_SECRET, APP_ICON, APP_BASE_URL, and IMPLEMENTATION_TYPE assigned to your application to the init method as a parameter. Generally, initialization is implemented in the Application class in your project.

Note: To get BASE_URL you can follow our documentation on how to get Base URL on TapTalk.io

Java

public class MainApplication extends Application implements ReactApplication {

    ...

    @Override
    public void onCreate() {
        super.onCreate();
        
        ...
        TapTalk.init(
            CONTEXT, 
            APP_KEY_ID, 
            APP_KEY_SECRET,            
            APP_ICON, 
            APP_NAME, 
            APP_BASE_URL,            
            IMPLEMENTATION_TYPE, 
            new TapListener() {
                @Override
                public void onInitializationCompleted(String instanceKey) {
                    super.onInitializationCompleted(instanceKey);
                }

                @Override
                public void onTapTalkRefreshTokenExpired() {
                    super.onTapTalkRefreshTokenExpired();
                }

                @Override
                public void onTapTalkUnreadChatRoomBadgeCountUpdated(int unreadCount) {
                    super.onTapTalkUnreadChatRoomBadgeCountUpdated(unreadCount);
                }
            
                @Override
                public void onNotificationReceived(TAPMessageModel message) {
                    super.onNotificationReceived(message);
                }

                @Override
                public void onUserLogout() {
                    super.onUserLogout();
                }
            
                @Override
                public void onTaskRootChatRoomClosed(Activity activity) {
                    super.onTaskRootChatRoomClosed(activity);
                }
            }
        );
    }
    
    ...
    
}

Parameters CONTEXT: (Context) application context APP_KEY_ID: (String) application key ID APP_KEY_SECRET: (String) application key Secret APP_ICON: (int) drawable resource ID APP_NAME: (String) your application name APP_BASE_URL: (String) base API URL IMPLEMENTATION_TYPE: (enum) found in TapTalkImplentationType, more detailed information below tapListener: (TapListener) an interface to detect TapTalk Android SDK's delegates and callbacks

IMPLEMENTATION_TYPE TapTalkImplementationType consists of 3 types which are: TapTalkImplementationTypeUI: used for implementation with only TapUI TapTalkImplementationTypeCore: used for implementation with only TapCore TapTalkImplementationTypeCombine: used for implementation with both of TapCore and TapUI combined

Note: In the Event Listener page, you can find detailed information on the usages of TapTalk Android SDK's delegates and callbacks.

Step 4: 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 5: Authenticate to TapTalk.io

In order to use the abilities of the Android SDK in your client app, a TapTalk instance must be initiated in each client app through user authentication with TapTalk.io server. An authenticated user account allows the instance to communicate and interact with the server. To authenticate your user with the server, follow the instructions in Authentication page.

Bridge to React Native

After initialization and authentication are completed, continue to the next step by creating an activity class to bridge React Native app to PowerTalk SDK.

Step 1: Create PowerTalkWrapper 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 PowerTalkWrapperActivity.java. In this example, we will use this activity's context to help the app open PowerTalk SDK's chat view, then close the activity afterwards.

To open the view, you can simply use the openRoomList() method in the TapUI class. Creating a user interface won't be necessary, because TapTalk.io have provided an integrated user interface to be used in your application. To use TapTalk.io's chat interface, simply initialize our TapUI method and you are good to go. For more information about TapUI and TapCore, please see TapUI and TapCore page.

Java

PowerTalkWrapperActivity.java

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import io.taptalk.TapTalk.Manager.TapUI;

public class PowerTalkWrapperActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_power_talk_wrapper);

        if (TapTalk.isAuthenticated()) {
            // Show room list if authentication is completed
            TapUI.getInstance().openRoomList(this);
        } else {
            // Authentication is required
        }
        finish();
    }
}

Note: For more information about Room List View for TapUI, please see Room List section.

Once the activity is added, we will create a java module file that contains a react method to open PowerTalk chat list view from your React Native app.

Step 2: 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 PowerTalkStarterModule.java. This class will inherit ReactContextBaseJavaModule.

In this class, create a react method named navigateToPowerTalk() to open PowerTalk 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

PowerTalkStarterModule.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 PowerTalkStarterModule extends ReactContextBaseJavaModule {

    PowerTalkStarterModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @NotNull
    @Override
    public String getName() {
        return "PowerTalkStarter";
    }

    @ReactMethod
    void navigateToPowerTalk() {
        Intent intent = new Intent(getReactApplicationContext(), PowerTalkWrapperActivity.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 3: 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 PowerTalkStarterPackage.

Override the createNativeModules() function and add the PowerTalkStarterModule object to modules array.

Java

PowerTalkStarterPackage.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 PowerTalkStarterPackage 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 PowerTalkStarterModule(reactContext));

        return modules;
    }
}

Step 4: Provide the package in MainApplication.java

We will need to provide the PowerTalkStarterPackage 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) {
                
                ...
                
                @Override
                protected List<ReactPackage> getPackages() {
                    @SuppressWarnings("UnnecessaryLocalVariable")
                    List<ReactPackage> packages = new PackageList(this).getPackages();
                    
                    ...
                    
                    // Add package
                    packages.add(new PowerTalkStarterPackage());
                    
                    return packages;
                }
            };
            
    ...     
          
}

Step 5. Open PowerTalk 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 navigateToPowerTalk() method to open PowerTalk 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 navigateToPowerTalk() to open PowerTalk chat view. Here we will be using a button's onPress() method as an example.

<Button
    onPress={() => NativeModules.PowerTalkStarter.navigateToPowerTalk()}
    title='Launch PowerTalk'
/>

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