Glass

A Stack that renders a glassy, dark, blurred translucent background — Bauhaus's cross-platform answer to "glassmorphism" surfaces. It's built on Expo's BlurView, not a hand-rolled per-platform blur.

React Native

import { Glass } from '@hoverinc/design-system-react-native';

<Glass padding="$400" borderRadius="$large">
  <Body color="$colorInvert">Glass surface</Body>
</Glass>;

Common Mistakes

  • Glass requires the expo-blur package to be installed and linked — don't add it to a bare React Native project without Expo modules; it won't render.
  • The default tint is 'dark' and it does not automatically adapt to light/dark color scheme — pass tint="light" explicitly if you need a light glass surface. Don't assume it theme-switches on its own.
  • If you're hand-rolling a blur effect with platform-specific BlurView/elevation workarounds instead of using Glass, stop — that's exactly the cross-platform-effect anti-pattern Glass exists to replace (same category as Shadow for depth effects). The experimentalBlurMethod: 'dimezisBlurView' Android workaround for blur reliability is already baked in.
  • borderRadius defaults to $large and rounds all four corners — override it if you need a different shape, rather than assuming it's square by default.

Gallery

Grid