ThemeProvider

ThemeProvider generates an MD3 theme, loads the SDK's DM Sans font files, wraps children in react-native-paper's PaperProvider, and includes the SDK's DeviceListProvider.

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

const theme = {
  colors: { ...DEFAULT_COLORS, primary: "#2563eb" },
  dark: false,
  spacingMultiplier: 4,
  borderRadiusMultiplier: 4,
};

<OvokThemeProvider theme={theme}>
  <App />
</OvokThemeProvider>;

@ovok/native exports a ThemeProvider name. Alias it when the app also imports a ThemeProvider from expo-router or another navigation/theming package:

import { ThemeProvider as OvokThemeProvider } from "@ovok/native";

ThemeProvider requires the @expo-google-fonts/dm-sans peer dependency. Install it with npx expo install @expo-google-fonts/dm-sans before bundling this provider.

Props

type ThemeProviderProps = {
  children: React.ReactNode;
  theme: {
    colors: Partial<MD3Theme["colors"]> & typeof DEFAULT_COLORS;
    dark: boolean;
    spacingMultiplier: number;
    borderRadiusMultiplier: number;
  };
};

All four theme configuration values are required. DEFAULT_MULTIPLIERS is an exported convenience constant, not an implicit fallback:

import { DEFAULT_COLORS, DEFAULT_MULTIPLIERS } from "@ovok/native";

const theme = {
  colors: DEFAULT_COLORS,
  dark: false,
  spacingMultiplier: DEFAULT_MULTIPLIERS.spacing,
  borderRadiusMultiplier: DEFAULT_MULTIPLIERS.borderRadius,
};

Rendering behavior

The provider returns null until all six DM Sans variants have loaded. The fonts are loaded to make them available to the app, but the generated Paper theme does not wire a custom fontFamily into Paper's typography. Configure typography in your app if you need Paper text variants to use DM Sans.

useAppTheme() outside an SDK ThemeProvider resolves the default Paper theme; the SDK spacing and border-radius helpers are available only after the generated theme is installed. Mount one provider around the components that consume it.