Installation & Setup

This guide covers the complete installation process for the Ovok Mobile SDK, including all required dependencies and platform-specific configurations.

Installation

1. Install the SDK

Install the Ovok Mobile SDK in your React Native project:

npm
yarn
bun

npm install @ovok/native

yarn add @ovok/native

bun add @ovok/native

2. Install Dependencies

The Ovok Mobile SDK requires additional packages to function properly. Install all mandatory peer dependencies:

npm
yarn
bun

npx expo install react-native-keyboard-controller @react-native-google-signin/google-signin expo-apple-authentication @kingstinct/react-native-healthkit@^8.5.0 @react-native-community/netinfo expo-health-connect react-native-blob-util react-native-pdf react-native-permissions react-native-svg react-native-health-connect expo-build-properties

yarn expo install react-native-keyboard-controller @react-native-google-signin/google-signin expo-apple-authentication @kingstinct/react-native-healthkit@^8.5.0 @react-native-community/netinfo expo-health-connect react-native-blob-util react-native-pdf react-native-permissions react-native-svg react-native-health-connect expo-build-properties

bunx expo install react-native-keyboard-controller @react-native-google-signin/google-signin expo-apple-authentication @kingstinct/react-native-healthkit@^8.5.0 @react-native-community/netinfo expo-health-connect react-native-blob-util react-native-pdf react-native-permissions react-native-svg react-native-health-connect expo-build-properties

Required Dependencies:

@kingstinct/react-native-healthkit@^8.5.0 - iOS HealthKit integration
@react-native-community/netinfo - Network connectivity detection
@react-native-google-signin/google-signin - Google authentication
expo-apple-authentication - Apple Sign-In (iOS only)
expo-health-connect - Android Health Connect integration
react-native-blob-util - File handling and blob operations
react-native-pdf - PDF document support
react-native-permissions - Permission management
react-native-keyboard-controller - Enhanced keyboard handling
react-native-svg - Render icons
react-native-health-connect - Android Health Connect integration
expo-build-properties - Build properties for Android and iOS

Configuration

The SDK includes Google Sign-In functionality through @react-native-google-signin/google-signin. Add the config plugin to your app.json or app.config.js:

{
  "expo": {
    "plugins": [
      [
        "@react-native-google-signin/google-signin",
        {
          "iosUrlScheme": "com.googleusercontent.apps._your_id_here_"
        }
      ]
    ]
  }
}

For detailed configuration instructions, refer to the React Native Google Sign-In Expo setup guide.

Apple Authentication Configuration

The SDK includes Sign-in with Apple functionality through expo-apple-authentication. Add the config plugin to your app.json or app.config.js:

{
  "expo": {
    "plugins": ["expo-apple-authentication"],
    "ios": {
      "usesAppleSignIn": true
    }
  }
}

Important Notes:

Apple Authentication is iOS only and does not support Android or web
Any app with third-party authentication options must provide Apple authentication to comply with App Store Review guidelines
Limited testing is available on iOS Simulator; use a real device for comprehensive testing

For detailed configuration instructions, refer to the Expo Apple Authentication documentation.

HealthKit Configuration

The SDK includes HealthKit functionality through @kingstinct/react-native-healthkit for iOS health data integration. Add the config plugin to your app.json or app.config.js:

{
  "expo": {
    "plugins": [
      [
        "@kingstinct/react-native-healthkit",
        {
          "NSHealthShareUsageDescription": "This app reads health data to provide personalized healthcare insights",
          "NSHealthUpdateUsageDescription": "This app writes health data to track your wellness progress",
          "background": true
        }
      ]
    ]
  }
}

Important Notes:

HealthKit is iOS only and requires physical device testing
You must request authorization before accessing health data to prevent app crashes
HealthKit capability must be enabled in your Apple Developer account

For detailed usage and API documentation, refer to the React Native HealthKit documentation.

Network Information Configuration

The SDK includes network connectivity detection through @react-native-community/netinfo. No additional configuration is required - the library works out of the box after installation.

Features:

Real-time network connectivity monitoring
Connection type detection (WiFi, Cellular, etc.)
Network quality assessment
Cross-platform support (iOS and Android)

For detailed usage instructions, refer to the Expo NetInfo documentation.

Health Connect Configuration

The SDK includes Android Health Connect functionality through expo-health-connect for Android health data integration. Add the config plugin to your app.json or app.config.js:

{
  "expo": {
    "plugins": ["expo-health-connect"]
  },
  "plugins": [
    [
      "expo-build-properties",
      {
        "android": {
          "compileSdkVersion": 35,
          "targetSdkVersion": 35,
          "minSdkVersion": 26
        }
      }
    ]
  ]
}

Important Notes:

Health Connect is Android only and complements HealthKit on iOS
Requires Android API level 26 (Android 8.0) or higher
Users must have Health Connect app installed on their device

Permissions Configuration

The SDK uses react-native-permissions for managing various device permissions. Add the config plugin with required iOS permissions:

{
  "expo": {
    "plugins": [
      [
        "react-native-permissions",
        {
          "iosPermissions": ["Bluetooth", "Notifications"]
        }
      ]
    ]
  }
}

Keyboard Controller Setup

The SDK uses react-native-keyboard-controller for enhanced keyboard handling. Follow these steps:

Android: No additional setup required after installation.
iOS: The library should work automatically after running pod install.
Optional Configuration: For advanced keyboard behavior, you can configure the keyboard controller in your app's root component:

import { KeyboardProvider } from "react-native-keyboard-controller";
import { Provider } from "@ovok/mobile";

export default function App() {
  return (
    <KeyboardProvider>
      <Provider>{/* Your app content */}</Provider>
    </KeyboardProvider>
  );
}

Complete Configuration Example

Here's a complete app.json configuration with all SDK plugins and platform-specific settings:

{
  "expo": {
    "plugins": [
      "expo-apple-authentication",
      [
        "@react-native-google-signin/google-signin",
        {
          "iosUrlScheme": "com.googleusercontent.apps._your_id_here_"
        }
      ],
      [
        "react-native-permissions",
        {
          "iosPermissions": ["Bluetooth", "Notifications"]
        }
      ],
      [
        "@kingstinct/react-native-healthkit",
        {
          "NSHealthShareUsageDescription": "We need access to your health data to provide personalized healthcare insights",
          "NSHealthUpdateUsageDescription": "We need access to update your health data for tracking your wellness progress",
          "background": true
        }
      ],
      "expo-health-connect",
      [
        "expo-build-properties",
        {
          "android": {
            "compileSdkVersion": 35,
            "targetSdkVersion": 35,
            "minSdkVersion": 26
          }
        }
      ]
    ],
    "ios": {
      "usesAppleSignIn": true,
      "infoPlist": {
        "NSBluetoothPeripheralUsageDescription": "Allow $(PRODUCT_NAME) to connect to Bluetooth devices",
        "NSLocationWhenInUseUsageDescription": "Allow $(PRODUCT_NAME) to access your location",
        "NSBluetoothAlwaysUsageDescription": "Allow $(PRODUCT_NAME) to connect to Bluetooth devices",
        "NSPhotoLibraryUsageDescription": "Allow $(PRODUCT_NAME) to access your photo library"
      }
    },
    "android": {
      "permissions": [
        "android.permission.BLUETOOTH",
        "android.permission.BLUETOOTH_ADMIN",
        "android.permission.BLUETOOTH_CONNECT",
        // Add the required react-native-health-connect permissions
        "android.permission.health.READ_BODY_TEMPERATURE"
      ]
    }
  }
}

Key Configuration Notes:

Replace _your_id_here_ with your actual Google OAuth client ID
iOS permissions are configured in infoPlist for Bluetooth, location, and photo library access
Android permissions include comprehensive Health Connect read/write permissions
HealthKit background processing is enabled for continuous health monitoring

Final Steps

After adding all config plugins, rebuild your app:

npm
yarn
bun

npx expo prebuild --clean
npx expo run:android && npx expo run:ios

yarn expo prebuild --clean
yarn expo run:android && yarn expo run:ios

bunx expo prebuild --clean
bunx expo run:android && bunx expo run:ios

Basic Setup

Once installation is complete, configure your app with the complete provider setup in your root layout file. Create or update app/_layout.tsx with the following configuration that includes client setup, theme configuration, and all necessary providers:

// app/_layout.tsx
import { OvokClient, OvokProvider } from "@ovok/core";
import {
  BottomSheetModalProvider as BSMPVOVK,
  DEFAULT_COLORS,
  DEFAULT_MULTIPLIERS,
  ExpoClientStorage,
  ThemeProvider as OvokThemeProvider,
  polyfillMedplumWebAPIs,
} from "@ovok/native";
import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
import { DarkTheme, ThemeProvider } from "@react-navigation/native";
import { Stack } from "expo-router";
import { KeyboardProvider } from "react-native-keyboard-controller";

// Initialize required polyfills for medical APIs
polyfillMedplumWebAPIs();

// Configure client storage
const storage = new ExpoClientStorage();

// Initialize Ovok client with your configuration
const ovokClient = new OvokClient({
  storage,
  cacheTime: 0,
  baseUrl: "https://api.ovok.com",
  fhirUrlPath: "/fhir",
  socialLoginClientId: "1000.000000000000000000000000000000000000",
  tenantCode: "ovok", // replace it with yours
});

export default function RootLayout() {
  return (
    <KeyboardProvider>
      <OvokProvider client={ovokClient}>
        <OvokThemeProvider
          theme={{
            colors: DEFAULT_COLORS,
            dark: true,
            spacingMultiplier: DEFAULT_MULTIPLIERS.spacing,
            borderRadiusMultiplier: DEFAULT_MULTIPLIERS.borderRadius,
          }}
        >
          <BottomSheetModalProvider>
            <BSMPVOVK>
              <ThemeProvider value={DarkTheme}>
                <Stack />
              </ThemeProvider>
            </BSMPVOVK>
          </BottomSheetModalProvider>
        </OvokThemeProvider>
      </OvokProvider>
    </KeyboardProvider>
  );
}

Configuration Options

OvokClient Configuration:

storage - Client storage implementation using ExpoClientStorage
cacheTime - Cache duration in milliseconds (0 for no caching)
baseUrl - Your API base URL
fhirUrlPath - FHIR endpoint path
socialLoginClientId - Your social login client identifier
tenantCode - Your tenant/organization code

Theme Configuration:

colors - Color scheme using DEFAULT_COLORS or custom colors
dark - Enable dark mode theme
spacingMultiplier - Spacing scale multiplier for consistent layouts
borderRadiusMultiplier - Border radius scale multiplier

Provider Hierarchy:

KeyboardProvider - Enhanced keyboard handling
OvokProvider - Core SDK client and state management
OvokThemeProvider - Theme and styling system
BottomSheetModalProvider - Modal sheet functionality
BSMPVOVK - Required for SDK component sheets
ThemeProvider - React Navigation theming

Next Steps

With installation complete, you're ready to start using the SDK components:

Quick Start Guide - Your first component
Authentication Components - Complete authentication flows
Component Documentation - Detailed API reference

Installation​

1. Install the SDK​

2. Install Dependencies​

Configuration​

Google Sign-In Configuration​

Apple Authentication Configuration​

HealthKit Configuration​

Network Information Configuration​

Health Connect Configuration​

Permissions Configuration​

Keyboard Controller Setup​

Complete Configuration Example​

Final Steps​

Basic Setup​

Configuration Options​

Next Steps​

Installation

1. Install the SDK

2. Install Dependencies

Configuration

Google Sign-In Configuration

Apple Authentication Configuration

HealthKit Configuration

Network Information Configuration

Health Connect Configuration

Permissions Configuration

Keyboard Controller Setup

Complete Configuration Example

Final Steps

Basic Setup

Configuration Options

Next Steps