React Native Android SDK

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 {
        …
 	  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>

    <!-- 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 [email protected]

knowledge-page-arrow-left

Previous

Flutter Android SDK

Next

Forward emails to your REVE Chat tickets

knowledge-page-arrow-right