React Native Android SDK

This documentation shows you how to embed REVE Chat React Native Android SDK in an Android application and get started in a few minutes.

Getting Started with React Native Android SDK

REVE Chat’s React Native Android SDK can be seamlessly integrated with your mobile apps and enable your team deliver in-app messaging to your app users for better engagement and customer support.

Introduction

This documentation shows you how to embed REVE Chat Android SDK in an Android application and get started in a few minutes.

Necessary or minimum requirements:

Android Studio
Minimum SDK version should be 14 or above
SDK version (Compile, Build, Target) should be 26 or above

Android SDK integration process

Step 1

To integrate Android SDK with your mobile app, please follow the below mentioned steps:

Add the Android SDK URL in your Project level build gradle file’s repositories section as shown below:

If android studio version less than Android Studio Arctic Fox

In app build.gradle, you can add the repositories

allprojects {
      repositories {
      …
      jcenter()
      maven { url '<https://jitpack.io>' }
      maven { url '<https://maven.google.com/>' }
      maven {
          url "<https://jfrog-artifact.revechat.com/artifactory/artifactory/>"
      }
   }
}

Otherwise

In settings.gradle, you can add the repositories

dependencyResolutionManagement {                   
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        …
 	      jcenter()
        maven { url '<https://jitpack.io>' }
        maven { url '<https://maven.google.com/>' }
        maven {
            url "<https://jfrog-artifact.revechat.com/artifactory/artifactory/>"
        }
    }
}

Step 2

Add Design support library and REVE Chat Android SDK as dependency in your App level build. Gradle file:

dependencies {
    …
    implementation('com.revesoft.revechatsdk:revechatsdk:1.0.14.3.1')

}

Note- You can also use Design support library greater then 26 also according to your project build SDK version.

Step 3

Add following lines from to communicate from react-native javascript code with REVE Chat SDK. However, this step needs to be done differently for JAVA or KOTLIN in separate ways.

Code for JAVA

package com.your_package_name;

import android.content.Intent;
import android.util.Log;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.revesoft.revechatsdk.model.VisitorInfo;
import com.revesoft.revechatsdk.ui.activity.ReveChatActivity;
import com.revesoft.revechatsdk.utils.ReveChat;

/**
 * Native Module to communicate from react-native javascript code
 * with REVEChat SDK 
 */
public class REVEChatSDKModule extends ReactContextBaseJavaModule {

    REVEChatSDKModule(ReactApplicationContext context) {
        super(context);
    }

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

    @ReactMethod
    public void startChat(String accountId, String userName, String userEmail, String userPhoneNumber) {
        Log.i("REVEChatSDKModule", "startChat: accountId " + accountId + " userName: " + userName+ " userEmail "+userEmail+" userPhoneNumber "+userPhoneNumber);

        //Initializing with account id
        ReveChat.init(accountId);

        //creating visitor info
        VisitorInfo visitorInfo = new VisitorInfo.Builder()
                .name(userName)
                .email(userEmail)
                .phoneNumber(userPhoneNumber).build();

        //set visitor info
        ReveChat.setVisitorInfo(visitorInfo);
        
        Intent intent = new Intent(getReactApplicationContext(), ReveChatActivity.class);
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        getReactApplicationContext().startActivity(intent);
    }

}

Code for KOTLIN

package [your_package_name]

import android.content.Intent
import android.util.Log
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod
import com.revesoft.revechatsdk.model.VisitorInfo
import com.revesoft.revechatsdk.ui.activity.ReveChatActivity
import com.revesoft.revechatsdk.utils.ReveChat

/**
 * Native Module to communicate from react-native javascript code
 * with REVEChat SDK 
 */
class REVEChatSDKModule internal constructor(context: ReactApplicationContext?) : ReactContextBaseJavaModule(context) {
    override fun getName(): String {
        return "REVEChatSDKModule"
    }

    @ReactMethod
    fun startChat(accountId: String, userName: String, userEmail: String, userPhoneNumber: String) {
        Log.i(
            "REVEChatSDKModule",
            "startChat: accountId $accountId userName: $userName userEmail $userEmail userPhoneNumber $userPhoneNumber"
        )

        //Initializing with account id
        ReveChat.init(accountId)

        //creating visitor info

        //creating visitor info
        val visitorInfo: VisitorInfo = VisitorInfo.Builder()
            .name(userName)
            .email(userEmail)
            .phoneNumber(userPhoneNumber).build()

        //set visitor info
        ReveChat.setVisitorInfo(visitorInfo)
        val intent = Intent(reactApplicationContext, ReveChatActivity::class.java)
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
        reactApplicationContext.startActivity(intent)
    }
}

Step 4

Add following lines from where you want to start the chat.

Code for Javascript

// React Native Sample Code

import {
  NativeModules
} from 'react-native';

const {REVEChatSDKModule} = NativeModules;

<Button
        title="Chat With Us"
        onPress={() =>
			{ 

				REVEChatSDKModule.startChat('[account_id]', '[user_name]', '[user@email]', 'user_phone_number');
			}
		}
/>

Step 5

Extra Customization (Optional)

Add primary and primary Dark in your color.xml, if already not defined:

<color name="revechatsdk_colorPrimary">#YourColor</color>
<color name="revechatsdk_colorPrimaryDark">#YourColorDark</color>

To change chat window’s content as per your need:

<!--  screen background color --> 
<color name="revechatsdk_layout_bg">#YourColor</color>
    
<!--  Button color --> 
<color name="revechatsdk_btn_text">#YourColor</color>
<color name="revechatsdk_btn_bg">@color/revechatsdk_colorPrimary</color>
    
<!-- Chat screen colors --> 
<color name="revechatsdk_color_chat_background">#YourColor</color>
<color name="revechatsdk_color_sending_msg_bg">#YourColor</color>
<color name="revechatsdk_color_receiving_msg_bg">#YourColor</color>
<color name="revechatsdk_shape_date_bubble_bg">#YourColor</color>

<!-- Chat action bar head text
<string name="revechatsdk_title_chat_window">YOUR MESSAGE TITLE</string>

Any questions? Please email us at issue.support@revechat.com or scan to chat with us.

PreviousReact Native iOS SDK NextEmail Integration

Last updated 25 days ago