# ThemeProvider

Canonical page: https://docs.ovok.com/native-sdk/guide/components/theme/theme-provider

`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`.

```tsx
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:

```tsx
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 [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/theme` API reference](/native-sdk/reference/theme).

## Rendering behavior [#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.