Ovok Mobile SDK Documentation

Welcome to the Ovok Mobile SDK documentation! This comprehensive React Native SDK provides healthcare-focused components and utilities for building modern mobile applications.

Overview

The Ovok Mobile SDK is designed specifically for healthcare and medical applications, offering:

• Pre-built Components: Ready-to-use UI components following healthcare design patterns
• Authentication System: Secure sign-in with email/password and social providers
• Theme Integration: Consistent design system with Material Design 3
• TypeScript Support: Full type safety throughout the SDK

Quick Start

Creating a new project

Before using the SDK, you'll need to create an Ovok account and set up a project at register.ovok.com.

Obtaining Your Tenant Code

To get your organization's tenant code, use the Ovok API to receive organization codes via email:

curl -X POST https://api.ovok.com/organizations/code/email \
  -H "Content-Type: application/json" \
  -d '{"email": "your-email@example.com"}'

For detailed API documentation, refer to the Ovok API Reference.

Installation

To get started with the Ovok Mobile SDK, follow our comprehensive Installation & Setup Guide which covers:

• SDK installation
• Required dependencies
• Platform-specific configurations
• Complete setup examples

Basic Usage

Once you've completed the installation, wrap your app with the theme provider. The SDK exports ThemeProvider; alias it as OvokThemeProvider so it doesn't shadow other libraries' ThemeProvider (React Navigation also ships one):

import React from "react";
import {
  ThemeProvider as OvokThemeProvider,
  DEFAULT_COLORS,
} from "@ovok/native";

export default function App() {
  return (
    <OvokThemeProvider theme={{ colors: DEFAULT_COLORS, dark: false }}>
      {/* Your app content */}
    </OvokThemeProvider>
  );
}

Package name: the SDK ships as @ovok/native. @ovok/mobile is a legacy name and does NOT resolve on npm — older snippets you may find use it; treat them as outdated.

Provider: the SDK does NOT export a bare Provider. Use ThemeProvider as OvokThemeProvider (UI theme) from @ovok/native AND OvokProvider (FHIR client + auth state) from @ovok/core. See the full installation guide for the canonical provider chain.

Your First Component

Create a complete sign-in screen with theme integration:

import React from "react";
import { StyleSheet } from "react-native";
import { SignIn, useAppTheme } from "@ovok/native";
import { useTranslation } from "react-i18next";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
});

export const LoginScreen = () => {
  const { t } = useTranslation();
  const theme = useAppTheme();

  return (
    <SignIn
      style={[
        styles.container,
        {
          backgroundColor: theme.colors.background,
          padding: theme.spacing(3),
        },
      ]}
    >
      <SignIn.Header>
        <SignIn.Header.Title>{t("auth.signIn.welcome")}</SignIn.Header.Title>
        <SignIn.Header.Description>
          {t("auth.signIn.description")}
        </SignIn.Header.Description>
      </SignIn.Header>

      <SignIn.EmailForm
        loginType="Patient"
        onSuccess={(response) => {
          console.log("Login successful:", response);
        }}
        onError={(error) => {
          console.error("Login failed:", error);
        }}
      />
    </SignIn>
  );
};

Key Features

• Security First: Secure authentication flows with industry-standard practices
• Design System: Material Design 3 components with consistent theming
• Cross-Platform: Native iOS and Android support
• TypeScript: Full type safety throughout the SDK
• Accessibility: Built-in accessibility features and screen reader support
• Localization: Multi-language support with translation keys
• Theme Integration: Customizable themes using useAppTheme hook

Components List

Authentication

• Sign-In - Complete authentication system with email/password and social login support
• Logout Button - Secure logout functionality with confirmation

Getting Help

• Component Documentation: Detailed API reference and examples for each component
• Code Examples: Complete, runnable examples showing real-world usage
• Troubleshooting: Common issues and solutions

Next Steps

Ready to get started? Follow these steps:

1. Installation & Setup - Complete installation guide with all dependencies
2. Authentication Components - Complete authentication flows
3. Sign-In Component - Email/password and social login