react-native-zohosalesiq-mobilisten/README.md

A React Native module for the ZohoSalesIQ Mobilisten SDK

[![SupportedLanguages](https://img.shields.io/badge/Platforms-iOS%20%7C%20%20Android-green.svg)](https://www.zoho.com/salesiq/help/developer-section/react-native-sdk-installation.html) [![Version](https://img.shields.io/badge/version-11.2.5-blue.svg)](https://mobilisten.io/) [![Mobilisten NPM CD](https://github.com/zoho/SalesIQ-Mobilisten-ReactNative/workflows/Mobilisten%20NPM%20CD/badge.svg)](https://github.com/zoho/SalesIQ-Mobilisten-ReactNative/actions)

# React Native module for SalesIQ Mobilisten SDK

Connect with customers at every step of their journey. Give them the best in-app live chat experience with Mobilisten. Mobilisten enables customers to reach you from any screen on your app, get their questions answered, and make better purchase decisions.

## Getting Started
[**Mobilisten**](https://mobilisten.io/) is a support chat SDK that comes with a set of highly configurable APIs to suit your needs. Get started by generating an `App` and `Access` keys for your bundle ID from the SalesIQ console.

## Requirements

**iOS**: Minimum deployment target should be set to iOS 13.

**Android**:
Ensure that your project meets the following requirements:

- Minimum Android Version: Android 5.0 (Lollipop) (API Level 21)
- Compile SDK Version: 35 (Android 14)
- Required Permissions:
    - android.permission.INTERNET (Required for network operations)

## Installation
Follow the below steps given below to complete installation of **Mobilisten** in your React-Native app.

1. Install the **react-native-zohosalesiq-mobilisten** package using NPM.
```ruby
npm install react-native-zohosalesiq-mobilisten --save
```

2. Link the module with the react native app
```ruby
react-native link react-native-zohosalesiq-mobilisten
```

#### Installation steps for iOS

1. Navigate to the `ios` folder in the project directory.

2. Run the `pod repo update && pod install` command from the `ios` directory.

For the RNZohoSalesIQ version below `10.0.0`:

1. Open your podfile.

2. Add the "/ios" to the path for the RNZohoSalesIQ pod, as shown below. 
   
```diff
- pod 'RNZohoSalesIQ', :path => '../node_modules/react-native-zohosalesiq-mobilisten'
+ pod 'RNZohoSalesIQ', :path => '../node_modules/react-native-zohosalesiq-mobilisten/ios'
```     
3. Run `pod install` after saving the changes made to the Podfile.

> **Note:** If you're updating from the SDK versions below `10.0.0` to above, remove the above path in your `Podfile` and run the `pod install` in the iOS folder.

#### Installation steps for Android

1. If you're using React Native v0.60 or above, the dependency will be linked automatically without
   any steps being taken.

#### Android: Auto linking with React Native v0.59 and below

```
$ react-native link react-native-zohosalesiq-mobilisten
```

#### Android: Manual linking with React Native v0.59 and below

- Add the below code to the `android/settings.gradle`

```Gradle
include ':react-native-zohosalesiq-mobilisten'
project(':react-native-zohosalesiq-mobilisten').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-zohosalesiq-mobilisten/android')
```

- Implement the dependency in the `android/app/build.gradle` file inside `dependencies`

```Gradle
implementation project(':react-native-zohosalesiq-mobilisten')
```

- Add the below snippet to `android/app/src/main/java/com/module_name/MainApplication.java` if the
  packages were not auto-generated.

```java
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    // ...
    @Override
    protected List<ReactPackage> getPackages() {
        // Add new RNZohoSalesIQPackage() into the React packages list like below
        return new ArrayList<>(Arrays.<ReactPackage>asList(new RNZohoSalesIQPackage()));
    }
    // ...
};

@Override
public ReactNativeHost getReactNativeHost(){
    return mReactNativeHost;
}
```

2. Navigate to the `android` folder within the project directory using Android Studio or any other
   platform of choice for Android development.
   Add the following maven repository to the `build.gradle` or `settings.gradle` file.

For Gradle version 6.7 and below
```Gradle
// Add the following to your project's root build.gradle file.

allprojects {
   repositories {
      google()
      mavenCentral()
      // ...
      maven { url 'https://maven.zohodl.com' }
   }
}
```

For Gradle version 6.8 and above
```Gradle
// Add the following to your settings.gradle file.

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        // Add the Zoho Maven URL here
        maven { url 'https://maven.zohodl.com' }
    }
}
```

3. #### Proguard rules:
If you have enabled ProGuard(minifyEnabled) R8, then please add the following rules in your `proguard-rules.pro` file in your `android` folder.
```
-dontwarn kotlinx.parcelize.Parcelize
```

4. Click `Sync Now` from the toolbar on the IDE.

## New Architecture support: (RN >= 0.73)

To take advantage of the new architecture

1. **iOS**
- Open the `ios/Podfile`  file
Add `ENV['RCT_NEW_ARCH_ENABLED'] = '1'` in the main scope of your `Podfile`
```diff
# Resolve react_native_pods.rb with node to allow for hoisting
+ ENV['RCT_NEW_ARCH_ENABLED'] = '1'
require Pod::Executable.execute_command('node', ['-p',
  'require.resolve(
    "react-native/scripts/react_native_pods.rb",
    {paths: [process.argv[1]]},
  )', __dir__]).strip
```

- Navigate to the `ios` folder under the project directory and run `pod install`.

2. **Android**
- Open the `android/gradle.properties` file.
Toggle the `newArchEnabled` flag from `false` to `true`.

```diff
# Use this property to enable support to the new architecture.
# This will allow you to use TurboModules and the Fabric render in
# your application. You should enable this flag either if you want
# to write custom TurboModules/Fabric components OR use libraries that
# are providing them.
+ newArchEnabled=true
- newArchEnabled=false
```   
> **Note:** While switching between old architecture and new architecture remove the node_modules folder and then run your project.


## Initializing Mobilisten

1. Generate `App` and `Access` keys for iOS and Android platforms by providing your bundle id.
2. Use the `ZohoSalesIQ.initWithCallback` API with keys for each platform as shown below.

```js
import { ZohoSalesIQ } from 'react-native-zohosalesiq-mobilisten';

let appKey;
let accessKey;

if (Platform.OS === 'ios') {
    appKey = "ios_app_key";
    accessKey = "ios_access_key";
} else {
    appKey = "android_app_key";
    accessKey = "android_access_key";
}

ZohoSalesIQ.initWithCallback((appKey, accessKey, success) => {
    // Your code
});
```

5. If you want to show the default chat launcher, use the [**ZohoSalesIQ.Launcher.show()**](https://www.zoho.com/salesiq/help/developer-section/react-native-sdk-launcher-show.html) API (Optional).

## API Documentation
You can find the list of all APIs and their documentation [here](https://www.zoho.com/salesiq/help/developer-section/react-native-sdk-add-event-listener.html) under the **API Reference** section.