@kustomer/chat-react-native/README.md

Kustomer Chat SDK wrapper for React Native

<img align="left" width="80" height="80" src="https://files.readme.io/7859feb-small-Group_4.png" title="Kustomer logo" float="left" xstyle="width:356px;height:61px"/>

# Kustomer Chat React Native SDK

Embed [Kustomer](https://www.kustomer.com/) in your own products with our chat SDK for React Native.

---

## Installation

```sh
yarn add @kustomer/chat-react-native
```

[setup steps](https://developer.kustomer.com/chat-sdk/v2-iOS/docs/installation#initialize-the-chat-ios-sdk-with-options)

**iOS support**

```
cd ios
pod update
pod install
```

**Android Support**

Due to potential late init issues, we recommend initialization through your *MainApplication.java/kt*

`edit android/app/src/main/java/com/push_notifications/MainApplication.kt`

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

# HOWTO INSTALL

The default way to configure the SDK is through in your app's js bundle. [Here is an example app with README explaining how to configure the app to securely import your API key](https://github.com/kustomer/react-native-chat-examples/tree/master/configure_chat).

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

if(platform.ios) {
  // Ensure configure runs only once. Tested with `useEffect`. see example above.
  KustomerChat.configure(apiKey, options);
}
```

### Permissions iOS

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

```txt
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](https://developer.kustomer.com/chat-sdk/v2.7.3-iOS/docs/authentication)

### Open a conversation dialog

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

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

### Custom colors

For Android, see the [Android docs](https://developer.kustomer.com/chat-sdk/v2-Android/docs/customize-colors-updated)
For iOS, see the [iOS docs](https://developer.kustomer.com/chat-sdk/v2.7.4-iOS/docs/customize-colors)

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](https://www.kustomer.com/legal/supplemental-terms/)

## 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](https://developer.kustomer.com/chat-sdk/v2.7.6-iOS/docs/push-certificates) and [Push Notifications](https://developer.kustomer.com/chat-sdk/v2.7.6-iOS/docs/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.