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

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

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
  • Pre-Requisites
  • Install
  • Update
• Platform specific additional steps
  • Android
  • iOS
• Usage
  • Import
  • Start Chat
• 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.

1. 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.

1. 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!()

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.

// Now the chat can be triggered using the following method activation:
GenesysCloud.startChat(deploymentId, domain, tokenStoreKey, logging);

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)

License

MIT