# Get Started - Android {% hint style="warning" %} **Before you get started:** Make sure you have [**created a channel in OneTalk dashboard**](https://docs.taptalk.io/onetalk-omnichannel-documentation/onetalk-channel-integration/live-chat/..#setup-live-chat-for-android) and obtain the **`APP_KEY_SECRET.`** {% endhint %} ### 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. {% code title="build.gradle (project)" %} ```javascript allprojects { repositories { google() jcenter() maven { url 'https://jitpack.io' } maven { url "https://s3.amazonaws.com/repo.commonsware.com" } } } ``` {% endcode %} Then add the following dependency to your **app-level** build.gradle: {% code title="build.gradle (:app)" %} ```javascript dependencies { implementation 'com.github.taptalk-io:taptalk.io-omnichannel-android:2.6.2' } ``` {% endcode %} {% hint style="info" %} You can check a more updated version release notes of the SDK [here](https://github.com/taptalk-io/taptalk.io-omnichannel-android/releases). {% endhint %} {% hint style="warning" %} **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 {% endhint %} {% code title="build.gradle (:app)" %} ```javascript android { ... compileOptions { sourceCompatibility JavaVersion.VERSION_17 targetCompatibility JavaVersion.VERSION_17 } } ``` {% endcode %} {% hint style="warning" %} 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. {% endhint %} {% code title="build.gradle (:app)" %} ```javascript android { ... defaultConfig { ... multiDexEnabled true } } ``` {% endcode %} 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. {% code title="OneTalkWrapperActivity.java" %} ```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(); } } ``` {% endcode %} {% hint style="info" %} **`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. {% endhint %} 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. {% tabs %} {% tab title="Java" %} {% code title="OneTalkStarterModule.java" %} ```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); } } ``` {% endcode %} {% endtab %} {% endtabs %} {% hint style="info" %} A class inheriting `ReactContextBaseJavaModule` requires that a function called`getName()` is always implemented. {% endhint %} {% hint style="info" %} **`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*). {% endhint %} #### 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. {% tabs %} {% tab title="Java" %} {% code title="OneTalkStarterPackage.java" %} ```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 createViewManagers(@NotNull ReactApplicationContext reactContext) { return Collections.emptyList(); } @NotNull @Override public List createNativeModules(@NotNull ReactApplicationContext reactContext) { List modules = new ArrayList<>(); modules.add(new OneTalkStarterModule(reactContext)); return modules; } } ``` {% endcode %} {% endtab %} {% endtabs %} #### Step 6: Provide the package in MainApplication.java We will need to provide the `OneTalkStarterPackage` in the `getPackages()` method of the *MainApplication.java* file. {% tabs %} {% tab title="Java" %} {% code title="MainApplication.java" %} ```java public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { ... @Override protected List getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List packages = new PackageList(this).getPackages(); ... // Add package packages.add(new OneTalkStarterPackage()); return packages; } }; ... } ``` {% endcode %} {% endtab %} {% endtabs %} #### 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()`. {% tabs %} {% tab title="Java" %} ```java 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(); } } ); } ... } ``` {% endtab %} {% endtabs %} {% hint style="info" %} **Parameters** **`CONTEXT`** (Context) application context\ \&#xNAN;**`APP_KEY_SECRET`**: (String) application key Secret\ \&#xNAN;**`CLIENT_APP_ICON`**: (int) drawable resource ID of your application's icon\ \&#xNAN;**`CLIENT_APP_NAME`**: (String) your application name\ \&#xNAN;**`tapTalkLiveListener`**: (TapTalkLiveListener) an interface to detect TapTalkLive Android SDK's delegates and callbacks {% endhint %} {% hint style="info" %} 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. {% endhint %} #### Step 8: Enable Chat Features Please follow the steps in [Enable Chat Features](https://docs.taptalk.io/powertalk-chat-sdk-documentation/powertalk-android/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: ```javascript 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. ```javascript