SanarKit: react-native-sanarkit

A React Native library for integrating Sanar Services seamlessly into your application.

Features

• SanarKit: Core SDK for authentication and session management.
• SKDashboard: Module for consolidated dashboard access to all Sanar services.
• SKAppointments: Module for managing healthcare appointments and scheduling.
• SKConsultation: Module for chat-based teleconsultation.
• SanarRTC: Core module for handling real-time video consultations.
• ITCBooking : Module for Instant Consultation booking.

Installation

For complete integration, refer to our Installation Guide.

iOS

To enable camera and microphone usage, add the following entries to your Info.plist file:

<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microphone is accessed for the first time</string>

Android

To enable camera and microphone usage, add the following permissions to your AndroidManifest.xml file:

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
    <uses-permission android:name="android.permission.CAMERA" />

Initialization

Before using any Sanar SDK features, initialize the SDK by setting up required configurations to ensure communication with Sanar Services.

SanarKit Properties

Properties

• connect: Method for authentication and session creation with Sanar Services
• disconnect: Method to terminate active sessions
• SanarRTC: Sanar Teleconsultation Module
• setEnvironment : Method to set environment.

Connect

The connect method is used for authentication and session creation with Sanar Services.

Usage

import { SanarKit } from '@maren-sa/react-native-sanarkit';

SanarKit.connect(
  cid: <sanar-client-access-token>,
  info: <UserInfo>,
  lang: <String>
);

Parameters

• cid (String): Client ID provided by Sanar.
• info (Object): User details required for session creation.
• lang (String, optional): Language preference (default: English).

UserInfo Format

const userInfo = {
  first_name: "John",
  last_name: "Doe",
  dob: "1990-01-01",
  gender: "M",
  nationality: "Saudi Arabia",
  document_id: "2469433220",
  mid: "MG2",
  document_type: 1,
  phone_code: "91",
  phone_no: "81794771111",
  maritalStatus: "0"
};

Disconnect

To terminate the session when it's no longer needed, use the disconnect method:

SanarKit.disconnect();

Session requirement: SKDashboard, SKAppointments, SKConsultation and SanarRTC all require an active SanarKit session (created via SanarKit.connect). Each module validates the session automatically and triggers its onEndFlow callback if no valid session is present — so always connect before enabling these modules.

SKDashboard Implementation

SKDashboard is a consolidated dashboard module that provides access to all Sanar services through a unified, web-based interface rendered inside your app.

Usage

import { useState } from 'react';
import { SKDashboard } from '@maren-sa/react-native-sanarkit';

const [isDashboardEnable, setIsDashboardEnable] = useState(false);

// Enable it once you have an active SanarKit session
<SKDashboard
  enable={isDashboardEnable}
  navigationOption={true}
  onEndFlow={() => setIsDashboardEnable(false)}
/>

Parameters

• enable (Boolean): Controls whether the dashboard module is active.
• onEndFlow (Function): Callback triggered when the dashboard is closed or navigation returns to home.
• navigationOption (Boolean, optional): Controls navigation-bar visibility within the dashboard (default: true). When false, the dashboard is rendered without its in-page navigation.

Features

• Unified Access: Single entry point to all Sanar services.
• Service Overview: Comprehensive view of available healthcare services.
• Navigation Control: Optional navigation bar for seamless embedding.
• Session Management: Automatic session validation and handling.

SKAppointments Implementation

SKAppointments is an appointment-management module for scheduling and managing healthcare appointments, rendered inside your app.

Usage

import { useState } from 'react';
import { SKAppointments } from '@maren-sa/react-native-sanarkit';

const [isAppointmentsEnable, setIsAppointmentsEnable] = useState(false);

// Enable it once you have an active SanarKit session
<SKAppointments
  enable={isAppointmentsEnable}
  navigationOption={true}
  onEndFlow={() => setIsAppointmentsEnable(false)}
/>

Parameters

• enable (Boolean): Controls whether the appointments module is active.
• onEndFlow (Function): Callback triggered when the appointments module is closed or navigation returns to home.
• navigationOption (Boolean, optional): Controls navigation-bar visibility within the appointments interface (default: true).

Features

• Appointment Scheduling: Book new healthcare appointments.
• Appointment Management: View, modify, and cancel existing appointments.
• Provider Selection: Browse and select healthcare providers.
• Calendar Integration: Calendar-based scheduling.
• Status Tracking: Real-time appointment status updates.

SKConsultation Implementation

SKConsultation is a chat-based teleconsultation module, providing real-time communication for users and medical professionals.

Usage

import { SKConsultation } from '@maren-sa/react-native-sanarkit';

<SKConsultation
  enable={isConsultationEnable} 
  appointmentId={appId} 
  empId={docId}
  onEndFlow={() => setIsConsultationEnable(false)}
/>

Parameters

• enable (Boolean): Controls whether consultation module is active.
• appointmentId (String): Unique id for the appointment.
• empId (String): ID of the consulting Doctor.
• onEndFlow (Function): Callback triggered when consultation module is closed on back button.

ITCBooking

The ITCBooking module provides instant teleconsultation booking functionality with build in interface. It integrates with SanarKit services to enable Instant appointment booking and consultation features.

Installation

The module is included in the SanarKit SDK package. No additional installation is required.

Usage

import { ITCBooking } from '@maren-sa/react-native-sanarkit';

// In your component
<ITCBooking
  enable={boolean}
  onEndFlow={() => void}
/>

Parameters

• enable (Boolean): Controls whether consultation module is active.
• onEndFlow (Function): Callback triggered when ITCBooking module is closed on back button.

For detailed documentation on ITCBooking module, refer to ITCBooking Documentation.

SanarRTC

SanarRTC is a teleconsultation module, providing real-time communication for users and Doctors. Refer to SanarRTC Docs for its integration and usage.

SanarRTC Properties

• enable: Method for enabling and disabling the SanarRTC module.
• isFullscreen: Boolean property to control the video call view size (fullscreen or minimized).
• onCallStatusChange: Callback triggered when the SanarRTC call status changes.
• onViewModeChange: Callback triggered when the video call view changes between fullscreen and minimized.

onCallStatusChange Callback

The onCallStatusChange callback is triggered whenever the SanarRTC call status changes. This allows the application to handle call events accordingly. Below are the possible statuses:

| Status | Description | |----------------------|-------------| | CALL_INITIATED | Triggeres when an incoming call request is received from the doctor. | | CALL_ACCEPTED | Triggeres when the user has accepted the incoming call. | | CALL_REJECTED | Triggeres when the user has rejected the incoming call. | | CALL_END_USER | Triggers when the user voluntarily ends the call after the consultation is complete. | | CALL_END_PROVIDER | Triggers when the doctor ends the call after the consultation is complete. |

onViewModeChange Callback

The onViewModeChange callback is triggered whenever the video call view changes between fullscreen and minimized modes. This allows the application to handle view mode changes accordingly.

Parameters

• mode (String): The current view mode - either 'fullscreen' or 'minimized'

Usage

<SanarRTC
  enable={connect}
  onViewModeChange={(mode) => {
    if (mode === 'minimized') {
      console.log('Video call view is now minimized');
      // Handle minimized state
    } else if (mode === 'fullscreen') {
      console.log('Video call view is now fullscreen');
      // Handle fullscreen state
    }
  }}
/>

Video Call View Control

Minimize / Maximize Video Call View

The isFullscreen property allows you to control the video call view size from the app level. When set to true, the video call view will be displayed in fullscreen mode. When set to false, it will be minimized.

<SanarRTC 
  enable={connect}
  isFullscreen={true} // Controls fullscreen/minimized state
/>

Global Video Call View

SanarRTC can be rendered at the root level of your application to ensure the video call view is available globally during an active call. This is particularly useful for maintaining the video call interface across different screens and navigation states.

Usage

import SanarRTC, { SanarKit } from '@maren-sa/react-native-sanarkit';

const App = () => {
  const [connect, setConnect] = useState(false);
  
  // ... SanarKit initialization code ...

  return (
    <>
      {/* Your app components */}
      <YourAppContent />
      
      {/* Global SanarRTC component */}
      <SanarRTC
        enable={connect}
        isFullscreen={true}
        onViewModeChange={(mode) => {
          console.log('View mode changed to:', mode);
        }}
        onCallStatusChange={(status) => {
          console.log('Call status:', status);
        }}
      />
    </>
  );
};

Usage

import SanarRTC, { SanarKit } from '@maren-sa/react-native-sanarkit';

const cID = 'your-client-id';
const info = {} // UserInfo

useEffect(() => {
    const initializeSanar = async () => {
      try {
        const response = await SanarKit.connect(cID, info);
        if (response.status) {
          // enable SanarRTC on successfull connection with SanarKit
          setConnectSanar(true);
        } else {
          console.log('Connection failed with SanarKit:', response.message);
        }
      } catch (error) {
        console.error('Error connecting to SanarKit:', error);
      }
    };
    initializeSanar();

    return () => {
      SanarKit.disconnect();
    }
  },[]);

<SanarRTC 
  enable={connect}
  isFullscreen={true}
  onViewModeChange={(mode) => {
    console.log('Video call view mode:', mode);
  }}
  onCallStatusChange={(status) =>{
    switch(status) {
      case 'CALL_INITIATED':
        console.log('Call is being initiated...');
        break;
      case 'CALL_ACCEPTED':
        console.log('Call has been accepted');
        break;
      case 'CALL_REJECTED':
        console.log('Call was rejected');
        break;
      case 'CALL_END_USER':
        console.log('Call ended by user');
        break;
      case 'CALL_END_PROVIDER':
        console.log('Call ended by provider');
        break;
    }
  }}
  />

setEnvironment Environment Configuration

SanarKit SDK supports multiple environments for different stages of development and deployment. By default, the SDK is set to the production environment.

Available Environments

• production: Default environment for live/production applications
• staging: Environment for pre-production testing
• development: Environment for development and debugging

Usage

To set the environment, add the following code to your application's root file (e.g., App.tsx or index.js):

import { SanarKit } from '@maren-sa/react-native-sanarkit';

// Set environment before initializing SanarKit
SanarKit.setEnvironment('production'); // or 'staging' or 'development'

Example Repository

For detailed implementation and usage, check the Example Repository.