Skip to main content

useAppTheme

useAppTheme is a typed wrapper around React Native Paper's useTheme:

const theme = useAppTheme();

return (
  <View
    style={{
      backgroundColor: theme.colors.surface,
      padding: theme.spacing(4),
      borderRadius: theme.borderRadius(2),
    }}
  />
);

Returned values​

The returned AppTheme includes the Paper MD3 theme, extended colors, spacing(value), borderRadius(value), roundness, and dark. Both helper functions multiply the supplied number by the corresponding value passed to ThemeProvider; they do not round or clamp the argument.

Call the hook below ThemeProvider to receive the SDK-generated helpers. Outside that provider, React Native Paper returns its default theme, which does not provide the SDK's spacing, borderRadius, or extended custom colors; calling those missing helpers can crash. Mount the SDK theme provider or use useOvokUi, which supplies fallback helper functions.

Color contrast​

The SDK exposes semantic colors such as success, error, and warning, but it does not calculate contrast or automatically choose an on* color for custom overrides. Test text and control contrast in both light and dark configurations, especially if replacing primary, error, or palette shades.