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

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

Due to a late init issue, for Android, you want to configure the SDK in your MainApplication.java/kt for now:

public void onCreate() {
  // ...
  KustomerChat.configure(apiKey, options);
}

Currently not the best way to configure the SDK

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.