npm package: @kweekatel/kwikly-widget-react-native
Description: React native wrapper for live chat widget for Kwikly by Kweekatel
Author: CodeX_R
Latest version: 0.7.1

# Kwikly Widget React Native SDK


## Overview
The **Kwikly Widget React Native SDK** provides a wrapper around the live chat widget for **Kwikly by Kweekatel**, enabling developers to integrate live chat functionality seamlessly into their React Native applications.

## Prerequisites
- Ensure that **Firebase Cloud Messaging (FCM)** is correctly set up if using push notifications.

## Installation

To install the package in your React Native project:

```sh
npm install @kweekatel/kwikly-widget-react-native --save
# OR
yarn add @kweekatel/kwikly-widget-react-native
```

### Android Setup

1. Open `android/build.gradle` and ensure the module is included:
    ```gradle
   buildscript {
        dependencies {
            classpath 'com.google.gms:google-services:4.4.2' // Add this
        }
    }
    ```
2. Open `android/app/build.gradle` and add Firebase Messaging dependency:
   ```gradle
    dependencies {
        implementation(platform("com.google.firebase:firebase-bom:33.8.0"))
        implementation 'com.google.firebase:firebase-messaging'
    }

    apply plugin: 'com.google.gms.google-services' // Add this
   ```
3. Place google-services.json in android/app directory.
4. In android/app/MainActivity, get firebase the token 
    ```kotlin
    import android.util.Log
    import android.os.Bundle
    import com.google.firebase.FirebaseApp
    import com.google.firebase.messaging.FirebaseMessaging
    import android.os.Build
    import com.kwiklywidgetreactnative.KwiklyModule


    class MainActivity : ReactActivity() {

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            FirebaseApp.initializeApp(this)
            getFCMToken()

            // Request notification permission for Android 13+
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) { 
                requestPermissions(arrayOf(android.Manifest.permission.POST_NOTIFICATIONS), 1)
            }
        }

        private fun getFCMToken() {
            FirebaseMessaging.getInstance().token
                .addOnCompleteListener { task ->
                    if (task.isSuccessful) {
                        val token = task.result
                        Log.d("AppMainActivity", "FCM Token: $token")
                        
                        KwiklyModule.sendTokenToKwikly(applicationContext, token)
                    } else {
                        Log.e("AppMainActivity", "Failed to get FCM token", task.exception)
                    }
                }
        }
    }
    ```
4. Create KwiklyFirebaseMessagingService.kt inside your app directory(com.example.app) with below content:
    **Remember to replace `package com.example.app;` with your app package name**

    ```kotlin
    package com.example.app

    import com.google.firebase.messaging.FirebaseMessagingService
    import com.google.firebase.messaging.RemoteMessage
    import com.kwiklywidgetreactnative.KwiklyModule

    class KwiklyFirebaseMessagingService : FirebaseMessagingService() {
        override fun onMessageReceived(remoteMessage: RemoteMessage) {
            super.onMessageReceived(remoteMessage)

            if (KwiklyModule.isKwiklyPush(remoteMessage)) {
                KwiklyModule.handlePushMessage(this, remoteMessage)
            } else {
                // Handle non-Kwikly notifications (if needed)
            }
        }
    } 
    ```
5. Ensure you add these to you Manifest file
   ```xml
    <manifest xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- Required Permissions -->
        <uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
        <uses-permission android:name="android.permission.WAKE_LOCK" />
        <uses-permission android:name="com.google.android.c2dm.permission.RECEIVE" />
        
        <application
            android:name=".MainApplication"
            ...>
            
            <!-- Firebase Messaging Service -->
            <service
                android:name=".KwiklyFirebaseMessagingService"
                android:exported="false">
                <intent-filter>
                    <action android:name="com.google.firebase.MESSAGING_EVENT" />
                </intent-filter>
            </service>
            
        </application>
    </manifest>
   ```
6. Upload your Firebase private key (JSON file) to the Kwikly Client portal.


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

#### Manual linking
1. Open `android/settings.gradle` and ensure the module is included:
   ```gradle
   include ':kwikly-widget-react-native'
   project(':kwikly-widget-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/@kweekatel/kwikly-widget-react-native/android')
   ```
2. Open `android/app/build.gradle` and **add the dependency**:
   ```gradle
   dependencies {
       implementation project(':kwikly-widget-react-native')
   }
   ```
3. Ensure your `MainApplication.java` includes the package:
   ```java
   import com.kwiklywidgetreactnative.KwiklyWidgetReactNativeViewPackage;  // Add this

   @Override
   protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
           new KwiklyWidgetReactNativeViewPackage()  // Add this
       );
   }
   ```
4. **Rebuild the Android project:**
   ```sh
   yarn android
   ```

### iOS Setup

```bash
cd ios
pod install
cd ..
```

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


## Usage

### **Opening the Chat Widget**

You can open the chat widget using the `showConversations` method from the `KwiklyModule` native module for both iOS and Android.

#### Example (React Native JavaScript/TypeScript)

```tsx
import { NativeModules, Button, View } from 'react-native';

const { KwiklyModule } = NativeModules;

function App() {
  const openKwiklyChat = () => {
    KwiklyModule.showConversations(
      '1744912446839527000640482', // Your Kwikly Widget ID
      'user123',                  // User ID
      'John Doe',                 // User Name
      'john@example.com',         // User Email
      '1234567890'                // User Phone
    );
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Open Chat" onPress={openKwiklyChat} />
    </View>
  );
}

export default App;
```

## Logging Out

To **clear user data**, call the `logout()` function.

```tsx
KwiklyModule.logout();
```

## License

This project is licensed under the MIT License.