# Get Started - Android

{% hint style="warning" %}
**Before you get started:** Make sure you have [**created a channel in OneTalk dashboard**](/~/changes/FMvVnz8ZkLFBmR0Wx2wq/onetalk-omnichannel-documentation/onetalk-channel-integration/live-chat.md#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)" %}

```java
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)" %}

```bash
dependencies {
    implementation 'com.github.taptalk-io:taptalk.io-omnichannel-android:2.2.0'
}
```

{% 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)" %}

```java
android {
    
    ...

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}
```

{% 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)" %}

```markup
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<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;
    }
}
```

{% 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) {
                
                ...
                b
                @Override
                protected List<ReactPackage> getPackages() {
                    @SuppressWarnings("UnnecessaryLocalVariable")
                    List<ReactPackage> 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
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](/~/changes/FMvVnz8ZkLFBmR0Wx2wq/powertalk-chat-sdk-documentation/powertalk-android/enable-chat-features.md) 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.&#x20;

&#x20;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
<Button
    onPress={() => NativeModules.OneTalkStarter.navigateToOneTalk()}
    title='Launch OneTalk'
/>
```

{% hint style="info" %}
**Note**: You can check a more complete implementation guide in the [OneTalk Live Chat for Android](/~/changes/FMvVnz8ZkLFBmR0Wx2wq/onetalk-omnichannel-documentation/onetalk-channel-integration/live-chat/onetalk-android.md) section.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.taptalk.io/~/changes/FMvVnz8ZkLFBmR0Wx2wq/onetalk-omnichannel-documentation/onetalk-channel-integration/live-chat/onetalk-live-chat-for-react-native/get-started-android.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.