reactnatively/glass

GlassView

The foundational rendering primitive of the Liquid Glass system. Composes a native blur layer, tint overlay, edge highlight, and drop shadow into a single adaptable surface.

Import

typescript

import { GlassView } from 'reactnatively';
// or
import { GlassView } from 'reactnatively/glass';

Basic usage

MyCard.tsx

1import { GlassView } from 'reactnatively';2import { Text } from 'react-native';34export function MyCard() {5  return (6    <GlassView7      elevation={2}8      variant="surface"9      borderRadius={20}10      style={{ padding: 20 }}11    >12      <Text style={{ color: 'white' }}>13        A glass surface14      </Text>15    </GlassView>16  );17}

With glow

tsx

<GlassView
  elevation={3}
  glow={{
    color: '#6366f1',
    radius: 32,
    opacity: 0.3,
  }}
  borderRadius={24}
  style={{ padding: 24 }}
>
  {/* Floating glass modal */}
</GlassView>

⚠

Glow is iOS-only. On Android, the glow prop is silently ignored. Use Platform.OS === 'ios' to conditionally apply glow where needed.

Priority & budget

The priority prop integrates with GlassPlatformProvider's render budget. When the budget is exhausted, lower-priority surfaces fall back to solid tint:

tsx

// This surface will always blur (critical)
<GlassView priority="critical" elevation={4}>
  <Modal />
</GlassView>

// This will drop blur if budget exceeded (background)
<GlassView priority="background" elevation={1}>
  <BackgroundDecoration />
</GlassView>

Props

Prop	Type	Default	Description
elevation	0 \| 1 \| 2 \| 3 \| 4 \| 5	2	Glass depth level. Controls blur, shadow, and tint intensity.
variant	GlassTintVariant	"surface"	Tint preset: ultraThin, thin, surface, elevated, overlay, frosted, tinted.
material	MaterialRecipe	undefined	Override both elevation and variant via a named material recipe.
priority	GlassSurfacePriority	"normal"	Blur budget priority: critical, high, normal, low, background.
highlight	boolean \| GlassHighlight	true	Top-edge refraction shimmer. Pass false to disable.
border	boolean	true	Glass edge border ring.
borderWidth	number	1	Border line width in logical pixels.
borderRadius	number	16	Corner radius in logical pixels.
blurOverride	number	undefined	Override blur intensity (0-100). Bypasses the elevation system.
tintOverride	string	undefined	Override tint color. Bypasses the variant system.
glow	GlowConfig \| false	undefined	Outer glow effect with color, radius, and opacity.
style	StyleProp<ViewStyle>	undefined	Applied to the outer shadow shell.
contentStyle	StyleProp<ViewStyle>	undefined	Applied to the inner content container.
children	ReactNode	undefined	Content rendered above all glass layers.