GuidesComponentsTheme

useAppTheme

Read the generated Paper theme and SDK spacing helpers

  • Stable unknown
  • Release candidate since 1.16.1-rc.3
  • Development since 1.16.1-dev.2111+9796905

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.

Last updated on

On this page