Glass Engine
The Liquid Glass engine is the rendering heart of Reactnatively. It manages blur surfaces, elevation depth, tint overlays, and edge highlights — adapting automatically to platform capability and device power state.
Architecture
Every glass surface is composed of five rendering layers, stacked bottom-to-top:
1
Shadow shell— Drop shadow / elevation (no overflow:hidden)
2
Clip shell— Clips all glass layers to border radius
3
BlurView— Native platform blur via expo-blur
4
Tint overlay— Semi-transparent color layer
5
Highlight— Top-edge refraction shimmer (LinearGradient)
6
Border ring— 1px glass edge line
7
Content— Children, above all glass layers
Elevation system
The elevation system maps a single integer (0–5) to a complete glass rendering recipe — blur intensity, tint opacity, shadow, and more:
| Elevation | Blur | Tint Opacity | Shadow | Use case |
|---|---|---|---|---|
| 0 | 0 | 0.95 | none | Flat / opaque background |
| 1 | 12 | 0.82 | subtle | Subtle surface card |
| 2 | 24 | 0.72 | light | Standard card (default) |
| 3 | 36 | 0.65 | medium | Floating panel |
| 4 | 52 | 0.58 | heavy | Modal / sheet |
| 5 | 72 | 0.50 | deep | Top-level overlay |
Capability detection
The engine auto-detects platform capability and adjusts rendering accordingly:
typescript
import {
GLASS_CAPABILITY,
SUPPORTS_BLUR,
IS_FULL_GLASS,
IS_PARTIAL_GLASS,
IS_NO_GLASS,
} from 'reactnatively/glass';
// Capability values
// FULL_GLASS — iOS with expo-blur (best)
// PARTIAL_GLASS — Android with BlurView (good)
// NO_GLASS — fallback: solid tint only
console.log(GLASS_CAPABILITY); // 'FULL_GLASS' | 'PARTIAL_GLASS' | 'NO_GLASS'
console.log(SUPPORTS_BLUR); // true | falseRender budget
Use GlassPlatformProvider to set a global blur surface limit:
tsx
import { GlassPlatformProvider } from 'reactnatively/glass';
export function App() {
return (
<GlassPlatformProvider
material={{
quality: 'balanced',
powerMode: 'auto',
}}
budget={{
maxBlurSurfaces: 8,
}}
>
<YourApp />
</GlassPlatformProvider>
);
}