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 eight rendering layers, stacked bottom-to-top:
1
Ambient shadow shell— Soft separation shadow and optional glow (no overflow:hidden, so it renders correctly on Android)
2
Clip shell— Clips all optical layers to the border radius
3
BlurView— Native platform blur via expo-blur (skipped when blur is unavailable)
4
Tint body— Very low-opacity color overlay — keeps the surface barely tinted
5
Internal diffusion— Three overlapping haze views: a full-frame haze, an upper warm-white zone, and a lower atmospheric-blue zone — these create optical depth
6
Directional sheen— Three specular layers: a tight specular peak, a broader falloff, and hairline edge lines along the top and sides — simulating curved-glass light response
7
Soft border ring— An outer border and an inner hairline border — near-invisible optical edge
8
Content— Children rendered above all material 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.20 | none | Flat / opaque background |
| 1 | 22 | 0.32 | subtle (r 38) | Subtle surface card |
| 2 | 38 | 0.38 | light (r 54) | Standard card (default) |
| 3 | 54 | 0.44 | medium (r 70) | Floating panel |
| 4 | 68 | 0.50 | heavy (r 86) | Modal / sheet |
| 5 | 82 | 0.54 | deep (r 108) | 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>
);
}