Skip to main content

App shell and providers

The native package does not provide a single catch-all provider. The app creates the client with @ovok/core, then composes the providers required by its screens.

The example app mounts providers in this order:

  1. KeyboardProvider
  2. OvokProvider from @ovok/core
  3. ThemeProvider from @ovok/native
  4. BottomSheetModalProvider when screens use bottom sheets
  5. The navigation theme provider
  6. Navigation and screens

Call initializeOvokNativeRuntime once during app startup, before constructing the client. Keep startup initialization outside React render. Provider order does not replace that step.

import { OvokClient, OvokProvider } from '@ovok/core';
import {
  DEFAULT_COLORS,
  DEFAULT_MULTIPLIERS,
  ExpoClientStorage,
  initializeOvokNativeRuntime,
  ThemeProvider as OvokThemeProvider,
} from '@ovok/native';
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
import { KeyboardProvider } from 'react-native-keyboard-controller';
import { Stack } from 'expo-router';

initializeOvokNativeRuntime();

const client = new OvokClient({
  storage: new ExpoClientStorage(),
  baseUrl: process.env.EXPO_PUBLIC_OVOK_BASE_URL,
  fhirUrlPath: '/fhir',
});

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

Mount BottomSheetModalProvider only when the app uses bottom-sheet components. The SDK uses the provider but does not re-export it.

Theme and navigation​

The native ThemeProvider accepts colors, dark, spacingMultiplier, and borderRadiusMultiplier. Its components read the theme through the SDK theme hook. React Navigation has a separate theme contract; map the same brand colors into the navigation theme explicitly.

The provider loads the bundled font before rendering its children. Account for its loading state in the app’s launch experience.

Context-dependent features​

Authentication screens, patient and observation components, health-data import, socket hooks, questionnaire submission helpers, and Bluetooth result persistence expect the active client context. If a screen renders without data, check provider order, login state, and selected patient before changing the component props.