@abihealth/goapp-react-native NPM

Abi GoApp SDK Installation Guide

This guide explains how to install the @abihealth/goapp-react-native SDK and its peer dependencies. Correct installation and configuration are needed to use the SDK's features.

Installation Requirements

Install the main package (@abihealth/goapp-react-native) and these essential peer dependencies:

react-native-agora (npm): For video calls
react-native-svg (npm): For rendering SVGs
react-native-ssl-public-key-pinning (npm): For security

Follow the instructions for your environment (Bare React Native or Expo). Always consult the official docs for each dependency for detailed information.

Expo Projects (Managed Workflow)

Use these steps for Expo managed workflow (requires a development build).

1. Install using expo install

This command helps install compatible versions:

npx expo install @abihealth/goapp-react-native react-native-agora react-native-svg react-native-ssl-public-key-pinning

2. Configure Permissions and Plugins

Set up permissions and required Expo plugins in app.json or app.config.js:

{
  "expo": {
    "plugins": [
      [
        "react-native-agora",
        {
          "cameraPermission": "Allow $(PRODUCT_NAME) to access camera for video.",
          "microphonePermission": "Allow $(PRODUCT_NAME) to access microphone for video."
        }
      ]
    ],
    "android": {
      "permissions": ["android.permission.CAMERA", "android.permission.RECORD_AUDIO"]
    },
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "Allow $(PRODUCT_NAME) access for video calls.",
        "NSMicrophoneUsageDescription": "Allow $(PRODUCT_NAME) access for video calls."
      }
    }
  }
}

Important: Plugin configurations may change. Always check official react-native-agora docs. Verify Expo compatibility for react-native-ssl-public-key-pinning.

3. Create a Development Build

Standard Expo Go is insufficient. Create a development build:

npx expo run:android
# or
npx expo run:ios

Alternatively, use EAS Build:

eas build --profile development --platform [android|ios]

Install the build, then run your project:

npx expo start --dev-client

Bare React Native Projects

Use these steps for standard bare React Native projects.

1. Install SDK and dependencies

Using npm:

npm install @abihealth/goapp-react-native react-native-agora react-native-svg react-native-ssl-public-key-pinning

Or using Yarn:

yarn add @abihealth/goapp-react-native react-native-agora react-native-svg react-native-ssl-public-key-pinning

2. Link native dependencies (React Native < 0.60)

If using RN < 0.60, you might need manual linking:

npx react-native link react-native-agora react-native-svg react-native-ssl-public-key-pinning

Note: Autolinking should work for RN >= 0.60 (iOS/Android). Verify if issues arise.

3. Install Pods (iOS)

Install CocoaPods dependencies:

cd ios && pod install && cd ..

4. Android Setup & Permissions

Add necessary permissions to android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

Agora Specific: Ensure JitPack is in android/build.gradle:

allprojects {
    repositories {
        // ... other repositories
        maven { url 'https://www.jitpack.io' }
    }
}

5. iOS Setup & Permissions

Add privacy descriptions to ios/<YourProjectName>/Info.plist:

NSCameraUsageDescription: Reason for camera access (e.g., "Enable video calls")
NSMicrophoneUsageDescription: Reason for microphone access (e.g., "Enable audio in video calls")

Post-Installation

After installing and configuring dependencies, import and use @abihealth/goapp-react-native. Remember react-native-ssl-public-key-pinning needs careful key/domain setup. Ensure your build environment (SDK/NDK versions, Xcode) is correct.

Usage

Basic guide to integrating SDK components:

1. Import components and hooks

import { ConsultationsProvider, VideoConsultation, useConsultation } from '@abihealth/goapp-react-native'

2. Wrap your app with ConsultationsProvider

Initializes SDK context with necessary configuration:

// Example App.js
import React from 'react'
import { ConsultationsProvider } from '@abihealth/goapp-react-native'
import MainApp from './MainApp'

const user_access_token = 'YOUR_USER_ACCESS_TOKEN' // Get from your app logic
const region = 'YOUR_API_REGION' // Get from your app logic
// Optional props
const theme = {
  /* Custom theme */
}
const components = {
  /* Custom components */
}

const App = () => {
  const onError = (error) => {
    console.error('SDK Error:', error)
    /* Handle error */
  }

  return (
    <ConsultationsProvider
      region={region}
      token={user_access_token}
      theme={theme} // Optional
      components={components} // Optional
      onError={onError} // Optional
      disableSslPinning={false} // Optional, defaults to false
    >
      {/* Other components */}
    </ConsultationsProvider>
  )
}

export default App

Provider Props:

region (string, required): API region
token (string, required): User authentication token
theme (object, optional): Customize visual theme
components (object, optional): Override default components
onError (function, optional): Error callback
disableSslPinning (boolean, optional): Disable SSL certificate pinning. By default, SSL pinning is enabled for security. Only disable this if you know what you're doing, as it may make your app vulnerable to man-in-the-middle attacks.

3. Use the VideoConsultation component

Renders the video consultation UI:

// Example ConsultationScreen.js
import React from 'react'
import { View } from 'react-native'
import { VideoConsultation } from '@abihealth/goapp-react-native'

// Optional props
const options = {
  /* Video call options */
}

const deliveryAddress = {
  /* Delivery address for the consultation */
}

const ConsultationScreen = () => {
  const eventHandlers = {
    /* Callbacks for events */
  }

  return <VideoConsultation options={options} eventHandlers={eventHandlers} deliveryAddress={deliveryAddress} />
}

export default ConsultationScreen

VideoConsultation Props:

options (object, optional): Video call appearance/behavior config
eventHandlers (object, optional): Callbacks for video call events

deliveryAddress (object, optional): Address for prefilling delivery info

type DeliveryAddress = {
  house?: string
  building?: string
  street?: string
  district?:
    | 'central_and_western'
    | 'eastern'
    | 'southern'
    | 'wan_chai'
    | 'kowloon_city'
    | 'yau_tsim_mong'
    | 'sham_shui_po'
    | 'wong_tai_sin'
    | 'kwun_tong'
    | 'kwai_tsing'
    | 'tsuen_wan'
    | 'tuen_mun'
    | 'yuen_long'
    | 'north'
    | 'tai_po'
    | 'sha_tin'
    | 'sai_kung'
    | 'islands'
}

4. Use the useConsultation hook

Access consultation state and control functions:

// Example ConsultationControls.js
import React from 'react'
import { View, Button, Text } from 'react-native'
import { useConsultation } from '@abihealth/goapp-react-native'

const ConsultationControls = () => {
  const { consultation, start, cancel } = useConsultation()

  const handleStart = () => start(/* params if needed */)
  const handleCancel = () => cancel(/* params if needed */)

  return (
    <View>
      {consultation && <Text>Consultation Info: {/* Details */}</Text>}
      <Button title="Start" onPress={handleStart} />
      <Button title="Cancel" onPress={handleCancel} />
    </View>
  )
}

export default ConsultationControls

useConsultation Hook returns:

consultation (object | null): Current/last consultation info
start (function): Initiates consultation
cancel (function): Cancels consultation
Other values may be available; check SDK docs

Always consult the specific @abihealth/goapp-react-native documentation for details on props, events, hooks, parameters, and advanced configuration.