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:

1npx 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:

1{
2  "expo": {
3    "plugins": [
4      [
5        "react-native-agora",
6        {
7          "cameraPermission": "Allow $(PRODUCT_NAME) to access camera for video.",
8          "microphonePermission": "Allow $(PRODUCT_NAME) to access microphone for video."
9        }
10      ]
11    ],
12    "android": {
13      "permissions": ["android.permission.CAMERA", "android.permission.RECORD_AUDIO"]
14    },
15    "ios": {
16      "infoPlist": {
17        "NSCameraUsageDescription": "Allow $(PRODUCT_NAME) access for video calls.",
18        "NSMicrophoneUsageDescription": "Allow $(PRODUCT_NAME) access for video calls."
19      }
20    }
21  }
22}

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:

1npx expo run:android
2# or
3npx expo run:ios

Alternatively, use EAS Build:

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

Install the build, then run your project:

1npx expo start --dev-client

Bare React Native Projects

Use these steps for standard bare React Native projects.

1. Install SDK and dependencies

Using npm:

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

Or using Yarn:

1yarn 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:

1npx 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:

1cd ios && pod install && cd ..

4. Android Setup & Permissions

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

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

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

1allprojects {
2    repositories {
3        // ... other repositories
4        maven { url 'https://www.jitpack.io' }
5    }
6}

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

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

2. Wrap your app with ConsultationsProvider

Initializes SDK context with necessary configuration:

1// Example App.js
2import React from 'react'
3import { ConsultationsProvider } from '@abihealth/goapp-react-native'
4import MainApp from './MainApp'
5
6const user_access_token = 'YOUR_USER_ACCESS_TOKEN' // Get from your app logic
7const region = 'YOUR_API_REGION' // Get from your app logic
8// Optional props
9const theme = {
10  /* Custom theme */
11}
12const components = {
13  /* Custom components */
14}
15
16const App = () => {
17  const onError = (error) => {
18    console.error('SDK Error:', error)
19    /* Handle error */
20  }
21
22  return (
23    <ConsultationsProvider
24      region={region}
25      token={user_access_token}
26      theme={theme} // Optional
27      components={components} // Optional
28      onError={onError} // Optional
29      disableSslPinning={false} // Optional, defaults to false
30    >
31      {/* Other components */}
32    </ConsultationsProvider>
33  )
34}
35
36export 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:

1// Example ConsultationScreen.js
2import React from 'react'
3import { View } from 'react-native'
4import { VideoConsultation } from '@abihealth/goapp-react-native'
5
6// Optional props
7const options = {
8  /* Video call options */
9}
10
11const deliveryAddress = {
12  /* Delivery address for the consultation */
13}
14
15const ConsultationScreen = () => {
16  const eventHandlers = {
17    /* Callbacks for events */
18  }
19
20  return <VideoConsultation options={options} eventHandlers={eventHandlers} deliveryAddress={deliveryAddress} />
21}
22
23export 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

  1type DeliveryAddress = {
  2  house?: string
  3  building?: string
  4  street?: string
  5  district?:
  6    | 'central'
  7    | 'eastern'
  8    | 'southern'
  9    | 'wan_chai'
  10    | 'city'
  11    | 'kwun_tong'
  12    | 'sham_shui_po'
  13    | 'wong_tai_sin'
  14    | 'yau_tsim_mong'
  15    | 'islands'
  16    | 'kwai_tsing'
  17    | 'north'
  18    | 'sai_kung'
  19    | 'sha_tin'
  20    | 'tai_po'
  21    | 'tsuen_wan'
  22    | 'tuen_mun'
  23    | 'yuen_long'
  24}

4. Use the useConsultation hook

Access consultation state and control functions:

1// Example ConsultationControls.js
2import React from 'react'
3import { View, Button, Text } from 'react-native'
4import { useConsultation } from '@abihealth/goapp-react-native'
5
6const ConsultationControls = () => {
7  const { consultation, start, cancel } = useConsultation()
8
9  const handleStart = () => start(/* params if needed */)
10  const handleCancel = () => cancel(/* params if needed */)
11
12  return (
13    <View>
14      {consultation && <Text>Consultation Info: {/* Details */}</Text>}
15      <Button title="Start" onPress={handleStart} />
16      <Button title="Cancel" onPress={handleCancel} />
17    </View>
18  )
19}
20
21export 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.