You can integrate Live Chat into your brand’s React Native mobile application to provide real-time chat support for your customers. Sprinklr offers a comprehensive Live Chat Mobile SDK to enable this functionality.

Live Chat SDK Version

• Live Chat Release: 11.1.1

• Supported Versions: Starting August 2025, Live Chat SDK versions 7.0.0 and above are supported.

​

Compatibility

The following table lists the compatible framework and platform versions: 

App Size Impact

The increase in app size after integrating the Live Chat SDK depends on the platform and framework. Integrating the Live Chat SDK will increase your app size approximately by:

• iOS: ~7MB 

• Android: ~6MB 

​

Integration Steps

​

The Live Chat SDK integration for React Native involves the following key steps:

1. Install Live Chat SDK and Peer Dependencies: Add the Live Chat SDK package and any required peer dependencies to your project. If you're already using a library similar to a peer dependency, you can inject your own custom implementation. For details, see Customizing Peer Dependencies.

2. Set Up Live Chat Messenger: Link the Sprinklr Messenger module to your React Native project. Configure necessary permissions such as media sharing, video calling, location access, and push notifications.

3. Initialize Sprinklr Live Chat: The takeOff method is used to initialize the Sprinklr Live Chat in your React Native app. This step prepares Live Chat to work based on the type of user using your app.

4. Launch Live Chat Messenger: Define when and how the Messenger interface appears within your app’s UI.

5. Configure Live Chat : Customize the chat experience using available methods to align the Messenger with your brand and optimize customer interactions.

Advanced Configuration

Now that Live Chat is integrated, you can enhance the user experience further by enabling advanced features:

• Enable Live Chat Logger: Set up logging and event monitoring to improve debugging, observability, and real-time tracking of chat activities.

• Enable Push Notifications: Configure push notifications to ensure users receive real-time updates even when the app is in the background or closed.

• Enable In-App Notifications: Display real-time message alerts as banners within the app while it is in the foreground.

Troubleshooting

Refer to the Troubleshooting section to resolve common challenges when integrating and running the Live Chat SDK effectively.

​Install Live Chat Messenger and Peer Dependencies​

To integrate Sprinklr Live Chat Messenger into your project, you must install the Live Chat SDK along with its necessary peer dependencies. This section provides a step-by-step guide to install Live Chat Messenger and its necessary dependencies. 

Prerequisite 

Before you begin with the installation, ensure that the following prerequisite is met: 

Configure Sprinklr Messenger Registry

Sprinklr Live Chat Messenger is a restricted package. Therefore, you need to configure the following registry in .npmrc for Sprinklr scoped packages: 

@sprinklrjs:registry=https://prod-nexus-external.sprinklr.com/nexus/repository/npm/   
always-auth=true   
_auth=<SPR_REGISTRY_AUTH_TOKEN>

Install Sprinklr Messenger

Install the Sprinklr Messenger in your project using your preferred package manager, as shown in the following commands: 

Using yarn

yarn add @sprinklrjs/chat-native-client@11.1.1 

Using npm

npm install --save @sprinklrjs/chat-native-client@11.1.1 

​

Install Sprinklr Messenger Peer Dependencies

Sprinklr Live Chat Messenger supports the peer dependencies listed in the Supported Peer Dependencies table. You can install these dependencies as part of the Sprinklr Messenger installation.

In addition to installing these dependencies, they also need to be linked natively. To properly link them, refer to their official documentation. Additionally, verify that you have all the required dependencies and that their versions meet the specified threshold in the Supported Versions column of the Supported Peer Dependencies table.

If you need to use an alternative to a specific dependency or implement a custom solution, refer to the Customize Peer Dependencies section for guidance.

Supported Peer Dependencies

The following sections provide an overview of the supported peer dependencies and their respective details:

State Management

React Native UI Components

Utility Libraries

React Native Community Libraries

Additional React Native Features

Install Peer Dependencies

You can use the following yarn or npm command to install the peer dependencies:

Using yarn

yarn add <package-name> 

Example

yarn add react-native-vector-icons react-native-blob-util react-native-image-picker react-native-video @react-native-community/netinfo react-native-webview react-native-permissions @react-native-camera-roll/camera-roll @react-native-async-storage/async-storage @react-native-clipboard/clipboard react-native-svg react-native-reanimated 

Using npm

npm install <package-name> 

Example

npm install --save react-native-vector-icons react-native-blob-util react-native-image-picker react-native-video @react-native-community/netinfo react-native-webview react-native-permissions @react-native-camera-roll/camera-roll @react-native-async-storage/async-storage @react-native-clipboard/clipboard react-native-svg react-native-reanimated 

​

​Set Up Live Chat Messenger

To set up Sprinklr Messenger, you need to link the Sprinklr Messenger in your project and add the necessary permissions. 

Setup for Android

To setup Sprinklr Messenger, follow these steps: 

Link Sprinklr Messenger in Your Project

You can link Sprinklr Messenger in your project with autolinking or without autolinking. Autolinking automatically links the peer dependencies in your project with Sprinklr Messenger.

​

​

See the relevant section for steps: 

• Autolinking is enabled (recommended)  

• Autolinking is disabled  

Autolinking Enabled

1. In android/settings.gradle, add the following lines. This will add Sprinklr Messenger and related dependencies to your app. 

include ':spr-native-kit'project(':spr-native-kit').projectDir = new File(rootProject.projectDir, '../node_modules/@sprinklrjs/native-kit/android') 

2. In MainApplication.java, add the following lines to make Sprinklr Messenger related packages a part of React Native package: 

To enable autolinking, pass true as value to the getPackages method. 

import com.sprinklr.messenger.SPRMessengerPackagesProvider ​@Override ​protected List<ReactPackage> getPackages() { ​List<ReactPackage> packages = new ArrayList<>(Arrays.asList( ​...{YOUR_NATIVE_PACKAGES} ​)); ​packages.addAll(SPRMessengerPackagesProvider.getPackages(true)); // send false to disable automatic linking, send true or nothing to enable autolinking ​return packages; ​} 

Autolinking Disabled

1. In android/settings.gradle, add following lines. This will add Sprinklr Messenger and related dependencies to your app. 

include ':@sprinklr-chat-native-client' ​project(':@sprinklr-chat-native-client').projectDir = new File(rootProject.projectDir, '../node_modules/@sprinklrjs/chat-native-client/android')   ​include ':spr-native-kit' ​project(':spr-native-kit').projectDir = new File(rootProject.projectDir, '../node_modules/@sprinklrjs/native-kit/android') 

2. In android/app/build.gradle, add the following line:

dependencies {   implementation project(':@sprinklr-chat-native-client') } 

3. Add these lines to MainApplication.java. This will make Sprinklr Messenger’s related packages a part of the React Native package:

import com.sprinklr.messenger.SPRMessengerPackagesProvider . .      @Override      protected List<ReactPackage> getPackages() {        List<ReactPackage> packages = new ArrayList<>(Arrays.asList(           ...{YOUR_NATIVE_PACKAGES}        ));        packages.addAll(SPRMessengerPackagesProvider.getPackages());        return packages;      } 

Add Permissions to Your Project

If you are supporting media upload/download and location sharing features in messenger, include the following permissions in AndroidManifest.xml:

​

Example

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" /> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.RECORD_AUDIO" />   <uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>

​

Setup for iOS

To setup Sprinklr Messenger in iOS, follow these steps: 

Link Sprinklr Messenger in Your Project

In Podfile, add the following lines. This will add Sprinklr Messenger and related dependencies to your app:

pod 'SPRMessenger', :path => '../node_modules/@sprinklrjs/chat-native-client/SPRMessenger.podspec'  pod 'SPRNativeKit', :path => '../node_modules/@sprinklrjs/native-kit/SPRNativeKit.podspec' # Add this pod manually if not linked automatically via react native auto linking 

Add Permissions to Your Project

If you are supporting upload and download media functionality in messenger, include the following permissions in the info.plist file:

Example

<key>NSCameraUsageDescription</key> <string>Messenger app requires access to the camera to capture the photos.</string> <key>NSMicrophoneUsageDescription</key> <string>Messenger app requires access to the microphone to record video.</string> <key>NSPhotoLibraryUsageDescription</key> <string>Messenger app requires access to the photos library.</string> <key>NSLocationWhenInUseUsageDescription</key><string>We need your location to display it on the map.</string> 

​

Initialize Sprinklr Live Chat

The takeOff method initializes the Sprinklr Messenger Client SDK. This step prepares Live Chat to work based on the type of user using your app. It can be used to initialize the SDK for the following type of users:

• Anonymous users

• Authenticated users

• Authenticated custom users

This diagram illustrates how to initialize and present Sprinklr Live Chat:

Initialize for Anonymous Users

For anonymous users (unauthenticated users), you can initialize the messenger using the takeOff method without specifying any user details. Behind the scenes, an anonymous user is automatically created for the messenger and the flow for anonymous user is initialized.

Syntax

import MessengerClient from '@sprinklrjs/chat-native-client'  MessengerClient.takeOff({  appId: '<SPR_APP_ID>', // This will be provided by Sprinklr ​ environment: '<SPR_ENVIRONMENT>', // This will be provided by Sprinklr  pushAppId: '<SPR_PUSH_APP_ID>', // Should be Unique id, if not sure pass same as device ID ​ deviceId: '<UNIQUE_DEVICE_ID>',  ​skin: 'MODERN', // default value is MODERN, options: CLASSIC | MODERN ​ locale: '<SPR_LOCALE>', // default value is en ​ themeMode: 'DEFAULT' // default value is DEFAULT, options DEFAULT | DARK })

Parameters

Initialize for Authenticated Users

For authenticated users, initialize the messenger using the takeOff method with user details. The takeOff method will consider the provided user details for the messenger and initialize the flow accordingly.

Syntax

import MessengerClient from '@sprinklrjs/chat-native-client' 
 
MessengerClient.takeOff({ 
 appId: '<SPR_APP_ID>', // This will be provided by sprinklr 
​
 environment: '<SPR_ENVIRONMENT>', // This will be provided by sprinklr 
 pushAppId: '<SPR_PUSH_APP_ID>', // Should be Unique id, if not sure pass same as device ID 
​
 deviceId: '<UNIQUE_DEVICE_ID>', 
​
 locale: '<SPR_LOCALE>', // default value is en 
​
skin: 'MODERN', // default value is MODERN, options: CLASSIC | MODERN 
​
themeMode: 'DEFAULT', // default value is DEFAULT, options: DEFAULT | DARK 
 user: { 
   userId: '12345', 
   firstName: 'John', 
   lastName: 'Doe', 
   phoneNo: '9876543210', 
   email: 'John.Doe@example.com', 
   profileImageUrl: 'https://example.com/profilePic.jpg', 
   hash: 'f30c3b0835ecd378a134c74bce8cea866df8c5b6e12a8c219c9bb288f7270e22' 
 } 
}) 

Parameters

User Object

Initialize for Custom Authenticated Users

You can create a custom user with custom parameters and pass them to the takeOff method. 

​

Syntax

import MessengerClient from '@sprinklrjs/chat-native-client'   MessengerClient.takeOff({   appId: '<SPR_APP_ID>', // This will be provided by sprinklr  ​ environment: '<SPR_ENVIRONMENT>', // This will be provided by sprinklr   pushAppId: '<SPR_PUSH_APP_ID>',  // Should be Unique id, if not sure pass same as device ID ​ deviceId: '<UNIQUE_DEVICE_ID>',  ​ locale: '<SPR_LOCALE>', // default value is en  ​ skin: 'MODERN', // default value is MODERN, options: CLASSIC | MODERN  ​themeMode: 'DEFAULT', // default value is DEFAULT, options: DEFAULT | DARK  customUser: {     customAttribute1: 'value1', //Add your custom attribute     customAttribute2: ‘value2’, //Add your custom attribute     hash: 'f30c3b0835ecd378a134c74bce8cea866df8c5b6e12a8c219c9bb288f7270e22'   }  }) 

Parameters

Custom User Object

How to Generate Hash

The hash is a Hash-based Message Authentication Code (HMAC). Sprinklr uses the SHA 256 hash function to generate HMAC.

Let’s take an example of the following user: 

user: {     userId: '12345',     firstName: 'John',     lastName: 'Doe',     phoneNo: '9876543210',     email: 'John.Doe@example.com',     profileImageUrl: 'https://example.com/profilePic.jpg',     hash: 'f30c3b0835ecd378a134c74bce8cea866df8c5b6e12a8c219c9bb288f7270e22'   } ​

​

Follow these steps to generate a hash for the example user:

1. Concatenate specific user details in the following order, separating each with an underscore (_) to create a string:

userId_firstName_lastName_profileImageUrl_phoneNo_email 

For example, the resulting string to generate the hash would be:

12345_John_Doe_https://example.com/profilePic.jpg_9876543210_John.Doe@example.com 

2. Pass the string and API key provided by Sprinklr to the following JavaScript function:

import crypto from 'crypto-js';  const getHMACHash = (message, key) => crypto.HmacSHA256(message, key).toString();  //API Key will be provided by Sprinklr

Sample code to generate HMAC is mentioned in Sample code for hash generation.

​

​Launch Live Chat Application

After you install and setup Live Chat messenger, the next step is to define how the messenger is launched and displayed.

Present Messenger View

The messenger view can be displayed using any of the UI controls such as Floating Action Button (FAB), Messenger Icon, Tab Bar Icon according to your application requirements.

To present the messenger view, create a full-page messenger view as shown in the following example. You can define the full-page messenger view as a scene in your navigator and present as per your use case:

import { MessengerView } from '@sprinklrjs/chat-native-client';  function SPRMessengerView(launchOptions = {}, onDismiss) {  return (    <MessengerView launchOptions={launchOptions} onDismiss={onDismiss} /> // onDismiss should be provided to dismiss the messenger when user close the messenger. For e.g. onDismiss: navigation.pop  ); } 

Parameters

Customize Live Chat Messenger View

Sprinklr Live Chat comprises of two screens: Home and Conversation screen. By default, Live Chat opens with a home page that displays all conversations. However, you can customize this behavior and launch MessengerView with a single conversation view.

You can customize the following Live Chat views:

• Default View

• Single Conversation View

Default View

The default view opens with a home page that displays all conversations. The following are the various ways you can configure the default view based on your use case:

import { MessengerView } from '@sprinklrjs/chat-native-client'; function SPRMessenger(launchOptions = {}, onDismiss) { ​return ( ​<MessengerView ​launchOptions={launchOptions} ​onDismiss={onDismiss} ​/> ​); ​} 

import { MessengerView } from '@sprinklrjs/chat-native-client';​function SPRMessenger(launchOptions = {}, onDismiss) {    const chatInitialisationContext = {        landingScreen: 'NEW_CONVERSATION',    };​    return (        <MessengerView            launchOptions={launchOptions}            onDismiss={onDismiss}            chatInitialisationContext={chatInitialisationContext}        />    );}

import { MessengerView } from '@sprinklrjs/chat-native-client';​function SPRMessenger(launchOptions = {}, onDismiss) {    const chatInitialisationContext = {        landingScreen: 'LAST_CONVERSATION',    };​    return (        <MessengerView            launchOptions={launchOptions}            onDismiss={onDismiss}            chatInitialisationContext={chatInitialisationContext}        />    );}

import { MessengerView } from '@sprinklrjs/chat-native-client';​function SPRMessenger(launchOptions = {}, onDismiss) {    const chatInitialisationContext = {        landingScreen: 'KNOWLEDGE_BASE_LIST',    };​    return (        <MessengerView            launchOptions={launchOptions}            onDismiss={onDismiss}            chatInitialisationContext={chatInitialisationContext}        />    );}

import { MessengerView } from '@sprinklrjs/chat-native-client';​function SPRMessenger(launchOptions = {}, onDismiss) {    const chatInitialisationContext = {        landingScreen: 'NEW_CONVERSATION',        initialMessages: [            {                message: 'This is a brand message',                isSentByUser: false,            },            'This is another brand message',            {                message: 'This is a user message',                isSentByUser: true,            },        ],    };​    return (        <MessengerView            launchOptions={launchOptions}            onDismiss={onDismiss}            chatInitialisationContext={chatInitialisationContext}        />    );}

import { MessengerView } from '@sprinklrjs/chat-native-client';​function SPRMessenger(launchOptions = {}, onDismiss) {    const chatInitialisationContext = {        landingScreen: 'EXISTING_CONVERSATION',        params: {            conversationId: 'id_of_conversation',        },    };​    return (        <MessengerView            launchOptions={launchOptions}            onDismiss={onDismiss}            chatInitialisationContext={chatInitialisationContext}        />    );}

Single Conversation View

You can choose to display only the conversation screen and hide the home screen completely.

The following are the various ways you can configure the single conversation view based on your use case:

import { MessengerView } from '@sprinklrjs/chat-native-client';​function SPRMessenger(launchOptions = {}, onDismiss) {    const chatInitialisationContext = {        scope: 'CONVERSATION',        landingScreen: 'NEW_CONVERSATION',    };​    return (        <MessengerView            launchOptions={launchOptions}            onDismiss={onDismiss}            chatInitialisationContext={chatInitialisationContext}        />    );}

import { MessengerView } from '@sprinklrjs/chat-native-client';​function SPRMessenger(launchOptions = {}, onDismiss) {    const chatInitialisationContext = {        scope: 'CONVERSATION',        landingScreen: 'LAST_CONVERSATION',    };​    return (        <MessengerView            launchOptions={launchOptions}            onDismiss={onDismiss}            chatInitialisationContext={chatInitialisationContext}        />    );}

import { MessengerView } from '@sprinklrjs/chat-native-client';​function SPRMessenger(launchOptions = {}, onDismiss) {    const chatInitialisationContext = {        scope: 'CONVERSATION',        landingScreen: 'NEW_CONVERSATION',        initialMessages: [            {                message: 'This is a brand message',                isSentByUser: false,            },            'This is another brand message',            {                message: 'This is a user message',                isSentByUser: true,            },        ],    };​    return (        <MessengerView            launchOptions={launchOptions}            onDismiss={onDismiss}            chatInitialisationContext={chatInitialisationContext}        />    );}​

import { MessengerView } from '@sprinklrjs/chat-native-client';​function SPRMessenger(launchOptions = {}, onDismiss) {    const chatInitialisationContext = {        scope: 'CONVERSATION',        landingScreen: 'EXISTING_CONVERSATION',        params: {            conversationId: 'id_of_conversation',        },    };​    return (        <MessengerView            launchOptions={launchOptions}            onDismiss={onDismiss}            chatInitialisationContext={chatInitialisationContext}        />    );}

​Close Live Chat Messenger

To close the Live Chat messenger, use the MessengerClient.closeMessenger() function.

import MessengerClient from '@sprinklrjs/chat-native-client'; ​MessengerClient.closeMessenger(); 

​Configure Live Chat Messenger

Sprinklr Live Chat Messenger provides various methods to help you update user details, capture conversation context, customize the chat experience, and more.

The following sections describe these methods in detail, along with their syntax and required parameters:

Update User

Use the updateUser method to authenticate the user and update their details such as user Id, first name, last name, and more.

Syntax

import MessengerClient from '@sprinklrjs/chat-native-client'​MessengerClient.updateUser({    userId: '12345',    firstName: 'John',    lastName: 'Doe',    phoneNo: '9876543210',    email: 'John.Doe@example.com',    profileImageUrl: 'https://example.com/profilePic.jpg',    hash: 'f30c3b0835ecd378a134c74bce8cea866df8c5b6e12a8c219c9bb288f7270e22'})

Parameters

Update Custom User

Use the updateCustomUser method to authenticate the user and update details of a custom user.

Syntax

import MessengerClient from '@sprinklrjs/chat-native-client'    MessengerClient.updateCustomUser({      customAttribute1: ‘value1',      customAttribute2: ‘value2’,      hash: 'f30c3b0835ecd378a134c74bce8cea866df8c5b6e12a8c219c9bb288f7270e22'  })  

Parameters

Update Locale

Use the updateLocale method to update the language in which Live Chat will be displayed.

Syntax

import MessengerClient from '@sprinklrjs/chat-native-client'MessengerClient.updateLocale(locale)