@kustomer/chat-react-native

Kustomer Chat React Native SDK

Embed Kustomer in your own products with our chat SDK for React Native.

---

Installation

yarn add @kustomer/chat-react-native
npx pod-install

Known Issues

iOS

In order to fix a dependency build issue, a postinstall script will be ran, that will edit your Podfile to add a post_install hook that will override the build_type of PubNubSwift.

Android

AndroidManifest.xml should have the following, if allowBackup is set to false:

<manifest {...} xmlns:tools="http://schemas.android.com/tools">
    <application {...} tools:replace="android:allowBackup">

The fix to this issue is already in line for the next release of the Android SDK.

Usage

Setup

You can configure the SDK either in your AppDelegate.m or in your JS/TS sources. To configure the SDK in your AppDelegate.m:

First, import KustomerChat Then add a call to Kustomer via your didFinishLaunchingWithOptions:

import KustomerChat

// if you use the following API key, you will be able to chat with one of the RN SDK developers when they're online
NSString * const apiKey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYzNTY1MjI1ODdiOTU1YmYzNDFlZDU3ZCIsInVzZXIiOiI2MzU2NTIyNTMyZDlkODYzOWNkMTMwMmMiLCJvcmciOiI2MzUxN2E2YzVmMjdiY2MzNDFjMjQzZDEiLCJvcmdOYW1lIjoienp6LWtmLXN0YWdpbmciLCJ1c2VyVHlwZSI6Im1hY2hpbmUiLCJwb2QiOiJzdGFnaW5nIiwicm9sZXMiOlsib3JnLnRyYWNraW5nIl0sImF1ZCI6InVybjpjb25zdW1lciIsImlzcyI6InVybjphcGkiLCJzdWIiOiI2MzU2NTIyNTMyZDlkODYzOWNkMTMwMmMifQ.RcCT4lIYUXd5pxVE0Srp3jawlbJXoj7O0qW2WV-NC1g";

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  Kustomer.configure(apiKey: process.env.KUSTOMER_API_KEY, options: nil, launchOptions: launchOptions)
}

You can configure the SDK this way too, follow the remainder of the iOS section here

Another way to configure the SDK is to do it in your JS/TS sources:

import KustomerChat from '@kustomer/chat-react-native';

KustomerChat.configure(apiKey, options);

Permissions iOS

Add the following to your Info.plist for file upload support:

Privacy - Camera Usage Description
Privacy - Media Library Usage Description
Privacy - Microphone Usage Description
Privacy - Photo Library Usage Description

Authentication

For auth setup, see the iOS docs

Open a conversation dialog

import KustomerChat from '@kustomer/chat-react-native';

KustomerChat.show(KustomerDisplayMode); // KustomerDisplayMode is an optional enum param

Custom colors

For Android, see the Android docs For iOS, see the iOS docs

We are working on a way to customize colors in JS/TS sources, once, but it is currently not possible with the native SDKs.

License

You can view the license here

Notes

WIP: Most of the APIs are stable, and no major changes are expected in the way the SDK works.

Push notifications

iOS

• should request permission using another lib, like react-native-permissions or react-native-push-notification or react-native-firebase
• check the iOS docs for Push Keys and Certificates and Push Notifications and modify your AppDelegate.m accordingly.

ℹ️ Note: this will likely match android's behavior in the future

Android

• use a PN library (like react-native-firebase), and call setPushToken once a token is received.
• call KustomerChat.onRemoteMessage in your onRemoteMessage callback. You can use isKustomerNotification to check if the message is from Kustomer, and should be forwarded.