Mobile-test-sdk-rn-wrapper NPM

genesys-cloud-messenger-mobile-sdk-rn-wrapper

Genesys Cloud Messaging SDK for React Native

The SDK provides a simple react native wrapper for the Genesys Cloud Messenger SDK.

Author: Genesys

Platform Support: Android, iOS

Getting Started
Platform specific additional steps
- Android
- iOS
Usage
Sample Application
License

Getting Started

Pre-requisites

In order to use this SDK you need a Genesys account with the Messaging feature enabled.

Install

Run the following on the application root directory.

Option 1 - npm install

npm install genesys-cloud-messenger-mobile-sdk-rn-wrapper --save

Option 2 - yarn add

yarn add genesys-cloud-messenger-mobile-sdk-rn-wrapper

Install Genesys chat module native dependency

react-native link genesys-cloud-messenger-mobile-sdk-rn-wrapper

Update

To update your project to the latest version of genesys-messenger-mobile-sdk-rn-wrapper

npm update genesys-cloud-messenger-mobile-sdk-rn-wrapper

Platform specific additional steps

android

In order to be able to use the chat module on android please follow the next steps.

Go to build.gradle file, on the android project of your react native app.

YourAppFolder
├── android
│   ├── app
│   │   ├── build.gradle  
│   │   ├── proguard-rules.pro
│   │   └── src
│   ├── build.gradle   <---
│   ├── gradle
│   │   └── wrapper
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   └── settings.gradle
|

Add the following repositories:

mavenCentral()
maven {url "https://genesysdx.jfrog.io/artifactory/genesysdx-android.dev"}

ios

In order to be able to use the chat module on iOS please follow the next steps.

Go to Podfile file, on the ios project of your react native app.

YourAppFolder
├── ios
│   ├── Podfile   <---

validate your platform is set to iOS11 or above.
```
platform :ios, '11.0'
```

Add Genesys Messeging SDK sources.

source 'https://github.com/genesys/dx-sdk-specs-dev'
source 'https://github.com/CocoaPods/Specs'

Add use_frameworks! inside target scope.

Add below post_install inside target scope.

    target 'YourAppTargetName' do
    config = use_native_modules!
    use_frameworks!

    use_react_native!(
        :path => config[:reactNativePath],
        # to enable hermes on iOS, change `false` to `true` and then install pods
        :hermes_enabled => false
    )

    post_install do |installer|
        react_native_post_install(installer)

        installer.pods_project.targets.each do |target|
        target.build_configurations.each do |config|
            config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
        end

        if (target.name&.eql?('FBReactNativeSpec'))
            target.build_phases.each do |build_phase|
            if (build_phase.respond_to?(:name) && build_phase.name.eql?('[CP-User] Generate Specs'))
                target.build_phases.move(build_phase, 0)
            end
            end
        end
        end
    end
    end

Podfile Full Example

Disable Flipper if activated.
```
     # use_flipper!()
```
2 . Make sure you run pod update genesys-cloud-messenger-mobile-sdk-rn-wrapper to get latest version.

Usage

import

Import GenesysCloud module.

import { NativeModules } from 'react-native';
const { GenesysCloud } = NativeModules;

start-chat

Call startChat to get the messenging view and start conversation with an agent.

// Start a chat using the following line:
GenesysCloud.startChat(deploymentId, domain, tokenStoreKey, logging);

chat-events

The wrapper allows listenning to events raised on the chat.

Error events Error event has the following format: {errorCode:"", reason:"", message:""}
State events Currently only started and ended are supported. State event has the following format: {state:""}

In order to register to chat events, add the following to your App:

import { DeviceEventEmitter, NativeEventEmitter } from 'react-native';

// Create event emitter to subscribe to chat events
const eventEmitter = Platform.OS ===  'android' ? DeviceEventEmitter : new NativeEventEmitter(GenesysCloud)

//-> Before calling to startChat, make sure to subscribe to chat events.

// Adds a listener to messenger chat errors.
listeners['onMessengerError'] = eventEmitter.addListener('onMessengerError', (error) => {});

// Adds a listener to messenger chat state events.
listeners['onMessengerState'] = eventEmitter.addListener('onMessengerState', (state)=>{});

//-> Once the chat was ended, the listeners should be removed.
listeners['onMessengerError'].remove();
listeners['onMessengerState'].remove();


// E.g. Usage of the `ended` state event to remove chat listeners:  
const onStateChanged = (state) => {
    if(state.state == 'ended'){
        Object.keys(listeners).forEach((key)=>{
            const listener = listeners[key]
            console.log(`removing listener: ${key}`);
            if(listener) listener.remove();
        })
    }
};

👉 Checkout Sample Application for more details

Android

Configure chat screen orientation

Before startChat is called, use GenesysCloud.requestScreenOrientation() API to set the chat orientation to one of the available options provided by GenesysCloud.getConstants().

SCREEN_ORIENTATION_PORTRAIT
SCREEN_ORIENTATION_LANDSCAPE
SCREEN_ORIENTATION_UNSPECIFIED
SCREEN_ORIENTATION_LOCKED

// E.g.
GenesysCloud.requestScreenOrientation(   
                    GenesysCloud.getConstants().SCREEN_ORIENTATION_LOCKED)

MinifyEnabled and proguard rules

If the hosting app is using the minifyEnabled on gradle configurations, the following line should be added to the proguard-rules.pro file:
-keep class com.genesys.cloud.messenger.transport.shyrka.** { *; }