Get Started - Android - TapTalk.io Documentation

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
Java
Project build.gradle
1
allprojects {
2
   repositories {
3
      ...
4
      maven { url "https://jitpack.io" }
5
      maven { url "https://s3.amazonaws.com/repo.commonsware.com" }
6
      jcenter()
7
   }
8
}
Copied!
Then add the following dependency to your app-level build.gradle:
Java
app module build.gradle
1
dependencies {
2
    implementation 'com.github.taptalk-io:taptalk.io-android:2.0.0'
3
}
Copied!
Note: In the app build.gradle file, make sure that your project is using supported Java 8 language features like below
Java
app module build.gradle
1
compileOptions {
2
    sourceCompatibility JavaVersion.VERSION_1_8
3
    targetCompatibility JavaVersion.VERSION_1_8
4
}
Copied!
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
1
public class MainApplication extends Application implements ReactApplication {
2
​
3
    ...
4
​
5
    @Override
6
    public void onCreate() {
7
        super.onCreate();
8
        
9
        ...
10
        TapTalk.init(
11
            CONTEXT, 
12
            APP_KEY_ID, 
13
            APP_KEY_SECRET,            
14
            APP_ICON, 
15
            APP_NAME, 
16
            APP_BASE_URL,            
17
            IMPLEMENTATION_TYPE, 
18
            new TapListener() {
19
                @Override
20
                public void onInitializationCompleted(String instanceKey) {
21
                    super.onInitializationCompleted(instanceKey);
22
                }
23
​
24
                @Override
25
                public void onTapTalkRefreshTokenExpired() {
26
                    super.onTapTalkRefreshTokenExpired();
27
                }
28
​
29
                @Override
30
                public void onTapTalkUnreadChatRoomBadgeCountUpdated(int unreadCount) {
31
                    super.onTapTalkUnreadChatRoomBadgeCountUpdated(unreadCount);
32
                }
33
            
34
                @Override
35
                public void onNotificationReceived(TAPMessageModel message) {
36
                    super.onNotificationReceived(message);
37
                }
38
​
39
                @Override
40
                public void onUserLogout() {
41
                    super.onUserLogout();
42
                }
43
            
44
                @Override
45
                public void onTaskRootChatRoomClosed(Activity activity) {
46
                    super.onTaskRootChatRoomClosed(activity);
47
                }
48
            }
49
        );
50
    }
51
    
52
    ...
53
    
54
}
55
​
Copied!
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: 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.
Setup FileProvider in your application
To enable file transfer through chat messages, you need to define FileProvider in your application's AndroidManifest.xml file, under the <application> tag.
AndroidManifest.xml
1
<application
2
    android:name=".YourApplication"
3
    ...>
4
​
5
    <provider
6
        android:name="android.support.v4.content.FileProvider"
7
        android:authorities="${applicationId}.fileprovider"
8
        android:exported="false"
9
        android:grantUriPermissions="true">
10
        <meta-data
11
            android:name="android.support.FILE_PROVIDER_PATHS"
12
            android:resource="@xml/file_paths" />
13
    </provider>
14
​
15
</application>
Copied!
Initialize Google Places API Key (Optional)
To enable location search result preview while sending location message, a Google Places API Key is required. To obtain the API key for your application, you can check the documentation provided by Google. To initialize, insert your obtained key using the initializeGooglePlacesApiKey() method.
Java
Kotlin
1
TapTalk.initializeGooglePlacesApiKey(GOOGLE_PLACES_API_KEY);
Copied!
1
TapTalk.initializeGooglePlacesApiKey(GOOGLE_PLACES_API_KEY)
Copied!
Your key also needs to be defined in your application's AndroidManifest.xml file, under the <application> tag.
AndroidManifest.xml
1
<application
2
    android:name=".YourApplication"
3
    ...>
4
​
5
    <meta-data
6
        android:name="com.google.android.geo.API_KEY"
7
        android:value="GOOGLE_PLACES_API_KEY" />
8
​
9
</application>
Copied!
Parameters
GOOGLE_PLACES_API_KEY: (String) Google Places API Key
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.
PowerTalkWrapperActivity.java
1
import androidx.appcompat.app.AppCompatActivity;
2
​
3
import android.os.Bundle;
4
​
5
import io.taptalk.TapTalk.Manager.TapUI;
6
​
7
public class PowerTalkWrapperActivity extends AppCompatActivity {
8
​
9
    @Override
10
    protected void onCreate(Bundle savedInstanceState) {
11
        super.onCreate(savedInstanceState);
12
        setContentView(R.layout.activity_power_talk_wrapper);
13
​
14
        if (TapTalk.isAuthenticated()) {
15
            // Show room list if authentication is completed
16
            TapUI.getInstance().openRoomList(this);
17
        } else {
18
            // Authentication is required
19
        }
20
        finish();
21
    }
22
}
Copied!
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.
PowerTalkStarterModule.java
1
import android.content.Intent;
2
​
3
import com.facebook.react.bridge.ReactApplicationContext;
4
import com.facebook.react.bridge.ReactContextBaseJavaModule;
5
import com.facebook.react.bridge.ReactMethod;
6
​
7
import org.jetbrains.annotations.NotNull;
8
​
9
class PowerTalkStarterModule extends ReactContextBaseJavaModule {
10
​
11
    PowerTalkStarterModule(ReactApplicationContext reactContext) {
12
        super(reactContext);
13
    }
14
​
15
    @NotNull
16
    @Override
17
    public String getName() {
18
        return "PowerTalkStarter";
19
    }
20
​
21
    @ReactMethod
22
    void navigateToPowerTalk() {
23
        Intent intent = new Intent(getReactApplicationContext(), PowerTalkWrapperActivity.class);
24
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
25
        getReactApplicationContext().startActivity(intent);
26
    }
27
}
Copied!
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. 
PowerTalkStarterPackage.java
1
import com.facebook.react.ReactPackage;
2
import com.facebook.react.bridge.NativeModule;
3
import com.facebook.react.bridge.ReactApplicationContext;
4
import com.facebook.react.uimanager.ViewManager;
5
​
6
import org.jetbrains.annotations.NotNull;
7
​
8
import java.util.ArrayList;
9
import java.util.Collections;
10
import java.util.List;
11
​
12
public class PowerTalkStarterPackage implements ReactPackage {
13
​
14
    @NotNull
15
    @Override
16
    public List<ViewManager> createViewManagers(@NotNull ReactApplicationContext reactContext) {
17
        return Collections.emptyList();
18
    }
19
​
20
    @NotNull
21
    @Override
22
    public List<NativeModule> createNativeModules(@NotNull ReactApplicationContext reactContext) {
23
        List<NativeModule> modules = new ArrayList<>();
24
​
25
        modules.add(new PowerTalkStarterModule(reactContext));
26
​
27
        return modules;
28
    }
29
​
30
}
Copied!
Step 4: Provide the package in MainApplication.java
We will need to provide the PowerTalkStarterPackage in the getPackages() method of the MainApplication.java file.
MainApplication.java
1
public class MainApplication extends Application implements ReactApplication {
2
​
3
    private final ReactNativeHost mReactNativeHost =
4
            new ReactNativeHost(this) {
5
                
6
                ...
7
                
8
                @Override
9
                protected List<ReactPackage> getPackages() {
10
                    @SuppressWarnings("UnnecessaryLocalVariable")
11
                    List<ReactPackage> packages = new PackageList(this).getPackages();
12
                    
13
                    ...
14
                    
15
                    // Add package
16
                    packages.add(new PowerTalkStarterPackage());
17
                    
18
                    return packages;
19
                }
20
            };
21
            
22
    ...     
23
          
24
}
Copied!
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:
1
import { NativeModules } from 'react-native';
Copied!
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.
1
<Button
2
		onPress={() => NativeModules.PowerTalkStarter.navigateToPowerTalk()}
3
		title='Launch PowerTalk'
4
/>
Copied!
PowerTalk Chat SDK Documentation - Previous
PowerTalk React Native
Get Started - iOS
Last modified 25d ago
Copy link
Contents
Quick Start
Configure and Initialize TapTalk.io Android SDK
Setup FileProvider in your application
Initialize Google Places API Key (Optional)
Bridge to React Native